howard/moss-n-puddles
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dynamic background using css templates

Browse source
This commit is contained in:
Howard Abrams 2025-03-02 21:47:13 -08:00
parent 8cf5baff72
commit 9d7ff34566
2 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
web/static/website/css/moss-styles.css → web/templates/website/custom.css
View file

@ -1,6 +1,6 @@
html {
background-color: #E3ECDE;
background-image: url("../images/background.jpg");
background-image: url("static/website/images/background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
@ -23,23 +23,19 @@ h1,h2,h3 {
}
h1 {
color: ##b0dE71; /* #B63F31 */
/* color: ##b0dE71; */
/* #B63F31 */
/* color: #423222; */
color: white;
text-shadow: 5px 5px 5px black; /* #E3ECDE; */
font-size: 5.0vw;
font-weight: 900;
/* text-align: justify; */
text-align: center;
line-height: 80%;
-webkit-text-stroke: 1px black;
/* -webkit-text-stroke: 1px black; */
}
/* h1:after { */
/* content: ""; */
/* display: inline-block; */
/* width: 100%; */
/* } */
p.buttons {
text-align: center;
bottom: 5%;
@ -93,7 +89,7 @@ a.playbutton {
padding: 50px;
margin-left: 70px;
background-image: url("../images/parchment-paper.png");
background-image: url("static/website/images/parchment-paper.png");
background-repeat: no-repeat;
/* background-size: cover; */
background-size:100% 100%;

34
web/templates/website/index.html
View file

@ -18,8 +18,9 @@
<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" %}" />
<style rel="stylesheet" type="text/css" >
{% include "website/custom.css" %}
</style>
<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" />
@ -32,32 +33,27 @@
<body>
</head>
<body>
<h1>Sitting on Moss <br/>&<br/> Jumping in Puddles</h1>
<h1>Sitting on Moss &nbsp; &nbsp;<br/>&<br/> &nbsp; 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>.
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.
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 ...
View this game as a respite from the cacophony of our world, as
you role play (pretend to be) a storybook character in an
idyllic setting.
</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>
When you've logged in, type <code>help me</code> for additional instructions.
</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,
When you are ready to join me,
<a href="#"
onclick="document.getElementById('scrolled-instructions').style.display='none'">
close this window