Initial web page rewrite.
This commit is contained in:
Howard Abrams
parent
056162d820
commit
55e1378b57
4 changed files with 166 additions and 0 deletions
82
web/static/website/css/moss-styles.css
Normal file
82
web/static/website/css/moss-styles.css
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
html {
|
||||||
|
background-color: #E3ECDE;
|
||||||
|
background-image: url("../images/background.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center bottom;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
font-family: "Goudy Bookletter 1911", serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,h2,h3 {
|
||||||
|
font-family: "Merienda", serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #B63F31;
|
||||||
|
/* color: #423222; */
|
||||||
|
text-shadow: 5px 5px 10px #E3ECDE;
|
||||||
|
font-size: 5.0vw;
|
||||||
|
/* text-align: justify; */
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80%;
|
||||||
|
-webkit-text-stroke: 1px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* h1:after { */
|
||||||
|
/* content: ""; */
|
||||||
|
/* display: inline-block; */
|
||||||
|
/* width: 100%; */
|
||||||
|
/* } */
|
||||||
|
|
||||||
|
p.buttons {
|
||||||
|
text-align: center;
|
||||||
|
bottom: 5%;
|
||||||
|
left:50%;
|
||||||
|
margin-left:-150px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.playbutton {
|
||||||
|
box-shadow: 0px 1px 10px 5px #E3ECDE;
|
||||||
|
background: linear-gradient(to bottom, #7D9D3C 5%, #405122 100%);
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
background-color: #7D9D3C;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #405122;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 14px 37px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0px 1px 0px #283966;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrolled-instructions {
|
||||||
|
display: none;
|
||||||
|
/* display: none; */
|
||||||
|
/* position: fixed; */
|
||||||
|
/* top: 10%; */
|
||||||
|
/* left: 10%; */
|
||||||
|
max-width: 700px;
|
||||||
|
padding: 50px;
|
||||||
|
margin-left: 70px;
|
||||||
|
|
||||||
|
background-image: url("../images/parchment-paper.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
/* background-size: cover; */
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
BIN
web/static/website/images/background.jpg
Normal file
BIN
web/static/website/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
BIN
web/static/website/images/parchment-paper.png
Normal file
BIN
web/static/website/images/parchment-paper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 827 KiB |
84
web/templates/website/index.html
Normal file
84
web/templates/website/index.html
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
{% load static sekizai_tags %}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Sitting on Moss & Jumping in Puddles</title>
|
||||||
|
<meta name="description" content="My cozy escape from the world." />
|
||||||
|
|
||||||
|
<!-- title -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- rest of the words -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Merienda:wght@300..900&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static "website/css/website.css" %}" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static "website/css/moss-styles.css" %}" />
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="shortcut icon" href="/img/dragon-head.svg" />
|
||||||
|
<link rel="icon" href="/img/dragon.svg" />
|
||||||
|
<link rel="me" href="https://pdx.sh/@howard" />
|
||||||
|
<meta http-equiv="X-Clacks-Overhead" content="Darol Allen" />
|
||||||
|
<meta http-equiv="X-Clacks-Overhead" content="George Vanecek" />
|
||||||
|
<meta http-equiv="X-Clacks-Overhead" content="Rick Cooper" />
|
||||||
|
<meta http-equiv="X-Clacks-Overhead" content="Terry Pratchett" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Sitting on Moss <br/>&<br/> Jumping in Puddles</h1>
|
||||||
|
|
||||||
|
<div id="scrolled-instructions">
|
||||||
|
<p>
|
||||||
|
In a nutshell, this is a storybook game. You read a bit of a story, and like a
|
||||||
|
<em>choose your own adventure</em> book, you <strong><em>do</em></strong>
|
||||||
|
something to <em>move your story along</em>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Technically, this is a <a href="">MUD</a>-like game, where many people can jump
|
||||||
|
into this <em>text adventure games</em>, and explore my cozy, little environment.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To play, follow these steps ...
|
||||||
|
</p>
|
||||||
|
<ol>
|
||||||
|
<li> Click the <b>Enter a cozy world...</b> button. </li>
|
||||||
|
<li> When two <em>windows</em> appear, click the lower one to enter some commands. </li>
|
||||||
|
<li> Type <code>create</code>, then a space, followed by some username, another space, and a password. Don't bother getting creative with the username. The password? Go nuts.</li>
|
||||||
|
<li>
|
||||||
|
Type the following (replacing the text on the right side of the <code>=</code> symbol):
|
||||||
|
<pre>
|
||||||
|
name self = Rambler
|
||||||
|
desc self = A frumpy, but spry person with large ears and dark blue cloak.
|
||||||
|
</pre>
|
||||||
|
When someone types, <code>look rambler</code>, they will see
|
||||||
|
the <code>desc</code> line. Make sense?
|
||||||
|
</li>
|
||||||
|
<li> When you return, type <code>connect</code> followed by the original username and password you typed the first time. </li>
|
||||||
|
</ol>
|
||||||
|
<p>
|
||||||
|
If you are ready to join me,
|
||||||
|
<a href="#"
|
||||||
|
onclick="document.getElementById('scrolled-instructions').style.display='none'">
|
||||||
|
close this window
|
||||||
|
</a>...
|
||||||
|
</div>
|
||||||
|
{% if webclient_enabled %}
|
||||||
|
|
||||||
|
<p class="buttons">
|
||||||
|
<a href="{% url 'webclient:index' %}"
|
||||||
|
class="playbutton">Enter a cozy world...</a>
|
||||||
|
|
||||||
|
<a href="#" onclick="document.getElementById('scrolled-instructions').style.display='block'"
|
||||||
|
class="playbutton">Wait, what is this?</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue