Compare commits

...

2 Commits

Author SHA1 Message Date
BodgeMaster da8b0b4228 'pm' Banished: Start writing a new chapter
Just the introductory dialogue for now
2024-03-17 16:40:48 +01:00
BodgeMaster 1019ad2937 html_resources/style: Lower contrast to make design easier on the eyes
TODO: add an option for dim monitors (previous style)
2024-03-16 19:50:31 +01:00
3 changed files with 51 additions and 7 deletions

View File

@ -52,6 +52,12 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<p>
Here is a quote: <span class="quote speech">Hello! It&apos;s me! The
quote.</span><br />
Here&apos;s a non-verbal quote: <span class="quote non-speech">
test abc</span>
</p>
<p> <p>
Here are two types of pre-formatted text: Here are two types of pre-formatted text:
</p> </p>

View File

@ -1,3 +1,18 @@
* {
color: #101010;
}
a {
color: #1515A0;
}
a:visited {
color: #185113;
}
html {
background-color: #e5e3e0;
}
body { body {
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
@ -13,7 +28,7 @@ h1 {
padding-top: 0.8em; padding-top: 0.8em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
border-bottom: 0.1em solid black; border-bottom: 0.1em solid #101030;
margin: 0; margin: 0;
margin-bottom: 0.8em; margin-bottom: 0.8em;
@ -75,7 +90,7 @@ pre {
pre.terminal { pre.terminal {
color: #B5E550; color: #B5E550;
background-color: #3F3F3F; background-color: #3F3F3F;
border: 1px solid black; border: 1px solid #101030;
padding: 1em; padding: 1em;
} }
@ -84,7 +99,7 @@ pre.paper {
/* TODO: typewriter-look? */ /* TODO: typewriter-look? */
/* TODO: tractor feed ribbons? */ /* TODO: tractor feed ribbons? */
background-color: #F0E6CE; background-color: #F0E6CE;
border: 1px solid black; border: 1px solid #101030;
padding: 1em; padding: 1em;
padding-bottom: 0em; padding-bottom: 0em;
@ -98,14 +113,14 @@ span.quote.speech {
color: #303030; color: #303030;
} }
span.quote.speech::before { span.quote.speech::before {
color: black; color: #101030;
content: "\25b8"; content: "\25b8";
font-size: 0.75em; font-size: 0.75em;
position: relative; position: relative;
bottom: 0.15em; bottom: 0.15em;
} }
span.quote.speech::after { span.quote.speech::after {
color: black; color: #101030;
content: "\25c2"; content: "\25c2";
font-size: 0.75em; font-size: 0.75em;
position: relative; position: relative;
@ -116,14 +131,14 @@ span.quote.non-speech {
color: #303030; color: #303030;
} }
span.quote.non-speech::before { span.quote.non-speech::before {
color: black; color: #101030;
content: "\25b9"; content: "\25b9";
font-size: 0.75em; font-size: 0.75em;
position: relative; position: relative;
bottom: 0.15em; bottom: 0.15em;
} }
span.quote.non-speech::after { span.quote.non-speech::after {
color: black; color: #101030;
content: "\25c3"; content: "\25c3";
font-size: 0.75em; font-size: 0.75em;
position: relative; position: relative;
@ -149,6 +164,9 @@ span.quote.thought::after {
position: relative; position: relative;
bottom: 0.15em; bottom: 0.15em;
} }
span.chapter {
color: inherit;
}
span.chapter::before { span.chapter::before {
content: "\25b9"; content: "\25b9";
font-size: 0.75em; font-size: 0.75em;

20
pm-Banished.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html><html><head><title> Banished </title><link rel="stylesheet" type="text/css" href="html_resources/style.css"></head><body><a href="index.html"><button class="back">&lt;</button></a>
<h1>Banished</h1>
<p>
<span class="quote speech">Isabelle!</span><br />
<span class="quote speech">Lucas!</span><br />
<span class="quote speech">I got banished.</span><br />
<span class="quote speech">Wait what?</span><br />
The guard in front of her turns around:<br />
<span class="quote speech">No chit-chat, move along.</span><br />
Isabelle takes a moment to understand the implication of what Lucas had
said.<br />
<span class="quote speech">...ohhhhh. Congrats!</span><br />
The guards grab her by the arms and drag her away from his cell.<br />
<span class="quote speech">Move.</span><br />
<span class="comment">Lucas:</span>
<span class="quote speech">Good luck with your trial!</span>
</p>
<p class="copyright">Copyright &#169; 2023 Jan Danielzick (aka. BodgeMaster) &ndash; All rights reserved.</p><script>let spans = ["<span class=\"paper green\">", "<span>"]; let pre_texts = document.getElementsByTagName("pre"); for (let i = 0; i < pre_texts.length; i++) {if (pre_texts[i].className != "paper") continue; let lines = pre_texts[i].innerHTML.split("\n"); let result = ""; for (let j = 0; j < lines.length; j++) {result = result + spans[j%2] + lines[j] + " ".repeat(80-lines[j].length) + "</span>\n";} pre_texts[i].innerHTML = result;}</script></body></html>