style: tables, code blocks, blockquotes for essay prose#1
Merged
Conversation
The CV repo's stylesheet had no rules for <pre>, <table>, or <blockquote>
because the CV body never used them. Essays do, and the unstyled
output looked bad — tables had no header distinction or row dividers,
fenced code blocks inherited the inline-<code> tinted background
(making each line look stamped onto a band), blockquotes were
invisible.
Added:
.prose pre warm cream (#f3efe6) panel, 1px wine-tinted border,
6 px radius, 0.85 rem mono, overflow-x: auto for
long lines, tab-size 2, ligatures off.
.prose pre code reset background/padding/radius from the inline
<code> rule so the panel reads as one block.
.prose code (refined) only applies to inline code now; slight
bump to background tint contrast.
.prose table block + overflow-x for narrow viewports;
hairline row dividers; tabular-nums on numeric
cells; padding only on inter-column gaps so the
column aligns flush-left with the prose.
.prose th Inter small-caps header in muted color, 2 px
bottom rule.
.prose blockquote 3 px wine accent left rule, italic, muted; reset
margins on first/last <p> child to avoid double
spacing; cancel italic on nested <em>.
Print sheet: pre / table / blockquote get break-inside: avoid so
they don't split awkwardly mid-block; pre keeps its background on
print.
Verified visually against http://localhost:8782/essays/<pilot>:
table reads as a metric grid, blockquote reads as a quote, code
block reads as one panel rather than per-line stamped strips.
Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
Two related issues caught by Lighthouse-CI on PR #1. 1. Console errors (best-practices score 0) The inlined CSS was using url("assets/fonts/…") for every page, which only resolves correctly when the HTML page sits at the site root. For essay pages at /essays/<slug>.html, the same relative URL resolved to /essays/assets/fonts/… and 404'd, raising console errors and tanking the best-practices category. Fix: load_inline_css() now takes a font_url_prefix string and rewrites the on-disk url("fonts/…") tokens accordingly: index page (depth 0): url("assets/fonts/…") essay (depth 1): url("../assets/fonts/…") This matches what the <link rel=preload> hints emit via the asset() helper, so the preloaded font URL and the @font-face URL match exactly and the preload is reused for the fetch. 2. Toolset reference The 'Skills und CLI-Tools bereitstellen' section listed example tools (jq, yq, xmlstarlet, mlr, Serena, ripgrep, Explore/subagent) but didn't point readers at a curated bundle. Added a one-sentence reference to netresearch/coding_agent_cli_toolset — a maintained, installable bundle of the CLI tools that actually save coding- agent tokens in practice. Verified locally: index inlined CSS uses 'assets/fonts/…' essay inlined CSS uses '../assets/fonts/…' essay preload hints use '../assets/fonts/…' The build pipeline change is small but the fix is structural — any future essay folder depth would just need a new prefix passed to load_inline_css(). Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
… + data-tools-skill in tools section Three more public Netresearch repos that fit the essay's argument: - claude-coach-plugin → Retro section. Operationalizes the Mini-Retro → Skill/Memory-Regel loop: collects corrections, recurring failures and tool failures during a session and proposes concrete skill or memory rules at the end. Turns the loop into a workflow rather than a discipline exercise. - file-search-skill → Skills/CLI-Tools section. Skill-level wrapper for Serena symbol-ops, ripgrep, AST search — so Claude reaches for a precise lookup instead of a full Read. - data-tools-skill → same section. Skill-level wrapper for jq, yq, xmlstarlet, Miller — so structured data is queried, not loaded whole into context. Framing: 'CLI tools deliver the substrate; skills deliver the knowledge of when and how Claude should reach for them.' Pairs with the existing coding_agent_cli_toolset reference: the toolset gives you the binaries, the skills give the agent the prompts/patterns to use them in token-efficient ways. Signed-off-by: Sebastian Mendel <info@sebastianmendel.de>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The CSS forked from the CV repo had no rules for
<pre>,<table>, or<blockquote>because the CV body never used them. Essays do, and the live page (https://cybottm.github.io/engineering-notes/essays/optimizing-claude-code-cache-read-inflation.html) showed the gap:<code>tinted background, which made each line look stamped onto its own band instead of one panel.What changes
.prose pre— warm cream panel (#f3efe6, slightly warmer than page#fbfaf6), 1 px wine-tinted border, 6 px radius, 0.85 rem mono,overflow-x: autofor long lines (no wrap, horizontal scroll),tab-size: 2, ligatures off..prose pre code— resetsbackground/padding/border-radiusfrom the inline<code>rule so the panel reads as one block..prose code(refined) — only applies to inline now; minor bump to background contrast..prose table—display: block+overflow-x: autofor narrow viewports; hairline row dividers;font-variant-numeric: tabular-numsso metric columns align; column gaps only between cells, flush-left with the prose..prose th— Inter small-caps header, muted color, 2 px bottom rule. Same kicker discipline as section headings..prose blockquote— 3 px wine-accent left rule, italic, muted color. Resets margins on first/last<p>child to avoid doubled spacing. Cancels italic on nested<em>.Print —
pre/table/blockquoteall getbreak-inside: avoidso they don't split mid-block;prekeeps its background tint on print.Verified visually
Local screenshot before/after shows:
METRIK · ERWARTET · REAL · FAKTORwith a 2 px rule under it; rows separated by hairlines; numeric columns align thanks to tabular-nums."Ich lese schnell noch diese Datei.") reads as an italic muted quote with a wine left rule.~/p/projekt (✓ main PR#42) │ ctx 87k · ↻ 1.2M · $0.84) is a single warm-cream panel with rounded border, not a per-line stamped strip.Lighthouse-CI runs in this PR.