/* ──────────────────────────────────────────────────────────────────────
blog.skwa.red — Carbon theme (skwared-theme plugin)
Published to /assets/theme.css by the lopress build. Auto light/dark via
prefers-color-scheme; add data-theme="light" or data-theme="dark" on
to force one.
Markup contract (from templates/ in this plugin):
… ← duplicated in .body, hidden in CSS
…
… h1, h2, h3, p, ul, ol, pre, code, blockquote …
────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ── tokens ───────────────────────────────────────────────────────────── */
:root {
--bg: #eeeef1;
--paper: #f6f7f9;
--ink: #0c0d10;
--muted: #5a5e66;
--faint: #a8acb4;
--rule: #c8cdd4;
--accent: #7c3aed;
--accent-soft: rgba(124, 58, 237, 0.08);
--grid: rgba(20, 20, 30, 0.022);
--code-bg: #e6e7ea;
--font-heading: 'Orbitron', ui-monospace, 'Cascadia Mono', monospace;
--font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
--measure: 680px;
--rail: 180px;
--gutter: 56px;
--grid-step: 32px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #08090b;
--paper: #0c0e12;
--ink: #e6e8ec;
--muted: #7a8290;
--faint: #363b44;
--rule: #1c2028;
--accent: #f59e0b;
--accent-soft: rgba(245, 158, 11, 0.1);
--grid: rgba(245, 158, 11, 0.03);
--code-bg: #0a0c10;
}
}
/* Manual override (toggle via JS by setting ) */
html[data-theme="light"] {
--bg: #eeeef1; --paper: #f6f7f9; --ink: #0c0d10; --muted: #5a5e66;
--faint: #a8acb4; --rule: #c8cdd4; --accent: #7c3aed;
--accent-soft: rgba(124,58,237,.08); --grid: rgba(20,20,30,.022);
--code-bg: #e6e7ea;
}
html[data-theme="dark"] {
--bg: #08090b; --paper: #0c0e12; --ink: #e6e8ec; --muted: #7a8290;
--faint: #363b44; --rule: #1c2028; --accent: #f59e0b;
--accent-soft: rgba(245,158,11,.1); --grid: rgba(245,158,11,.03);
--code-bg: #0a0c10;
}
/* ── plugin variable overrides ──────────────────────────────────────────── */
/* Carbon-palette overrides for portable reading plugins. */
/* code + highlight.js */
:root {
--code-bg: #e6e7ea; --code-border: #c8cdd4;
--code-accent: #7c3aed; --code-label-bg: rgba(0,0,0,0.04);
--code-label-fg: #5a5e66; --code-copy-fg: #5a5e66;
--code-copy-hover-bg: rgba(124,58,237,0.08); --code-copy-hover-fg: #7c3aed;
--code-copy-copied-fg: #059669;
--hl-keyword: #7c3aed; --hl-built-in: #059669; --hl-literal: #d97706;
--hl-string: #059669; --hl-regexp: #059669; --hl-comment: #5a5e66;
--hl-addition: #059669; --hl-deletion: #dc2626; --hl-meta: #5a5e66;
--hl-punctuation: #5a5e66;
}
@media (prefers-color-scheme: dark) {
:root {
--code-bg: #0a0c10; --code-border: #1c2028; --code-accent: #f59e0b;
--code-label-bg: rgba(255,255,255,0.04); --code-label-fg: #7a8290;
--code-copy-fg: #7a8290; --code-copy-hover-bg: rgba(245,158,11,0.1);
--code-copy-hover-fg: #f59e0b;
--code-copy-copied-fg: #34d399;
--hl-keyword: #c084fc; --hl-built-in: #34d399; --hl-literal: #fbbf24;
--hl-string: #34d399; --hl-regexp: #34d399; --hl-comment: #7a8290;
--hl-addition: #34d399; --hl-deletion: #f87171; --hl-meta: #7a8290;
--hl-punctuation: #7a8290;
}
}
html[data-theme="light"] {
--code-bg: #e6e7ea; --code-border: #c8cdd4; --code-accent: #7c3aed;
--code-label-bg: rgba(0,0,0,0.04); --code-label-fg: #5a5e66;
--code-copy-fg: #5a5e66; --code-copy-hover-bg: rgba(124,58,237,0.08);
--code-copy-hover-fg: #7c3aed;
--code-copy-copied-fg: #059669;
--hl-keyword: #7c3aed; --hl-built-in: #059669; --hl-literal: #d97706;
--hl-string: #059669; --hl-regexp: #059669; --hl-comment: #5a5e66;
--hl-addition: #059669; --hl-deletion: #dc2626; --hl-meta: #5a5e66;
--hl-punctuation: #5a5e66;
}
html[data-theme="dark"] {
--code-bg: #0a0c10; --code-border: #1c2028; --code-accent: #f59e0b;
--code-label-bg: rgba(255,255,255,0.04); --code-label-fg: #7a8290;
--code-copy-fg: #7a8290; --code-copy-hover-bg: rgba(245,158,11,0.1);
--code-copy-hover-fg: #f59e0b;
--code-copy-copied-fg: #34d399;
--hl-keyword: #c084fc; --hl-built-in: #34d399; --hl-literal: #fbbf24;
--hl-string: #34d399; --hl-regexp: #34d399; --hl-comment: #7a8290;
--hl-addition: #34d399; --hl-deletion: #f87171; --hl-meta: #7a8290;
--hl-punctuation: #7a8290;
}
/* toc */
:root {
--toc-fg: #5a5e66; --toc-current-bg: rgba(124,58,237,0.08);
--toc-current-fg: #7c3aed; --toc-border: #c8cdd4;
--toc-mobile-bg: rgba(0,0,0,0.03);
}
@media (prefers-color-scheme: dark) {
:root {
--toc-fg: #7a8290; --toc-current-bg: rgba(245,158,11,0.1);
--toc-current-fg: #f59e0b; --toc-border: #1c2028;
--toc-mobile-bg: rgba(255,255,255,0.04);
}
}
html[data-theme="light"] {
--toc-fg: #5a5e66; --toc-current-bg: rgba(124,58,237,0.08);
--toc-current-fg: #7c3aed; --toc-border: #c8cdd4;
--toc-mobile-bg: rgba(0,0,0,0.03);
}
html[data-theme="dark"] {
--toc-fg: #7a8290; --toc-current-bg: rgba(245,158,11,0.1);
--toc-current-fg: #f59e0b; --toc-border: #1c2028;
--toc-mobile-bg: rgba(255,255,255,0.04);
}
/* lightbox */
:root {
--lightbox-bg: rgba(0, 0, 0, 0.85);
--lightbox-caption: rgba(255, 255, 255, 0.7);
}
@media (prefers-color-scheme: dark) {
:root {
--lightbox-bg: rgba(0, 0, 0, 0.9);
--lightbox-caption: rgba(230, 232, 236, 0.7);
}
}
html[data-theme="light"] {
--lightbox-bg: rgba(0, 0, 0, 0.85);
--lightbox-caption: rgba(255, 255, 255, 0.7);
}
html[data-theme="dark"] {
--lightbox-bg: rgba(0, 0, 0, 0.9);
--lightbox-caption: rgba(230, 232, 236, 0.7);
}
/* series */
:root {
--series-bg: #f6f7f9; --series-border: #c8cdd4;
--series-title-fg: #7c3aed; --series-link-fg: #7c3aed;
--series-link-hover: rgba(124,58,237,0.08);
--series-upcoming-fg: #5a5e66;
--series-here-bg: rgba(124,58,237,0.08); --series-here-fg: #7c3aed;
}
@media (prefers-color-scheme: dark) {
:root {
--series-bg: #0c0e12; --series-border: #1c2028;
--series-title-fg: #f59e0b; --series-link-fg: #f59e0b;
--series-link-hover: rgba(245,158,11,0.1);
--series-upcoming-fg: #7a8290;
--series-here-bg: rgba(245,158,11,0.1); --series-here-fg: #f59e0b;
}
}
html[data-theme="light"] {
--series-bg: #f6f7f9; --series-border: #c8cdd4;
--series-title-fg: #7c3aed; --series-link-fg: #7c3aed;
--series-link-hover: rgba(124,58,237,0.08);
--series-upcoming-fg: #5a5e66;
--series-here-bg: rgba(124,58,237,0.08); --series-here-fg: #7c3aed;
}
html[data-theme="dark"] {
--series-bg: #0c0e12; --series-border: #1c2028;
--series-title-fg: #f59e0b; --series-link-fg: #f59e0b;
--series-link-hover: rgba(245,158,11,0.1);
--series-upcoming-fg: #7a8290;
--series-here-bg: rgba(245,158,11,0.1); --series-here-fg: #f59e0b;
}
/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Subtle blueprint grid */
background-image:
linear-gradient(to right, var(--grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
background-size: var(--grid-step) var(--grid-step);
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
width: 100%;
}
::selection { background: var(--accent-soft); color: var(--ink); }
a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid var(--accent-soft);
padding-bottom: 0.5px;
transition: border-color .15s, background .15s;
}
a:hover { background: var(--accent-soft); border-bottom-color: var(--accent); }
/* ── site header ──────────────────────────────────────────────────────── */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
max-width: 1080px;
margin: 0 auto;
padding: 28px 32px 24px;
border-bottom: 1px solid var(--rule);
}
.site-brand {
display: flex;
align-items: center;
gap: 10px;
border-bottom: none;
}
.site-brand:hover { background: none; }
.site-mark {
display: block;
flex: none;
color: var(--accent);
}
.site-title {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
border-bottom: none;
}
.site-brand:hover .site-title { background: none; color: var(--accent); }
.site-nav {
display: flex;
gap: 22px;
align-items: center;
}
.site-nav a {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
border-bottom: 1px solid transparent;
padding: 4px 2px;
}
.site-nav a:hover {
color: var(--ink);
background: none;
border-bottom-color: var(--accent);
}
/* Dark/light toggle — styled to sit alongside the nav links */
.theme-toggle {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
background: none;
border: 1px solid var(--rule);
border-radius: 3px;
padding: 4px 8px;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover {
color: var(--ink);
border-color: var(--accent);
background: var(--accent-soft);
}
/* ── post layout ──────────────────────────────────────────────────────── */
article.post {
display: grid;
grid-template-columns: var(--rail) 1fr;
gap: var(--gutter);
max-width: 1080px;
margin: 0 auto;
padding: 56px 32px 72px;
}
/* Left rail — date and tags, right-aligned (unix.foo style) */
article.post > header {
position: sticky;
top: 32px;
align-self: start;
padding: 8px 24px 24px 0;
border-right: 1px dashed var(--rule);
text-align: right;
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.5;
color: var(--muted);
}
/* The duplicated in the article header — hide visually, keep for a11y */
article.post > header h1 {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
article.post > header time {
display: block;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--ink);
margin-bottom: 18px;
position: relative;
}
article.post > header time::before {
content: "FILED";
display: block;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
article.post > header .tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px 8px;
position: relative;
}
article.post > header .tags::before {
content: "TAGS";
flex: 1 1 100%;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 2px;
}
article.post > header .tags a {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
border-bottom: 1px dotted var(--accent);
padding: 0;
}
article.post > header .tags a:hover {
background: var(--accent-soft);
border-bottom-style: solid;
}
/* Optional sidebar corner ticks — purely decorative */
article.post > header::before,
article.post > header::after {
content: "";
position: absolute;
right: -1px;
width: 8px;
height: 1px;
background: var(--faint);
}
article.post > header::before { top: 0; }
article.post > header::after { bottom: 24px; }
/* ── body / prose ─────────────────────────────────────────────────────── */
:is(article.post, article.page) > .body {
min-width: 0;
max-width: var(--measure);
}
/* The first H1 inside .body is the actual title */
:is(article.post, article.page) > .body > h1:first-child {
font-family: var(--font-heading);
font-weight: 500;
font-size: 40px;
line-height: 1.1;
letter-spacing: 0.005em;
color: var(--ink);
margin: 0 0 28px;
text-wrap: balance;
}
/* The accented period flourish — works on any "blog.swka.red"-style title */
:is(article.post, article.page) > .body > h1:first-child {
/* Periods get accent color via a span if you ever wrap them, but with
plain text we just use a subtle underline brackets via ::after below. */
}
/* Subtle corner-bracket ornament under the title — the "small thing" */
:is(article.post, article.page) > .body > h1:first-child + p,
:is(article.post, article.page) > .body > h1:first-child {
position: relative;
}
:is(article.post, article.page) > .body > h1:first-child::after {
content: "";
display: block;
margin-top: 22px;
height: 0;
border-top: 1px solid var(--rule);
position: relative;
}
/* And the brackets at each end of that rule */
:is(article.post, article.page) > .body > h1:first-child {
padding-bottom: 0;
}
:is(article.post, article.page) > .body {
position: relative;
}
/* Headings inside body */
:is(article.post, article.page) > .body h2 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 21px;
line-height: 1.3;
letter-spacing: 0.03em;
color: var(--ink);
margin: 48px 0 14px;
padding-left: 18px;
position: relative;
}
:is(article.post, article.page) > .body h2::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 10px;
height: 1px;
background: var(--accent);
}
:is(article.post, article.page) > .body h3 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 15px;
line-height: 1.35;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin: 32px 0 12px;
}
:is(article.post, article.page) > .body p {
margin: 0 0 18px;
font-size: 16.5px;
line-height: 1.72;
color: var(--ink);
text-wrap: pretty;
}
:is(article.post, article.page) > .body strong { font-weight: 600; color: var(--ink); }
:is(article.post, article.page) > .body em { font-style: italic; color: var(--ink); }
/* Lists with dash bullets in accent color */
:is(article.post, article.page) > .body ul,
:is(article.post, article.page) > .body ol {
margin: 0 0 22px;
padding-left: 22px;
list-style: none;
}
:is(article.post, article.page) > .body ol { counter-reset: ol; }
:is(article.post, article.page) > .body li {
position: relative;
margin-bottom: 6px;
padding-left: 4px;
font-size: 16.5px;
line-height: 1.65;
}
:is(article.post, article.page) > .body ul > li::before {
content: "─";
position: absolute;
left: -22px;
top: 0;
color: var(--accent);
font-family: var(--font-mono);
font-size: 14px;
}
:is(article.post, article.page) > .body ol > li {
counter-increment: ol;
}
:is(article.post, article.page) > .body ol > li::before {
content: counter(ol, decimal-leading-zero);
position: absolute;
left: -28px;
top: 0;
color: var(--accent);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
}
/* Lists that wrap each item in a (your generator does this for spaced items) */
:is(article.post, article.page) > .body li > p { margin: 0 0 4px; }
:is(article.post, article.page) > .body li > p:only-child { margin: 0; }
/* Blockquote */
:is(article.post, article.page) > .body blockquote {
margin: 0 0 22px;
padding: 6px 0 6px 18px;
border-left: 2px solid var(--accent);
color: var(--muted);
font-style: italic;
}
:is(article.post, article.page) > .body blockquote p:last-child { margin-bottom: 0; }
/* ── callouts / admonitions (callout plugin) ──────────────────────────── */
/* Per-variant accent colors — hue-coded, tuned for both schemes */
:root {
--callout-note: #2563eb;
--callout-tip: #059669;
--callout-warning: #d97706;
--callout-danger: #dc2626;
}
@media (prefers-color-scheme: dark) {
:root {
--callout-note: #60a5fa;
--callout-tip: #34d399;
--callout-warning: #fbbf24;
--callout-danger: #f87171;
}
}
html[data-theme="light"] {
--callout-note: #2563eb; --callout-tip: #059669;
--callout-warning: #d97706; --callout-danger: #dc2626;
}
html[data-theme="dark"] {
--callout-note: #60a5fa; --callout-tip: #34d399;
--callout-warning: #fbbf24; --callout-danger: #f87171;
}
:is(article.post, article.page) > .body .callout {
--co: var(--callout-note); /* set per variant below */
position: relative;
margin: 0 0 22px;
padding: 13px 18px 14px;
background: color-mix(in srgb, var(--co) 7%, var(--paper));
border: 1px solid var(--rule);
border-left: 2px solid var(--co);
}
/* The type label — mono/uppercase, matching the FILED/TAGS motif */
:is(article.post, article.page) > .body .callout::before {
content: "NOTE";
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--co);
margin-bottom: 8px;
}
:is(article.post, article.page) > .body .callout > :last-child { margin-bottom: 0; }
:is(article.post, article.page) > .body .callout-note { --co: var(--callout-note); }
:is(article.post, article.page) > .body .callout-tip { --co: var(--callout-tip); }
:is(article.post, article.page) > .body .callout-warning { --co: var(--callout-warning); }
:is(article.post, article.page) > .body .callout-danger { --co: var(--callout-danger); }
:is(article.post, article.page) > .body .callout-tip::before { content: "TIP"; }
:is(article.post, article.page) > .body .callout-warning::before { content: "WARNING"; }
:is(article.post, article.page) > .body .callout-danger::before { content: "DANGER"; }
/* Horizontal rule with accent corner brackets — the flourish */
:is(article.post, article.page) > .body hr {
border: 0;
position: relative;
height: 0;
border-top: 1px solid var(--rule);
margin: 36px 0;
}
:is(article.post, article.page) > .body hr::before,
:is(article.post, article.page) > .body hr::after {
content: "";
position: absolute;
top: -5px;
width: 8px;
height: 8px;
border: 1px solid var(--accent);
}
:is(article.post, article.page) > .body hr::before {
left: -1px;
border-right: none;
border-bottom: none;
}
:is(article.post, article.page) > .body hr::after {
right: -1px;
border-left: none;
border-bottom: none;
}
/* ── code ─────────────────────────────────────────────────────────────── */
code, pre, kbd, samp {
font-family: var(--font-mono);
font-feature-settings: "calt" 0;
}
/* Inline code */
:is(article.post, article.page) > .body :not(pre) > code {
font-size: 0.86em;
background: var(--code-bg);
color: var(--ink);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--rule);
}
/* Code blocks */
:is(article.post, article.page) > .body pre {
background: var(--code-bg);
border: 1px solid var(--rule);
border-left: 2px solid var(--accent);
padding: 16px 18px;
margin: 0 0 22px;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink);
overflow-x: auto;
position: relative;
}
:is(article.post, article.page) > .body pre > code {
background: none;
border: 0;
padding: 0;
font-size: inherit;
color: inherit;
display: block;
white-space: pre;
}
/* Language hint in the corner — reads from `class="language-foo"` */
:is(article.post, article.page) > .body pre {
padding-top: 28px;
}
:is(article.post, article.page) > .body pre > code[class*="language-"]::before {
content: attr(class);
/* Strip "language-" via a trick — simplest path is to show full class.
If you want a clean label, set a data-attr in your generator instead. */
position: absolute;
top: 6px;
right: 10px;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
font-family: var(--font-mono);
}
/* Tables — minimal */
:is(article.post, article.page) > .body table {
border-collapse: collapse;
margin: 0 0 22px;
font-size: 14px;
width: 100%;
}
:is(article.post, article.page) > .body th,
:is(article.post, article.page) > .body td {
text-align: left;
padding: 8px 12px;
border-bottom: 1px solid var(--rule);
}
:is(article.post, article.page) > .body th {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
border-bottom: 1px solid var(--ink);
}
/* Images */
:is(article.post, article.page) > .body img {
max-width: 100%;
height: auto;
display: block;
margin: 8px 0 22px;
border: 1px solid var(--rule);
}
:is(article.post, article.page) > .body figcaption {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--muted);
margin: -14px 0 22px;
}
/* ── site footer ──────────────────────────────────────────────────────── */
.site-footer {
margin-top: 24px;
border-top: 1px solid var(--rule);
padding: 22px 32px 28px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 22px;
align-items: baseline;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.site-footer a {
color: var(--muted);
border-bottom-color: transparent;
}
.site-footer a:hover {
color: var(--accent);
background: none;
border-bottom-color: var(--accent);
}
.site-footer-tag {
margin-left: auto;
color: var(--faint);
text-transform: none;
letter-spacing: 0;
}
/* ── page (about etc.) ────────────────────────────────────────────────── */
article.page {
max-width: 1080px;
margin: 0 auto;
padding: 56px 32px 72px;
}
/* The page-level
duplicates the one in .body — hide visually, keep for a11y */
article.page > h1 {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* ── index / tag listings ─────────────────────────────────────────────── */
section.index,
section.tag {
max-width: 1080px;
margin: 0 auto;
padding: 56px 32px 72px;
}
/* The index duplicates the masthead — hide visually, keep for a11y */
section.index > h1 {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
section.tag > h1 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 24px;
line-height: 1.3;
letter-spacing: 0.03em;
color: var(--ink);
margin: 0 0 24px;
padding-left: 18px;
position: relative;
}
section.tag > h1::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 10px;
height: 1px;
background: var(--accent);
}
.post-list {
list-style: none;
margin: 0;
padding: 0;
max-width: var(--measure);
}
section.index .post-list::before {
content: "// recent posts";
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
padding-bottom: 4px;
}
.post-list > li {
padding: 22px 0 26px;
border-bottom: 1px dashed var(--rule);
}
.post-list > li > a:first-child {
font-family: var(--font-heading);
font-weight: 500;
font-size: 19px;
line-height: 1.35;
color: var(--ink);
border-bottom: none;
}
.post-list > li > a:first-child:hover {
background: none;
color: var(--accent);
}
.post-list time {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--muted);
margin-top: 6px;
}
.post-list .excerpt {
margin-top: 12px;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink);
}
.post-list .excerpt h1 { display: none; } /* excerpt may repeat the post title */
.post-list .excerpt p { margin: 0 0 10px; }
.post-list .excerpt p:last-child { margin-bottom: 0; }
.read-more {
display: inline-block;
margin-top: 10px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px dotted var(--accent);
}
.read-more:hover { background: var(--accent-soft); border-bottom-style: solid; }
/* Align listings and page prose with the article text column */
@media (min-width: 761px) {
section.index > .post-list,
section.tag > .post-list,
section.tag > h1 {
margin-left: calc(var(--rail) + var(--gutter));
}
article.page > .body {
margin-left: calc(var(--rail) + var(--gutter));
}
}
/* ── 404 ──────────────────────────────────────────────────────────────── */
section.not-found {
max-width: 1080px;
margin: 0 auto;
padding: 96px 32px;
text-align: center;
}
section.not-found h1 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 72px;
letter-spacing: 0.06em;
color: var(--ink);
margin: 0 0 10px;
}
section.not-found p {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
.site-header {
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 22px 20px 18px;
}
article.post {
grid-template-columns: 1fr;
gap: 24px;
padding: 32px 20px 56px;
}
article.post > header {
position: static;
text-align: left;
border-right: 0;
border-bottom: 1px dashed var(--rule);
padding: 0 0 18px;
display: flex;
align-items: baseline;
gap: 20px;
flex-wrap: wrap;
}
article.post > header time::before,
article.post > header .tags::before { display: none; }
article.post > header .tags { justify-content: flex-start; }
article.post > header::before,
article.post > header::after { display: none; }
:is(article.post, article.page) > .body > h1:first-child { font-size: 30px; }
article.page,
section.index,
section.tag { padding: 32px 20px 56px; }
.site-footer { flex-wrap: wrap; padding: 18px 20px 24px; }
.site-footer-tag { margin-left: 0; flex: 1 1 100%; }
}