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

Update journal and index.org

Browse Source
This commit is contained in:
Akko
2025-11-20 16:51:58 +01:00
parent cec99cbdac
commit d56c60c514
51 changed files with 1241 additions and 1208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
html/source.html
View File

@@ -210,13 +210,13 @@
</div>
</div>
<div id="content" class="content">
<div id="outline-container-orgdfa669b" class="outline-2">
<h2 id="orgdfa669b">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-orgdfa669b">
<div id="outline-container-org8e6e659" class="outline-2">
<h2 id="org8e6e659">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-org8e6e659">
</div>
<div id="outline-container-org1d7d020" class="outline-3">
<h3 id="org1d7d020">Introduction</h3>
<div class="outline-text-3" id="text-org1d7d020">
<div id="outline-container-org97d5ceb" class="outline-3">
<h3 id="org97d5ceb">Introduction</h3>
<div class="outline-text-3" id="text-org97d5ceb">
<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>
@@ -224,7 +224,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="org68b1276">
<pre class="example" id="orgd53556b">
.
|-- 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/.
@@ -242,14 +242,14 @@ This page is self-contained; the only dependency is <code>ox-publish</code>. The
</div>
</div>
</div>
<div id="outline-container-org28fd6a0" class="outline-3">
<h3 id="org28fd6a0">Export Commands</h3>
<div class="outline-text-3" id="text-org28fd6a0">
<div id="outline-container-orge19349c" class="outline-3">
<h3 id="orge19349c">Export Commands</h3>
<div class="outline-text-3" id="text-orge19349c">
<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="org36d53f1">&lt;&lt;blog-scaffolding&gt;&gt;
<pre class="src src-emacs-lisp" id="orgf815fd1">&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>
@@ -259,22 +259,22 @@ Load this file up in Emacs and hit C-c C-c on the code block below to export cha
The one below will ignore caching; necessary in some situations, for instance: changes under <code>util/</code>.
</p>
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org2385e89">&lt;&lt;blog-scaffolding&gt;&gt;
<pre class="src src-emacs-lisp" id="org269586b">&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-orge715f6a" class="outline-3">
<h3 id="orge715f6a">Elisp</h3>
<div class="outline-text-3" id="text-orge715f6a">
<div id="outline-container-org001fb87" class="outline-3">
<h3 id="org001fb87">Elisp</h3>
<div class="outline-text-3" id="text-org001fb87">
</div>
<div id="outline-container-org284ac5a" class="outline-4">
<h4 id="org284ac5a">Basic Settings/Scaffolding&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org284ac5a">
<div id="outline-container-orgaac9ef1" class="outline-4">
<h4 id="orgaac9ef1">Basic Settings/Scaffolding&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgaac9ef1">
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="org46005b9"><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="orgcca8bcc"><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;
@@ -375,18 +375,18 @@ The one below will ignore caching; necessary in some situations, for instance: c
</div>
</div>
</div>
<div id="outline-container-org57ece72" class="outline-3">
<h3 id="org57ece72">Features</h3>
<div class="outline-text-3" id="text-org57ece72">
<div id="outline-container-orga2edba8" class="outline-3">
<h3 id="orga2edba8">Features</h3>
<div class="outline-text-3" id="text-orga2edba8">
</div>
<div id="outline-container-orgd7213ca" class="outline-4">
<h4 id="orgd7213ca">Sitemap&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgd7213ca">
<div id="outline-container-org500050d" class="outline-4">
<h4 id="org500050d">Sitemap&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org500050d">
<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="org97d7ab1"><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="org3670aed"><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>
@@ -421,9 +421,9 @@ Files with <code>#+FILETAGS: :no-sitemap:</code> at the top will be excluded fro
</div>
</div>
</div>
<div id="outline-container-orgd1bdfde" class="outline-4">
<h4 id="orgd1bdfde">Tag-based Section Control&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgd1bdfde">
<div id="outline-container-orge35d054" class="outline-4">
<h4 id="orge35d054">Tag-based Section Control&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orge35d054">
<p>
Org-mode headers support tags:
</p>
@@ -461,9 +461,9 @@ We will hide the tags themselves:
</div>
</div>
</div>
<div id="outline-container-org02b0f20" class="outline-4">
<h4 id="org02b0f20">Header Styling Tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org02b0f20">
<div id="outline-container-org7a87543" class="outline-4">
<h4 id="org7a87543">Header Styling Tags&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7a87543">
<p>
Tags for granular styling. This page has <code>:h4left:h5left:h3underline:</code> at the top level.
</p>
@@ -483,16 +483,16 @@ Tags for granular styling. This page has <code>:h4left:h5left:h3underline:</code
</div>
</div>
</div>
<div id="outline-container-orgcf989e1" class="outline-4">
<h4 id="orgcf989e1">Journal&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgcf989e1">
<div id="outline-container-org4499e50" class="outline-4">
<h4 id="org4499e50">Journal&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org4499e50">
<p>
Here&rsquo;s a template for the journal files, as reference for what follows:
</p>
</div>
<div id="outline-container-org80091e3" class="outline-5">
<h5 id="org80091e3">Template&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org80091e3">
<div id="outline-container-org82d4814" class="outline-5">
<h5 id="org82d4814">Template&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org82d4814">
<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>
@@ -543,9 +543,9 @@ Here&rsquo;s a template for the journal files, as reference for what follows:
</div>
</div>
</div>
<div id="outline-container-orgb5dd19f" class="outline-5">
<h5 id="orgb5dd19f">Styling</h5>
<div class="outline-text-5" id="text-orgb5dd19f">
<div id="outline-container-orgbe2d965" class="outline-5">
<h5 id="orgbe2d965">Styling</h5>
<div class="outline-text-5" id="text-orgbe2d965">
<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;
@@ -578,18 +578,18 @@ Here&rsquo;s a template for the journal files, as reference for what follows:
</div>
</div>
</div>
<div id="outline-container-org5208366" class="outline-4">
<h4 id="org5208366">Habit Tracker&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org5208366">
<div id="outline-container-orgfd3e168" class="outline-4">
<h4 id="orgfd3e168">Habit Tracker&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgfd3e168">
<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-org3f155c0" class="outline-5">
<h5 id="org3f155c0">Elisp&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org3f155c0">
<div id="outline-container-org3bf2dae" class="outline-5">
<h5 id="org3bf2dae">Elisp&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org3bf2dae">
<div class="org-src-container">
<pre class="src src-emacs-lisp" id="orgb717ab5"><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="org9ab9b29"><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>
@@ -785,9 +785,9 @@ Implements the habit tracking table on the <a href="./index.html">front page</a>
</div>
</div>
</div>
<div id="outline-container-orgecf90e1" class="outline-5">
<h5 id="orgecf90e1">Expansion Section&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-orgecf90e1">
<div id="outline-container-orgaa7918c" class="outline-5">
<h5 id="orgaa7918c">Expansion Section&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-orgaa7918c">
<p>
A bit of JS for enabling the expanding of entries.
</p>
@@ -829,9 +829,9 @@ A bit of JS for enabling the expanding of entries.
</div>
</div>
</div>
<div id="outline-container-org780369a" class="outline-5">
<h5 id="org780369a">CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org780369a">
<div id="outline-container-org48af85d" class="outline-5">
<h5 id="org48af85d">CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
<div class="outline-text-5" id="text-org48af85d">
<p>
Color habit entries based on their completion status:
</p>
@@ -890,9 +890,9 @@ Style the cells, set legible text color, outline clickable:
</div>
</div>
</div>
<div id="outline-container-org6537fae" class="outline-4">
<h4 id="org6537fae">Header Collapsing&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org6537fae">
<div id="outline-container-org7cf6b19" class="outline-4">
<h4 id="org7cf6b19">Header Collapsing&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7cf6b19">
<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>
@@ -916,7 +916,9 @@ Sections can be expanded and collapsed by clicking on their headers; this will a
<span class="org-css-property">content</span>: <span class="org-string">'&#11166; '</span>;
}
.orgjq-expanded &gt; h4:has(.tag .autocollapse)::before {
.orgjq-expanded &gt; h3:has(.tag .autocollapse)::before,
.orgjq-expanded &gt; h4:has(.tag .autocollapse)::before,
.orgjq-expanded &gt; h5:has(.tag .autocollapse)::before {
<span class="org-css-property">content</span>: <span class="org-string">'&#11167; '</span>;
}
</pre>
@@ -1009,9 +1011,9 @@ Sections can be expanded and collapsed by clicking on their headers; this will a
</div>
</div>
</div>
<div id="outline-container-org19fbe40" class="outline-4">
<h4 id="org19fbe40">Hover Notes&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org19fbe40">
<div id="outline-container-orgf8cad55" class="outline-4">
<h4 id="orgf8cad55">Hover Notes&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgf8cad55">
<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>
@@ -1069,17 +1071,17 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org504da8a" class="outline-3">
<h3 id="org504da8a">Appearance</h3>
<div class="outline-text-3" id="text-org504da8a">
<div id="outline-container-org87a1a58" class="outline-3">
<h3 id="org87a1a58">Appearance</h3>
<div class="outline-text-3" id="text-org87a1a58">
</div>
<div id="outline-container-orgad8787d" class="outline-4">
<h4 id="orgad8787d">Global&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgad8787d">
<div id="outline-container-org28a2b8e" class="outline-4">
<h4 id="org28a2b8e">Global&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org28a2b8e">
</div>
<div id="outline-container-org27adaec" class="outline-5">
<h5 id="org27adaec">Variables</h5>
<div class="outline-text-5" id="text-org27adaec">
<div id="outline-container-org6badab6" class="outline-5">
<h5 id="org6badab6">Variables</h5>
<div class="outline-text-5" id="text-org6badab6">
<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;
@@ -1095,9 +1097,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org80a8d88" class="outline-5">
<h5 id="org80a8d88">Color Variables</h5>
<div class="outline-text-5" id="text-org80a8d88">
<div id="outline-container-org05a7ac1" class="outline-5">
<h5 id="org05a7ac1">Color Variables</h5>
<div class="outline-text-5" id="text-org05a7ac1">
<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>;
@@ -1141,9 +1143,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org55991c0" class="outline-5">
<h5 id="org55991c0">Background image</h5>
<div class="outline-text-5" id="text-org55991c0">
<div id="outline-container-org62a1636" class="outline-5">
<h5 id="org62a1636">Background image</h5>
<div class="outline-text-5" id="text-org62a1636">
<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> {
@@ -1178,8 +1180,8 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
<ul class="org-ul">
<li><a id="org29af348"></a><span class="todo TODO">TODO</span> This is a weird approach and has some issues<br>
<div class="outline-text-6" id="text-org29af348">
<li><a id="org5ee170d"></a><span class="todo TODO">TODO</span> This is a weird approach and has some issues<br>
<div class="outline-text-6" id="text-org5ee170d">
<ul class="org-ul">
<li>White line in center in some setups</li>
<li>Crunchy lines depending on DPI</li>
@@ -1188,9 +1190,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</li>
</ul>
</div>
<div id="outline-container-orgdf1357b" class="outline-5">
<h5 id="orgdf1357b">Fonts</h5>
<div class="outline-text-5" id="text-orgdf1357b">
<div id="outline-container-org34a30bc" class="outline-5">
<h5 id="org34a30bc">Fonts</h5>
<div class="outline-text-5" id="text-org34a30bc">
<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>);
@@ -1203,9 +1205,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org816952d" class="outline-5">
<h5 id="org816952d">Header/Content/Footer blocks</h5>
<div class="outline-text-5" id="text-org816952d">
<div id="outline-container-org813c977" class="outline-5">
<h5 id="org813c977">Header/Content/Footer blocks</h5>
<div class="outline-text-5" id="text-org813c977">
<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;
@@ -1268,13 +1270,13 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org1e576de" class="outline-4">
<h4 id="org1e576de">Colors&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org1e576de">
<div id="outline-container-org8fc1cd5" class="outline-4">
<h4 id="org8fc1cd5">Colors&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org8fc1cd5">
</div>
<div id="outline-container-org48390cd" class="outline-5">
<h5 id="org48390cd">Color Assignments</h5>
<div class="outline-text-5" id="text-org48390cd">
<div id="outline-container-org65e9b27" class="outline-5">
<h5 id="org65e9b27">Color Assignments</h5>
<div class="outline-text-5" id="text-org65e9b27">
<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>);
@@ -1285,9 +1287,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org847f952" class="outline-5">
<h5 id="org847f952">Syntax Highlighting</h5>
<div class="outline-text-5" id="text-org847f952">
<div id="outline-container-orgc6e8d18" class="outline-5">
<h5 id="orgc6e8d18">Syntax Highlighting</h5>
<div class="outline-text-5" id="text-orgc6e8d18">
<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;}
@@ -1327,13 +1329,13 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org5a74b42" class="outline-4">
<h4 id="org5a74b42">General CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org5a74b42">
<div id="outline-container-org9eb6820" class="outline-4">
<h4 id="org9eb6820">General CSS&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org9eb6820">
</div>
<div id="outline-container-org9282c73" class="outline-5">
<h5 id="org9282c73">Et Cetera</h5>
<div class="outline-text-5" id="text-org9282c73">
<div id="outline-container-orgd2125c6" class="outline-5">
<h5 id="orgd2125c6">Et Cetera</h5>
<div class="outline-text-5" id="text-orgd2125c6">
<div class="org-src-container">
<pre class="src src-css"><span class="org-css-selector">hr</span> {
<span class="org-css-property">border</span>: <span class="org-highlight-numbers-number">0</span>;
@@ -1378,9 +1380,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-orge7d546a" class="outline-5">
<h5 id="orge7d546a">Utility Classes</h5>
<div class="outline-text-5" id="text-orge7d546a">
<div id="outline-container-org24fc97d" class="outline-5">
<h5 id="org24fc97d">Utility Classes</h5>
<div class="outline-text-5" id="text-org24fc97d">
<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;
@@ -1429,13 +1431,13 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org7dd5e4e" class="outline-4">
<h4 id="org7dd5e4e">Elements&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-org7dd5e4e">
<div id="outline-container-orgbc0aa4a" class="outline-4">
<h4 id="orgbc0aa4a">Elements&#xa0;&#xa0;&#xa0;<span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
<div class="outline-text-4" id="text-orgbc0aa4a">
</div>
<div id="outline-container-orgd08f26c" class="outline-5">
<h5 id="orgd08f26c">Looking for Work</h5>
<div class="outline-text-5" id="text-orgd08f26c">
<div id="outline-container-orgc4187dd" class="outline-5">
<h5 id="orgc4187dd">Looking for Work</h5>
<div class="outline-text-5" id="text-orgc4187dd">
<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>);
@@ -1455,9 +1457,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-orga8f9890" class="outline-5">
<h5 id="orga8f9890">Code Blocks</h5>
<div class="outline-text-5" id="text-orga8f9890">
<div id="outline-container-orgf22d959" class="outline-5">
<h5 id="orgf22d959">Code Blocks</h5>
<div class="outline-text-5" id="text-orgf22d959">
<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>: <span class="org-string">"monospace"</span>;
@@ -1467,9 +1469,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org112c2c3" class="outline-5">
<h5 id="org112c2c3">Publish/modified Date</h5>
<div class="outline-text-5" id="text-org112c2c3">
<div id="outline-container-orgaaf18a1" class="outline-5">
<h5 id="orgaaf18a1">Publish/modified Date</h5>
<div class="outline-text-5" id="text-orgaaf18a1">
<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;
@@ -1478,9 +1480,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org1e06de6" class="outline-5">
<h5 id="org1e06de6">Table of Contents</h5>
<div class="outline-text-5" id="text-org1e06de6">
<div id="outline-container-org5f62ac2" class="outline-5">
<h5 id="org5f62ac2">Table of Contents</h5>
<div class="outline-text-5" id="text-org5f62ac2">
<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>;
@@ -1531,9 +1533,9 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
</div>
</div>
</div>
<div id="outline-container-org033df87" class="outline-5">
<h5 id="org033df87">To-Dos</h5>
<div class="outline-text-5" id="text-org033df87">
<div id="outline-container-orga63faf6" class="outline-5">
<h5 id="orga63faf6">To-Dos</h5>
<div class="outline-text-5" id="text-orga63faf6">
<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>); }
@@ -1557,7 +1559,7 @@ document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, en
<div id='footer'><div id='modified-date'>Last modified: 2025-11-20</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="/posts/blog-tech.html">org-mode</a>. <br>
Proudly built using <a href="/source.html">org-mode</a>. <br>
All code on this website is licensed <b>GPLv3</b> unless otherwise indicated. <br>
<br>
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//webbieweb.org/feed.xml"><img src="/static/images/badges/css.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a><br>