akko/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS

Browse Source
This commit is contained in:
Akko
2025-12-02 16:11:00 +01:00
parent ef0bf1b834
commit 1ab026343c
51 changed files with 1550 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
html/source.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2025-11-27 -->
<!-- 2025-11-28 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=100%, initial-scale=0.7" />
<title>Webbieweb.org Sources</title>
@@ -214,13 +214,13 @@
</div>
</div>
<div id="content" class="content">
<div id="outline-container-org7d560f7" class="outline-2">
<h2 id="org7d560f7">Webbieweb.org Literate Sources&#xa0;&#xa0;&#xa0;<span class="tag"><span class="h4left">h4left</span>&#xa0;<span class="h5left">h5left</span>&#xa0;<span class="h3underline">h3underline</span></span></h2>
<div class="outline-text-2" id="text-org7d560f7">
<div id="outline-container-orgfb22a83" class="outline-2">
<h2 id="orgfb22a83">Webbieweb.org Literate Sources&#xa0;&#xa0;&#xa0;<span class="tag"><span class="h4left">h4left</span>&#xa0;<span class="h5left">h5left</span>&#xa0;<span class="h3underline">h3underline</span></span></h2>
<div class="outline-text-2" id="text-orgfb22a83">
</div>
<div id="outline-container-orgbf0f3be" class="outline-3">
<h3 id="orgbf0f3be">Introduction</h3>
<div class="outline-text-3" id="text-orgbf0f3be">
<div id="outline-container-org63e0b35" class="outline-3">
<h3 id="org63e0b35">Introduction</h3>
<div class="outline-text-3" id="text-org63e0b35">
<p>
These are the <a href="https://en.wikipedia.org/wiki/Literate_programming">literate</a> sources of <i>webbieweb.org</i>. The code blocks here constitute the actual sources; therefore, this document is guaranteed to be up to date.
</p>
@@ -228,7 +228,7 @@ These are the <a href="https://en.wikipedia.org/wiki/Literate_programming">liter
<p>
This page is self-contained; the only dependency is <code>ox-publish</code>. The following directory structure is expected:
</p>
<pre class="example" id="orgf0a923d">
<pre class="example" id="orgd4d6320">
.
|-- html ;; Export destination; you can copy this dir to any static file host and host the website that way.
|-- org ;; Org-mode sources; these will get compiled and the output copied to html/.
@@ -246,14 +246,14 @@ This page is self-contained; the only dependency is <code>ox-publish</code>. The
</div>
</div>
</div>
<div id="outline-container-org9407fcd" class="outline-3">
<h3 id="org9407fcd">Export Commands</h3>
<div class="outline-text-3" id="text-org9407fcd">
<div id="outline-container-org22a61d2" class="outline-3">
<h3 id="org22a61d2">Export Commands</h3>
<div class="outline-text-3" id="text-org22a61d2">
<p>
Load this file up in Emacs and hit C-c C-c on the code block below to export changes to HTML.
</p>
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org1f0dc55">&lt;&lt;blog-scaffolding&gt;&gt;
<pre class="src src-emacs-lisp" id="org5129634">&lt;&lt;blog-scaffolding&gt;&gt;
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-babel-tangle</span><span class="org-rainbow-delimiters-depth-1">)</span>
</pre>
@@ -264,22 +264,22 @@ The one below will ignore caching; necessary in some situations, for instance: c
Currently the habit tracker table also gets erronously cached.
</p>
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org4178cd0">&lt;&lt;blog-scaffolding&gt;&gt;
<pre class="src src-emacs-lisp" id="orgf6f1b37">&lt;&lt;blog-scaffolding&gt;&gt;
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/force-publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-babel-tangle</span><span class="org-rainbow-delimiters-depth-1">)</span>
</pre>
</div>
</div>
</div>
<div id="outline-container-orge991f75" class="outline-3">
<h3 id="orge991f75">Elisp</h3>
<div class="outline-text-3" id="text-orge991f75">
<div id="outline-container-org783a4bc" class="outline-3">
<h3 id="org783a4bc">Elisp</h3>
<div class="outline-text-3" id="text-org783a4bc">
</div>
<div id="outline-container-org908fb57" class="outline-4">
<h4 id="org908fb57">Basic Settings/Scaffolding&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org908fb57">
<div id="outline-container-org8341ebe" class="outline-4">
<h4 id="org8341ebe">Basic Settings/Scaffolding&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org8341ebe">
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org83d2593"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">require</span> <span class="org-highlight-quoted-quote">'</span><span class="org-constant">ox-publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
<pre class="src src-emacs-lisp" id="orgad3a505"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">require</span> <span class="org-highlight-quoted-quote">'</span><span class="org-constant">ox-publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
&lt;&lt;no-sitemap&gt;&gt;
@@ -380,18 +380,18 @@ Currently the habit tracker table also gets erronously cached.
</div>
</div>
</div>
<div id="outline-container-orgc96a887" class="outline-3">
<h3 id="orgc96a887">Features</h3>
<div class="outline-text-3" id="text-orgc96a887">
<div id="outline-container-orgdae8d35" class="outline-3">
<h3 id="orgdae8d35">Features</h3>
<div class="outline-text-3" id="text-orgdae8d35">
</div>
<div id="outline-container-org6d32072" class="outline-4">
<h4 id="org6d32072">Sitemap&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org6d32072">
<div id="outline-container-orgaa2806b" class="outline-4">
<h4 id="orgaa2806b">Sitemap&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgaa2806b">
<p>
Files with <code>#+FILETAGS: :no-sitemap:</code> at the top will be excluded from <a href="./sitemap.html">the sitemap</a>. Every directory <code>dir/</code> will link to <code>dir/index.org</code>, with <code>index.org</code> being removed as a child entry.
</p>
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org802d6ae"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/sitemap-format-entry</span>
<pre class="src src-emacs-lisp" id="org9ed19c0"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/sitemap-format-entry</span>
<span class="org-rainbow-delimiters-depth-2">(</span>entry style project<span class="org-rainbow-delimiters-depth-2">)</span>
<span class="org-comment-delimiter">;; </span><span class="org-comment">Blank out entries with :no_sitemap:</span>
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>tags <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-publish-find-property</span> entry <span class="org-builtin">:filetags</span> project<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
@@ -426,9 +426,9 @@ Files with <code>#+FILETAGS: :no-sitemap:</code> at the top will be excluded fro
</div>
</div>
</div>
<div id="outline-container-orgc425f58" class="outline-4">
<h4 id="orgc425f58">Tag-based Section Control&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgc425f58">
<div id="outline-container-orgb026ee9" class="outline-4">
<h4 id="orgb026ee9">Tag-based Section Control&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgb026ee9">
<p>
Org-mode headers support tags:
</p>
@@ -466,9 +466,9 @@ We will hide the tags themselves:
</div>
</div>
</div>
<div id="outline-container-org399cce5" class="outline-4">
<h4 id="org399cce5">Header Styling Tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org399cce5">
<div id="outline-container-org1172fcb" class="outline-4">
<h4 id="org1172fcb">Header Styling Tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org1172fcb">
<p>
Tags for granular styling. This page has <code>:h4left:h5left:h3underline:</code> at the top level.
</p>
@@ -488,16 +488,16 @@ Tags for granular styling. This page has <code>:h4left:h5left:h3underline:</code
</div>
</div>
</div>
<div id="outline-container-orgb9cc34d" class="outline-4">
<h4 id="orgb9cc34d">Journal&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgb9cc34d">
<div id="outline-container-org95b9821" class="outline-4">
<h4 id="org95b9821">Journal&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org95b9821">
<p>
Here&rsquo;s a template for the journal files, as reference for what follows:
</p>
</div>
<div id="outline-container-orgb9fba9e" class="outline-5">
<h5 id="orgb9fba9e">Template&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-orgb9fba9e">
<div id="outline-container-org8f5b2f9" class="outline-5">
<h5 id="org8f5b2f9">Template&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org8f5b2f9">
<div class="org-src-container">
<pre class="src src-org"><span class="org-org-meta-line">#+FILETAGS: :no_sitemap:</span>
<span class="org-org-meta-line">#+TODO: NO(n) | YES(y) EXCELLENT(e) FREED(f)</span>
@@ -548,9 +548,9 @@ Here&rsquo;s a template for the journal files, as reference for what follows:
</div>
</div>
</div>
<div id="outline-container-org49704e7" class="outline-5">
<h5 id="org49704e7">Styling</h5>
<div class="outline-text-5" id="text-org49704e7">
<div id="outline-container-org2893243" class="outline-5">
<h5 id="org2893243">Styling</h5>
<div class="outline-text-5" id="text-org2893243">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-property">div</span>:has(h3 .tag .journal) {
<span class="org-css-property">border</span>: none;
@@ -583,18 +583,18 @@ Here&rsquo;s a template for the journal files, as reference for what follows:
</div>
</div>
</div>
<div id="outline-container-org7bf8a77" class="outline-4">
<h4 id="org7bf8a77">Habit Tracker&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7bf8a77">
<div id="outline-container-org2c77c83" class="outline-4">
<h4 id="org2c77c83">Habit Tracker&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org2c77c83">
<p>
Implements the habit tracking table on the <a href="./index.html">front page</a>. Habits are extracted from journal entries and rendered into a table, including a &ldquo;streak&rdquo; heatmap and the ability to click cells to see the corresponding entry.
</p>
</div>
<div id="outline-container-org4c87529" class="outline-5">
<h5 id="org4c87529">Elisp&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org4c87529">
<div id="outline-container-orgd5db4c5" class="outline-5">
<h5 id="orgd5db4c5">Elisp&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-orgd5db4c5">
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org21c2e83"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/org-to-html</span> <span class="org-rainbow-delimiters-depth-2">(</span>org-string<span class="org-rainbow-delimiters-depth-2">)</span>
<pre class="src src-emacs-lisp" id="org69a7bb8"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/org-to-html</span> <span class="org-rainbow-delimiters-depth-2">(</span>org-string<span class="org-rainbow-delimiters-depth-2">)</span>
<span class="org-doc">"Convert ORG-STRING to HTML."</span>
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">with-temp-buffer</span>
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">insert</span> org-string<span class="org-rainbow-delimiters-depth-3">)</span>
@@ -790,9 +790,9 @@ Implements the habit tracking table on the <a href="./index.html">front page</a>
</div>
</div>
</div>
<div id="outline-container-orgdea9629" class="outline-5">
<h5 id="orgdea9629">Expansion Section&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-orgdea9629">
<div id="outline-container-orgf327ccb" class="outline-5">
<h5 id="orgf327ccb">Expansion Section&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-orgf327ccb">
<p>
A bit of JS for enabling the expanding of entries.
</p>
@@ -834,9 +834,9 @@ A bit of JS for enabling the expanding of entries.
</div>
</div>
</div>
<div id="outline-container-org48af49a" class="outline-5">
<h5 id="org48af49a">CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org48af49a">
<div id="outline-container-org0e5c813" class="outline-5">
<h5 id="org0e5c813">CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org0e5c813">
<p>
Color habit entries based on their completion status:
</p>
@@ -912,9 +912,9 @@ Style the cells, set legible text color, outline clickable:
</div>
</div>
</div>
<div id="outline-container-org5733d9b" class="outline-4">
<h4 id="org5733d9b">Header Collapsing&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org5733d9b">
<div id="outline-container-org1f66c64" class="outline-4">
<h4 id="org1f66c64">Header Collapsing&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org1f66c64">
<p>
Sections can be expanded and collapsed by clicking on their headers; this will assign <code>.orgjq-expanded</code> and <code>.orgjq-contracted</code> CSS classes as appropriate. Headers with the <code>:autocollapse:</code> tag will be collapsed by default (like this section).
</p>
@@ -1033,9 +1033,9 @@ Sections can be expanded and collapsed by clicking on their headers; this will a
</div>
</div>
</div>
<div id="outline-container-org89e79b9" class="outline-4">
<h4 id="org89e79b9">Hover Notes&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org89e79b9">
<div id="outline-container-org8231618" class="outline-4">
<h4 id="org8231618">Hover Notes&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org8231618">
<p>
Turns org-mode footnotes (<code>[fn::Like this]</code>) into hover-notes<sup><a id="fnr.1" class="footref" href="#fn.1" role="doc-backlink">1</a></sup>.
</p>
@@ -1107,18 +1107,120 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org80a91d4" class="outline-4">
<h4 id="org80a91d4">Colored Table Rows&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org80a91d4">
<p>
By adding some invisible helper elements like so:
</p>
<div class="org-src-container">
<pre class="src src-org"><span class="org-org-meta-line">#+MACRO: c @@html: &lt;span class="row-color-$1" /&gt;@@</span>
<span class="org-org-table">| Cool colors: |</span>
<span class="org-org-table">|-------------------------|</span>
<span class="org-org-table">| Red </span><span class="org-org-table"><span class="org-org-macro">{{{c(red4)}}}</span></span><span class="org-org-table"> |</span>
<span class="org-org-table">|-------------------------|</span>
<span class="org-org-table">| Green </span><span class="org-org-table"><span class="org-org-macro">{{{c(green4)}}}</span></span><span class="org-org-table"> |</span>
<span class="org-org-table">|-------------------------|</span>
<span class="org-org-table">| Blue </span><span class="org-org-table"><span class="org-org-macro">{{{c(blue4)}}}</span></span><span class="org-org-table"> |</span>
<span class="org-org-table">|-------------------------|</span>
<span class="org-org-table">| Purple </span><span class="org-org-table"><span class="org-org-macro">{{{c(purple4)}}}</span></span><span class="org-org-table"> |</span>
<span class="org-org-table">|-------------------------|</span>
<span class="org-org-table">| Grey </span><span class="org-org-table"><span class="org-org-macro">{{{c(grey4)}}}</span></span><span class="org-org-table"> |</span>
<span class="org-org-table">|-------------------------|</span>
</pre>
</div>
<div id="outline-container-org4353653" class="outline-3">
<h3 id="org4353653">Appearance</h3>
<div class="outline-text-3" id="text-org4353653">
<p>
We can color table rows like so:
</p>
<table>
<colgroup>
<col class="org-left">
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">Cool colors:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">Red <span class="row-color-red4" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="org-left">Green <span class="row-color-green4" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="org-left">Blue <span class="row-color-blue4" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="org-left">Purple <span class="row-color-purple4" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="org-left">Grey <span class="row-color-grey4" /></td>
</tr>
</tbody>
</table>
</div>
<div id="outline-container-org146f295" class="outline-4">
<h4 id="org146f295">Global&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org146f295">
<div id="outline-container-org51507aa" class="outline-5">
<h5 id="org51507aa">CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org51507aa">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-property">tbody</span>:has(.row-color-green1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green1</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-green2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green2</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-green3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green3</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-green4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green4</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-green5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green5</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-red1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red1</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-red2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red2</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-red3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red3</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-red4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red4</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-red5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red5</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-blue1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue1</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-blue2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue2</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-blue3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue3</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-blue4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue4</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-blue5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue5</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-purple1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple1</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-purple2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple2</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-purple3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple3</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-purple4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple4</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-purple5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple5</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-grey1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey1</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-grey2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey2</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-grey3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey3</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-grey4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey4</span>); }
<span class="org-css-property">tbody</span>:has(.row-color-grey5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey5</span>); }
</pre>
</div>
<div id="outline-container-orged1880e" class="outline-5">
<h5 id="orged1880e">Variables</h5>
<div class="outline-text-5" id="text-orged1880e">
</div>
</div>
</div>
</div>
<div id="outline-container-org7b63abf" class="outline-3">
<h3 id="org7b63abf">Appearance</h3>
<div class="outline-text-3" id="text-org7b63abf">
</div>
<div id="outline-container-org44aecda" class="outline-4">
<h4 id="org44aecda">Global&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org44aecda">
</div>
<div id="outline-container-orgd010c85" class="outline-5">
<h5 id="orgd010c85">Variables</h5>
<div class="outline-text-5" id="text-orgd010c85">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">:root</span> {
<span class="org-variable-name">--site-width</span>: 1000px;
@@ -1134,9 +1236,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org04dddd6" class="outline-5">
<h5 id="org04dddd6">Color Variables</h5>
<div class="outline-text-5" id="text-org04dddd6">
<div id="outline-container-orgcb43503" class="outline-5">
<h5 id="orgcb43503">Color Variables</h5>
<div class="outline-text-5" id="text-orgcb43503">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">:root</span> {
<span class="org-variable-name">--green1</span>: <span class="custom-28">#123218</span>;
@@ -1180,9 +1282,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org44cb469" class="outline-5">
<h5 id="org44cb469">Background image</h5>
<div class="outline-text-5" id="text-org44cb469">
<div id="outline-container-orga467912" class="outline-5">
<h5 id="orga467912">Background image</h5>
<div class="outline-text-5" id="text-orga467912">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">body::before,</span>
<span class="org-css-selector">body::after</span> {
@@ -1217,8 +1319,8 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
<ul class="org-ul">
<li><a id="org716e8da"></a><span class="todo TODO">TODO</span> This is a weird approach and has some issues<br>
<div class="outline-text-6" id="text-org716e8da">
<li><a id="orgc5c1c55"></a><span class="todo TODO">TODO</span> This is a weird approach and has some issues<br>
<div class="outline-text-6" id="text-orgc5c1c55">
<ul class="org-ul">
<li>White line in center in some setups</li>
<li>Crunchy lines depending on DPI</li>
@@ -1227,9 +1329,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</li>
</ul>
</div>
<div id="outline-container-org4f77fb7" class="outline-5">
<h5 id="org4f77fb7">Fonts</h5>
<div class="outline-text-5" id="text-org4f77fb7">
<div id="outline-container-orga89beb3" class="outline-5">
<h5 id="orga89beb3">Fonts</h5>
<div class="outline-text-5" id="text-orga89beb3">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">body</span> {
<span class="org-css-property">font-family</span>: var(<span class="org-variable-name">--font-family</span>);
@@ -1242,9 +1344,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-orgb51d0e5" class="outline-5">
<h5 id="orgb51d0e5">Header/Content/Footer blocks</h5>
<div class="outline-text-5" id="text-orgb51d0e5">
<div id="outline-container-org9bea854" class="outline-5">
<h5 id="org9bea854">Header/Content/Footer blocks</h5>
<div class="outline-text-5" id="text-org9bea854">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">#content, #header, #footer</span> {
<span class="org-css-property">min-width</span>: 500px;
@@ -1307,13 +1409,13 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org388eb59" class="outline-4">
<h4 id="org388eb59">Colors&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org388eb59">
<div id="outline-container-org5366bf4" class="outline-4">
<h4 id="org5366bf4">Colors&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org5366bf4">
</div>
<div id="outline-container-orgfd2f2b5" class="outline-5">
<h5 id="orgfd2f2b5">Color Assignments</h5>
<div class="outline-text-5" id="text-orgfd2f2b5">
<div id="outline-container-orgf77bacd" class="outline-5">
<h5 id="orgf77bacd">Color Assignments</h5>
<div class="outline-text-5" id="text-orgf77bacd">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">body</span> {
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--</span><span class="custom"><span class="custom-1">black</span></span>);
@@ -1324,9 +1426,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org92880b9" class="outline-5">
<h5 id="org92880b9">Syntax Highlighting</h5>
<div class="outline-text-5" id="text-org92880b9">
<div id="outline-container-orgcdacd2d" class="outline-5">
<h5 id="orgcdacd2d">Syntax Highlighting</h5>
<div class="outline-text-5" id="text-orgcdacd2d">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">pre</span> {<span class="org-css-property">background-color</span>:var(<span class="org-variable-name">--grey1</span>); <span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);}
<span class="org-css-selector">pre span.org-builtin</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--blue4</span>);<span class="org-css-property">font-weight</span>:bold;}
@@ -1366,13 +1468,13 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-orgea8d5d5" class="outline-4">
<h4 id="orgea8d5d5">General CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgea8d5d5">
<div id="outline-container-org7eb1b15" class="outline-4">
<h4 id="org7eb1b15">General CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7eb1b15">
</div>
<div id="outline-container-org4f17ea5" class="outline-5">
<h5 id="org4f17ea5">Et Cetera</h5>
<div class="outline-text-5" id="text-org4f17ea5">
<div id="outline-container-orgb3fd92b" class="outline-5">
<h5 id="orgb3fd92b">Et Cetera</h5>
<div class="outline-text-5" id="text-orgb3fd92b">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">tbody</span> { <span class="org-css-property">border-bottom</span>: 1px dotted var(<span class="org-variable-name">--grey1</span>); }
<span class="org-css-selector">thead</span> { <span class="org-css-property">border-bottom</span>: 1px solid var(<span class="org-variable-name">--grey1</span>); }
@@ -1425,9 +1527,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-orgc4da837" class="outline-5">
<h5 id="orgc4da837">Utility Classes</h5>
<div class="outline-text-5" id="text-orgc4da837">
<div id="outline-container-org4648800" class="outline-5">
<h5 id="org4648800">Utility Classes</h5>
<div class="outline-text-5" id="text-org4648800">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">.center</span> {
<span class="org-css-property">display</span>: block;
@@ -1476,13 +1578,13 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-orgdce9e9b" class="outline-4">
<h4 id="orgdce9e9b">Elements&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgdce9e9b">
<div id="outline-container-org4fe8dcc" class="outline-4">
<h4 id="org4fe8dcc">Elements&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org4fe8dcc">
</div>
<div id="outline-container-org1592145" class="outline-5">
<h5 id="org1592145">Looking for Work</h5>
<div class="outline-text-5" id="text-org1592145">
<div id="outline-container-orgfaaec87" class="outline-5">
<h5 id="orgfaaec87">Looking for Work</h5>
<div class="outline-text-5" id="text-orgfaaec87">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">#looking-for-work</span> {
<span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red2</span>);
@@ -1502,9 +1604,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org2ecaa0c" class="outline-5">
<h5 id="org2ecaa0c">Code Blocks</h5>
<div class="outline-text-5" id="text-org2ecaa0c">
<div id="outline-container-org2b38558" class="outline-5">
<h5 id="org2b38558">Code Blocks</h5>
<div class="outline-text-5" id="text-org2b38558">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">.src, .example</span> {
<span class="org-css-property">font-family</span>: monospace;
@@ -1514,9 +1616,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org187a479" class="outline-5">
<h5 id="org187a479">Publish/modified Date</h5>
<div class="outline-text-5" id="text-org187a479">
<div id="outline-container-orgc149101" class="outline-5">
<h5 id="orgc149101">Publish/modified Date</h5>
<div class="outline-text-5" id="text-orgc149101">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">#publish-date, #modified-date</span> {
<span class="org-css-property">font-style</span>: italic;
@@ -1525,9 +1627,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org95a0e66" class="outline-5">
<h5 id="org95a0e66">Table of Contents</h5>
<div class="outline-text-5" id="text-org95a0e66">
<div id="outline-container-org7c83709" class="outline-5">
<h5 id="org7c83709">Table of Contents</h5>
<div class="outline-text-5" id="text-org7c83709">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">#table-of-contents</span> {
<span class="org-css-property">z-index</span>: <span class="org-highlight-numbers-number">1</span>;
@@ -1578,9 +1680,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org37e073c" class="outline-5">
<h5 id="org37e073c">To-Dos</h5>
<div class="outline-text-5" id="text-org37e073c">
<div id="outline-container-orgda8e124" class="outline-5">
<h5 id="orgda8e124">To-Dos</h5>
<div class="outline-text-5" id="text-orgda8e124">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">.TODO</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--red3</span>); }
<span class="org-css-selector">.DONE</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--green3</span>); }
@@ -1589,9 +1691,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org7fb4b3e" class="outline-4">
<h4 id="org7fb4b3e">No unstyled content&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7fb4b3e">
<div id="outline-container-org7ab3fc0" class="outline-4">
<h4 id="org7ab3fc0">No unstyled content&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7ab3fc0">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">html</span> {
<span class="org-css-property">visibility</span>: visible;
@@ -1613,7 +1715,7 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div></div>
<div id="postamble" class="status">
<div id='footer'><div id='modified-date'>Last modified: 2025-11-27</div><hr>
<div id='footer'><div id='modified-date'>Last modified: 2025-11-28</div><hr>
If you have any comments about this page, you can email me at: <br>
<b>akk0</b> <i>{at}</i> <b>webbieweb</b> <i>{dot}</i> <b>org</b><br>
Proudly built using <a href="/source.html">org-mode</a>. <br>