This is the last time I am re-writing these freaking web pages! I am not kidding. THIS IS THE LAST TIME! @#%^&*! It started with Wordpress and the Typo theme. Then self hosted on a Raspberry pi zero with my [dumpster fire] style.css. Then used Joel Dare's neat.css. Now I'm in the middle of a Zen CSS renaissance. I know what you're thinking. This is not the last time. Bah.
A few words about Zen CSS. Choose a minimalist approach.
The center class can be specified for paragraph or anything that needs to be centered
dave@worldsworstwriter.org 2024-12-27
<p class="center">dave@worldsworstwriter.org 2024-12-27</p>
A light and dark color scheme will display depending on the operating system settings. If the OS is set to dark then a dark scheme is displayed. If the OS is set to light, a light scheme is displayed. If the OS is set to auto, the color scheme will change depending on the OS. Usually a light scheme during the day and dark scheme at night. Here is the CSS:
:root {
color-scheme: light dark;
--light-color: #004040;
--light-bg: snow;
--dark-color: #e0e0e0;
--dark-bg: #364e4f;
--highlight-color: black;
--highlight-bg: gainsboro;
--highdark-color: #e0e0e0;
--highdark-bg: #4b6c6d;
--buttonlight-color: black;
--buttonlight-bg: gainsboro;
--buttondark-color: snow;
--buttondark-bg: #343434;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
This is an example of a light color scheme.
Highlighted text
This is an example of a dark color scheme.
Highlighted text
The power of the template is to edit one css file instead of 70. Copy the template to fast start a new page. Embedded text file objects spare another edit when the text file changes. Inline styles provide a way to override the template. And separate CSS files [gasp] are available for things like web apps or when the template is a poor fit. Here is the line to include a central CSS file.
<link rel="stylesheet" href="../css/style.css">
The title of the page uses the <h1> tag. It is centered and capitalized. Subtitles use <h2>, <h3>, and <h4> and are left justified for readability. Subtitles are not capitalized.
<h1>HEADING H1</h1> <h2>Heading H2</h2> <h3>Heading H3</h3> <h4>Heading H4</h4>
The highlight class adds a highlighted background to paragraph text and is indented. Good for quotes, or text blocks.
<p class="highlight">The highlight class adds a highlighted background color to paragraph text. Good for quotes, or text blocks.</p>
Images default to 100% width [shown in the banner image]. Loading is set to lazy. The image width can be overridden with an inline style and are centered with auto margins.
<img src="lotus.jpg" style="width:50%;" alt="lotus flower">
Image captions are done with <figcaption>. The figcaption CSS is tricky. If the image width is overridden, the figcaption width must be overridden.
<figure> <img src="lotus.jpg" style="width:50%;" alt="Lotus Flower"> <figcaption style="width:50%;">Lotus Flowers</figcaption> </figure>
There is no need for javascript, server backends, advertising, subscriptions, pop ups, paywalls, or malware on a static web page. Be kind to your readers [and everyone else].
HTML objects are a good way to embed text files into an HTML document. Here is an example.
NOTE: Wrap the object tags in a <pre> tag so the object will refresh when the text file is changed and so long text lines can be scrolled. Here is the code.
<pre> <object data="example.txt" type="text/plain" width="600" height="1400"> <a href="example.txt">No Support?</a> </object> </pre>
There are 4 major decisions to make with paragraph. The font typeface, size, line height, and justification define the look of the web page. If the font and size are not specified, the browser uses the defaults. Usually Times New Roman @ 16px. This is a difficult decision and highly subjective. The reader can adjust the font size in the browser.
<p>There are major decisions to make with paragraph.</p>
font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 1em; line-height: 1.375em; text-justify: none;
This font is Sans-serif. abcdefg
ABCDEFG 12345
This font is Times New
Roman. abcdefg
ABCDEFG 12345
This font is Arial. abcdefg
ABCDEFG 12345
This font is Helvetica. abcdefg
This font is Helvetica Neue. abcdefg
ABCDEFG 12345
This font is Verdana. abcdefg
ABCDEFG 12345
This font is Monospace/Courier.
abcdefg
ABCDEFG 12345
This font is Courier New.
abcdefg ABCDEFG 12345
One more paragraph consideration is text justification. Justification looks nice. No justification is easier to read. Some will prefer justification. Some will not prefer justification. Justification is highly subjective. This paragraph is not justified.
One more paragraph consideration is text justification. Justification looks nice. No justification is easier to read. Some will prefer justification. Some will not prefer justification. Justification is highly subjective. This paragraph is justified.
The preformatted <pre> tags are highlighted blocks of monospaced font to display code or quotes. The text is indented and long lines can be scrolled.
<p>The preformatted <pre> tags are highlighted blocks of monospaced font to display code.</pre>
HTML and Javascript source code can be displayed with color coded syntax highlighting. This web site HTML Escape can take HTML markup or Javascript code and generate escaped markup/code that can be displayed on a web page. Paste the markup/code into the HTML Markup window and click the HTML Escape button. Here is an example.
<figure>
<video class="center" width="50%" controls
poster="w93hstop.png" preload="none">
<source src="w93hstop.mp4" type="video/mp4">
Your browser does not support
the video tag.
</video>
<figcaption style="width:50%">Casio W93H-1AV Stopwatch
Countdown Timer</figcaption>
</figure>
<pre> <span style="color:dodgerblue"> <span style="color:dodgerblue">< </span>figure <span style="color:dodgerblue">> </span> </span> <br> <span style="color:dodgerblue"> <span style="color:dodgerblue"> <</span>video <span style="color:red"> class <span style="color:seagreen">="center" </span> width <span style="color:seagreen">="50%" </span> controls poster <span style="color:seagreen">="w93hstop.png" </span> preload <span style="color:seagreen">="none" </span> </span> <span style="color:dodgerblue">> </span> </span> <br> <span style="color:dodgerblue"> <span style="color:dodgerblue"> <</span>source <span style="color:red"> src <span style="color:seagreen">="w93hstop.mp4" </span> type <span style="color:seagreen">="video/mp4" </span> </span> <span style="color:dodgerblue">> </span> </span> <br>Your browser does not support the video tag. <br> <span style="color:dodgerblue"> <span style="color:dodgerblue"> <</span>/video <span style="color:dodgerblue">> </span> </span> <br> <span style="color:dodgerblue"> <span style="color:dodgerblue"> <</span>figcaption <span style="color:red"> style <span style="color:seagreen">="width:50%" </span> </span> <span style="color:dodgerblue">> </span> </span>Casio W93H-1AV Stopwatch Countdown Timer <span style="color:dodgerblue"> <span style="color:dodgerblue"> <</span>/figcaption <span style="color:dodgerblue">> </span> </span> <br> <span style="color:dodgerblue"> <span style="color:dodgerblue"> <</span>/figure <span style="color:dodgerblue">> </span> </span> <pre>
| Unit | Low | Normal | High |
|---|---|---|---|
| atm | .989 | 1 | 1.0093 |
| inHg | 29.6 | 29.92 | 30.2 |
| mmHg | 751.84 | 759.96 | 767.08 |
| mbar | 1002.37 | 1013.25 | 1022.68 |
| psi | 14.53 | 14.69 | 14.83 |
<table> <caption>Various Barometric Units</caption> <tr><th>Unit</th><th>Low</th><th>Normal</th><th>High</th></tr> <tr><td>atm</td><td>.989</td><td>1</td><td>1.0093</td></tr> <tr><td>inHg</td><td>29.6</td><td>29.92</td><td>30.2</td></tr> <tr><td>mmHg</td><td>751.84</td><td>759.96</td><td>767.08</td></tr> <tr><td>mbar</td><td>1002.37</td><td>1013.25</td><td>1022.68</td></tr> <tr><td>psi</td><td>14.53</td><td>14.69</td><td>14.83</td></tr> </table>
Use the video tag to embed video content. The poster image is displayed when the video is not playing. Preload none stops the video from loading when the page is loaded.
<figure> <video class="center" width="50%" controls poster="w93hstop.png" preload="none"> <source src="w93hstop.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <figcaption style="width:50%">Casio W93H-1AV Stopwatch Olympic Style Countdown Timer</figcaption> </figure>
dave@worldsworstwriter.org 2024-10-06