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 { html {
background-color: #E3ECDE; background-color: #E3ECDE;
background-image: url("../images/background.jpg"); background-image: url("static/website/images/background.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center bottom; background-position: center bottom;
@ -23,23 +23,19 @@ h1,h2,h3 {
} }
h1 { h1 {
color: ##b0dE71; /* #B63F31 */ /* color: ##b0dE71; */
/* #B63F31 */
/* color: #423222; */ /* color: #423222; */
color: white;
text-shadow: 5px 5px 5px black; /* #E3ECDE; */ text-shadow: 5px 5px 5px black; /* #E3ECDE; */
font-size: 5.0vw; font-size: 5.0vw;
font-weight: 900; font-weight: 900;
/* text-align: justify; */ /* text-align: justify; */
text-align: center; text-align: center;
line-height: 80%; line-height: 80%;
-webkit-text-stroke: 1px black; /* -webkit-text-stroke: 1px black; */
} }
/* h1:after { */
/* content: ""; */
/* display: inline-block; */
/* width: 100%; */
/* } */
p.buttons { p.buttons {
text-align: center; text-align: center;
bottom: 5%; bottom: 5%;
@ -93,7 +89,7 @@ a.playbutton {
padding: 50px; padding: 50px;
margin-left: 70px; margin-left: 70px;
background-image: url("../images/parchment-paper.png"); background-image: url("static/website/images/parchment-paper.png");
background-repeat: no-repeat; background-repeat: no-repeat;
/* background-size: cover; */ /* background-size: cover; */
background-size:100% 100%; 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 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/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" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/img/dragon-head.svg" /> <link rel="shortcut icon" href="/img/dragon-head.svg" />
<link rel="icon" href="/img/dragon.svg" /> <link rel="icon" href="/img/dragon.svg" />
@ -32,32 +33,27 @@
<body> <body>
</head> </head>
<body> <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"> <div id="scrolled-instructions">
<p> <p>
In a nutshell, this is a storybook game. You read a bit of a story, and like a 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> <em>choose your own adventure</em> book, you
something to <em>move your story along</em>. <strong><em>do</em></strong> something to
<em>move your story along</em>.
</p> </p>
<p> <p>
Technically, this is a <a href="">MUD</a>-like game, where many people can jump Technically, this is a <a href="">MUD</a>-like game, where many
into this <em>text adventure games</em>, and explore my cozy, little environment. people can jump into this <em>text adventure games</em>, and
explore my cozy, little environment.
</p> </p>
<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> </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> <p>
If you are ready to join me, When you are ready to join me,
<a href="#" <a href="#"
onclick="document.getElementById('scrolled-instructions').style.display='none'"> onclick="document.getElementById('scrolled-instructions').style.display='none'">
close this window close this window