cmc/cleberg.net

My personal web garden & blog. blog personal website https://cleberg.net

Commit f12304e4b7

f12304e4b77e6fbca44c5b2c59248bdc259629e5

parent: e3d69f7842

Unsigned ci/build: success ci/lint: success

cmc <hello@cleberg.net> · 2026-10-21 06:09 UTC 

Org buffer theme (!6)

Restyles the site after org source: monospace, heading stars, `#+title`, timestamp brackets, `:tag:` lists, shaded `#+begin_src`/`#+begin_quote`/`#+begin_seealso` blocks, detour block as a property drawer.

`base.html` now prints post tags as `:a:b:` with `class="tags"`.

Layout: unified · split

content/templates/base.html +1 −1
@@ -75,7 +75,7 @@
75<p><time datetime="{{ page.date_iso }}">{{ page.date_iso }}</time>{% if page.excerpt %} &middot; {{ page.excerpt }}{% endif %}</p> 75<p><time datetime="{{ page.date_iso }}">{{ page.date_iso }}</time>{% if page.excerpt %} &middot; {{ page.excerpt }}{% endif %}</p>
76{%- endif %} 76{%- endif %}
77{%- if page.tags %} 77{%- if page.tags %}
78<p>{% for tag in page.tags %}<a href="{{ root }}tags/{{ tag }}.html">#{{ tag }}</a> {% endfor %}</p> 78<p class="tags">:{% for tag in page.tags %}<a href="{{ root }}tags/{{ tag }}.html">{{ tag }}</a>:{% endfor %}</p>
79{%- endif %} 79{%- endif %}
80{#- Blog posts add a reply footer inside this block; see post.html, which the 80{#- Blog posts add a reply footer inside this block; see post.html, which the
81 [[pages]] rule in orgo.toml selects for everything under blog/. #} 81 [[pages]] rule in orgo.toml selects for everything under blog/. #}
theme/static/styles.css +59 −22
@@ -1,40 +1,77 @@
1body { max-width: 800px; margin: 0 auto; padding: 1rem; } 1:root {
2a, a:visited { color: #0000ff; } 2 --bg: #fbfaf6; --fg: #2b2b2b; --muted: #77746d; --link: #2a5db0; --rule: #e2ded3;
3nav ul { list-style: none; padding: 0; display: flex; flex-direction: row; } 3 --h1: #6a3a99; --h2: #2e6b3c; --h3: #8a4b00; --tag: #9b5a00; --block: #f0ede4;
4nav ul li { padding-right: 0.5rem;} 4 --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
5}
6body { max-width: 800px; margin: 0 auto; padding: 1rem; background-color: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; }
7h1, h2, h3, h4 { font-size: 1em; font-weight: bold; margin: 1.5rem 0 0.75rem; }
8h1 { color: var(--fg); }
9h1::before { content: "#+title: "; color: var(--muted); font-weight: normal; }
10h2 { color: var(--h1); }
11h2::before { content: "* "; }
12h3 { color: var(--h2); }
13h3::before { content: "** "; }
14h4 { color: var(--h3); }
15h4::before { content: "*** "; }
16a, a:visited { color: var(--link); text-underline-offset: 2px; }
17nav ul { list-style: none; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; }
18nav ul li { padding-right: 1ch; }
19nav ul li::after { content: " |"; color: var(--muted); }
20nav ul li:last-child::after { content: ""; }
21ul { padding-left: 2ch; }
22ul > li { list-style: none; }
23ul > li::before { content: "- "; margin-left: -2ch; color: var(--muted); }
24nav li::before, .post-list li::before, .detour-list li::before { content: none; }
5img { max-width: 100%; } 25img { max-width: 100%; }
26time { color: var(--muted); white-space: nowrap; }
27time::before { content: "<"; }
28time::after { content: ">"; }
29.tags, .tags a, .tags a:visited { color: var(--tag); text-decoration: none; }
6.post-list { padding: 0; padding-inline-start: 0; } 30.post-list { padding: 0; padding-inline-start: 0; }
7.post-list-item { display: flex; list-style: none; align-items: baseline; } 31.post-list-item { display: flex; list-style: none; align-items: baseline; gap: 1ch; }
8.post-list-item time { padding-right: 0.5rem; white-space: nowrap; }
9.post-list-item a { flex-grow: 1; white-space: normal; } 32.post-list-item a { flex-grow: 1; white-space: normal; }
10.post-list-year { list-style: none; margin-top: 1rem; margin-bottom: 0.5rem; font-weight: bold; } 33.post-list-year { list-style: none; margin-top: 1rem; margin-bottom: 0.5rem; font-weight: bold; color: var(--h1); }
34.post-list-year::before { content: "* "; }
11.skip-link { display: none; } 35.skip-link { display: none; }
12table { border-collapse: collapse; } 36table { border-collapse: collapse; }
13table, th, td { border: 1px solid #ccc; } 37table, th, td { border: 1px solid var(--rule); }
14th, td { padding: 0.25rem 0.5rem; text-align: left; } 38th, td { padding: 0.25rem 0.5rem; text-align: left; }
15footer { margin: 2rem 0;} 39footer { margin: 2rem 0; color: var(--muted); }
16pre, blockquote { margin: 1rem 0; padding: 0.5rem; background-color: #eee; } 40pre, blockquote { margin: 1rem 0; padding: 0.5rem 1ch 0.5rem 3ch; }
41pre, blockquote, .detour, .seealso { background-color: var(--block); }
17pre { overflow: auto; white-space: pre; } 42pre { overflow: auto; white-space: pre; }
43pre::before { content: "#+begin_src"; display: block; margin-left: -2ch; color: var(--muted); }
44pre::after { content: "#+end_src"; display: block; margin-left: -2ch; color: var(--muted); }
45blockquote::before { content: "#+begin_quote"; display: block; margin-left: -2ch; color: var(--muted); }
46blockquote::after { content: "#+end_quote"; display: block; margin-left: -2ch; color: var(--muted); }
18blockquote p { margin: 0; margin-bottom: 1rem; } 47blockquote p { margin: 0; margin-bottom: 1rem; }
19blockquote p:last-child { margin-bottom: 0; } 48blockquote p:last-child { margin-bottom: 0; }
20code { color: #942192; } 49code { color: var(--tag); }
21/* The metadata block on a detour post. currentColor for the rule, so the dark scheme 50figcaption { color: var(--muted); }
22 below needs no override. */ 51/* The metadata block on a detour post, shown as a property drawer. */
23.detour { border-left: 3px solid currentColor; padding: .5rem 1rem; margin: 1rem 0 2rem; font-size: .95em; } 52.detour { margin: 1rem 0 2rem; padding: 0.5rem 1ch; }
53.detour::before { content: ":PROPERTIES:"; color: var(--muted); }
54.detour::after { content: ":END:"; color: var(--muted); }
24.detour dl { margin: 0; } 55.detour dl { margin: 0; }
25.detour dt { font-weight: bold; } 56.detour dt { display: inline; color: var(--tag); }
26.detour dd { margin: 0 0 .4rem 0; } 57.detour dt::before, .detour dt::after { content: ":"; }
58.detour dd { display: inline; margin: 0 0 0 1ch; }
59.detour dd::after { content: ""; display: block; }
27.detour-list { padding-inline-start: 0; } 60.detour-list { padding-inline-start: 0; }
28.detour-list li { list-style: none; margin-bottom: .75rem; } 61.detour-list li { list-style: none; margin-bottom: .75rem; }
29.detour-meta { display: block; font-size: .95em; } 62.detour-meta { display: block; color: var(--muted); }
63/* #+begin_seealso: a line of related links under a section. */
64.seealso { margin: 1rem 0; padding: 0.5rem 1ch; }
65.seealso::before { content: "#+begin_seealso"; display: block; color: var(--muted); }
66.seealso::after { content: "#+end_seealso"; display: block; color: var(--muted); }
67.seealso p { margin: 0 0 0 2ch; }
30/* Blocks are coloured by syntax.css, so this is only the fallback for the tokens it 68/* Blocks are coloured by syntax.css, so this is only the fallback for the tokens it
31 leaves unclassified: the highlight theme's own foreground rather than inline code's. */ 69 leaves unclassified: the highlight theme's own foreground rather than inline code's. */
32pre code { color: #323232; } 70pre code { color: #323232; }
33@media (prefers-color-scheme: dark) { 71@media (prefers-color-scheme: dark) {
34 body { background-color: #181a1b; color: #cccccc; } 72 :root {
35 a, a:visited { color: #68A9F8; } 73 --bg: #0b0c0e; --fg: #d6d6d0; --muted: #8a8b90; --link: #7fb0f0; --rule: #2a2b30;
36 code { color: #ff68e1; } 74 --h1: #c79bf2; --h2: #8fcf9a; --h3: #f0c27a; --tag: #e0a85a; --block: #17181c;
37 pre, blockquote { background-color: #000; } 75 }
38 pre code { color: #c0c5ce; } 76 pre code { color: #c0c5ce; }
39 table, th, td { border-color: #444; }
40} 77}