/* ================= blog-d.css — "Indexed" =================
publicspace.net blog — direction layer.
Newsreader on display, system sans for reading,
NiftyFileLists stone palette, Petrol accent.
Load AFTER blog-base.css. Requires, in :
— or the self-hosted @font-face equivalent under /fonts/,
which avoids the third-party DNS lookup. Latin subset,
woff2, is roughly 90–130 KB across the two faces.
========================================================== */
:root {
/* ---- type ---- */
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
--serif: "Newsreader", "Iowan Old Style", Georgia, serif;
--mono: "SF Mono", SFMono-Regular, Menlo, monospace;
/* ---- palette: NiftyFileLists stone ---- */
--bg: #FBFAF7;
--bg-alt: #F4F1EA;
--surface: #FFFFFF;
--border: #E5E0D5;
--border-light: #EDE9DF;
--ink: #1C1917; /* 15.9:1 on --bg */
--ink-soft: #55504A; /* 7.7:1 on --bg */
--ink-faint: #8C867D; /* 3.5:1 — decorative only, never body text */
/* ---- accent: Petrol, 6.1:1 on the #FBFAF7 ground ---- */
--link: #0F6B63;
--link-hover: #0B4F49;
--sel: rgba(15, 107, 99, 0.13);
--nav-bg: rgba(251, 250, 247, 0.82);
/* ---- measure ---- */
--shell: 780px; /* page column */
--measure: 640px; /* running text ≈ 66 characters at 18.5px */
--label-w: 76px; /* date / label gutter on the index */
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #151311;
--bg-alt: #1D1A16;
--surface: #1B1815;
--border: #332E27;
--border-light: #272320;
--ink: #EFEBE3;
--ink-soft: #B5AEA3;
--ink-faint: #877F74;
/* Petrol, 9.0:1 on the #151311 ground */
--link: #5FC4B8;
--link-hover: #8AD8CE;
--sel: rgba(95, 196, 184, 0.20);
--nav-bg: rgba(21, 19, 17, 0.82);
}
}
/* ---------------- display type ---------------- */
.blog-index-header h1,
.post-header h1,
.post-content h2,
.post-content h3 {
font-family: var(--serif);
font-weight: 430;
letter-spacing: -0.004em;
text-wrap: balance;
}
.blog-index-header h1 {
font-size: 46px;
line-height: 1.06;
font-variation-settings: "opsz" 60;
}
.blog-index-header p {
font-size: 19px;
color: var(--ink-soft);
}
/* ---------------- index rows ---------------- */
.post-date {
font-size: 11.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.post-link {
font-family: var(--serif);
font-size: 20.5px;
font-weight: 400;
font-variation-settings: "opsz" 20;
line-height: 1.32;
color: var(--ink);
}
.post-link:hover { color: var(--link); }
/* ---------------- article ---------------- */
.post-header h1 {
font-size: 42px;
line-height: 1.1;
font-variation-settings: "opsz" 54;
}
.post-meta {
font-size: 12.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-soft);
}
.post-content {
font-size: 18.5px;
line-height: 1.62;
color: var(--ink);
}
.post-content h2 { font-size: 30px; line-height: 1.18; font-variation-settings: "opsz" 36; }
.post-content h3 { font-size: 23px; line-height: 1.25; font-variation-settings: "opsz" 24; }
.post-content a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2.5px;
text-decoration-color: color-mix(in srgb, var(--link) 42%, transparent);
}
.post-content a:hover { text-decoration-color: currentColor; }
.post-content blockquote {
font-family: var(--serif);
font-size: 21px;
font-style: italic;
line-height: 1.45;
color: var(--ink-soft);
border-left: 2px solid var(--link);
padding: 2px 0 2px 22px;
margin: 2em 0;
}
.post-content thead th {
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-soft);
}
/* ---------------- navigation chrome ---------------- */
.nav-brand-name {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.012em;
}
.nav-brand-name a { color: var(--ink); }
.nav-brand-tagline {
font-size: 13px;
color: var(--ink-soft);
padding-left: 12px;
border-left: 1px solid var(--border);
}
.nav-links a { font-size: 14px; color: var(--ink-soft); }
/* ================ the two-tier index ================
Sections 1–4 of /blog/ are the evergreen guides
(Focused Work, File Management, Deutsch, français);
sections 5 and up are the dated archive.
The split is POSITIONAL. It is correct for today's four
guide sections; a fifth would silently land in the archive
tier. The durable fix is one attribute in the Jekyll loop —
and the same on
the — after which every :nth-of-type() selector below
becomes [data-kind="guides"] / [data-kind="archive"].
===================================================== */
/* ---- tier 1: evergreen guides, as cards ---- */
.blog-main > .blog-year:nth-of-type(-n+4) {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-soft);
border-bottom: none;
margin: 44px 0 14px;
padding-bottom: 0;
}
.blog-main > .post-list:nth-of-type(-n+4) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 10px;
}
.blog-main > .post-list:nth-of-type(-n+4) > li {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 15px 17px 17px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-alt);
transition: background 0.15s ease, border-color 0.15s ease;
}
.blog-main > .post-list:nth-of-type(-n+4) > li:hover {
background: var(--surface);
border-color: var(--ink-faint);
}
/* The Guide / Anleitung chip.
Treatment: CAPS (accent-coloured, no background).
Three alternatives are commented out below — swap one in. */
.blog-main > .post-list:nth-of-type(-n+4) .post-date {
flex: none;
align-self: flex-start;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.13em;
color: var(--link);
}
/* PILL — accent text on a tinted accent ground
.blog-main > .post-list:nth-of-type(-n+4) .post-date {
flex: none;
align-self: flex-start;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.11em;
color: var(--link);
background: var(--sel);
padding: 3px 8px;
border-radius: 4px;
}
*/
/* QUIET — no accent; the chip stops competing with the title
.blog-main > .post-list:nth-of-type(-n+4) .post-date {
flex: none;
align-self: flex-start;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.13em;
color: var(--ink-soft);
}
*/
/* NONE — hides it entirely. Note this also removes the only
marker distinguishing the DE and FR cards by language.
.blog-main > .post-list:nth-of-type(-n+4) .post-date { display: none; }
*/
.blog-main > .post-list:nth-of-type(-n+4) .post-link {
font-size: 18.5px;
line-height: 1.3;
}
/* the two translated sections are secondary — tighter cells */
.blog-main > .post-list:nth-of-type(n+3):nth-of-type(-n+4) {
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.blog-main > .post-list:nth-of-type(n+3):nth-of-type(-n+4) .post-link {
font-size: 16.5px;
}
/* ---- tier 2: the dated archive, dense ---- */
.blog-main > .blog-year:nth-of-type(n+5) {
font-family: var(--serif);
font-style: normal;
font-weight: 400;
font-size: 26px;
font-variation-settings: "opsz" 28;
color: var(--ink-faint);
font-variant-numeric: lining-nums tabular-nums;
margin: 40px 0 0;
padding-bottom: 6px;
}
.blog-main > .post-list:nth-of-type(n+5) > li { padding: 8px 2px; }
.blog-main > .post-list:nth-of-type(n+5) .post-link {
font-family: var(--sans);
font-size: 16.5px;
line-height: 1.4;
letter-spacing: -0.006em;
color: var(--ink);
}
.blog-main > .post-list:nth-of-type(n+5) .post-date {
font-family: var(--mono);
font-size: 11.5px;
text-transform: none;
letter-spacing: 0;
color: var(--ink-soft);
}
/* rule and air marking the change of tier */
.blog-main > .blog-year:nth-of-type(5) {
margin-top: 64px;
padding-top: 30px;
border-top: 1px solid var(--border);
}
@media (max-width: 760px) {
.blog-main > .post-list:nth-of-type(-n+4) { grid-template-columns: 1fr; }
.blog-main > .post-list:nth-of-type(-n+4) > li { padding: 14px 16px 16px; }
}