BodgeMaster
/
post_apocalypse_story
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

html_resources/style: Lower contrast to make design easier on the eyes 

TODO: add an option for dim monitors (previous style)
master
BodgeMaster 2024-03-15 18:59:26 +01:00
parent c41fe0dfea
commit 1019ad2937
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
html_resources/layout.html
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>

32
html_resources/style.css
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;