/* pg.ddx.io — single source of truth for the 19 static pages. * * 2026-09-10 redesign, aesthetic taken from pghackers.com (palette sampled from its * live markup): phosphor-green-on-near-black, everything monospace, a narrow measure. * * SCOPE IS STRUCTURAL, not a promise to be careful. This file cannot reach /m/* or * /gitweb*: those build their own and CSS inside Elixir * (AgoraExWeb.MailHtml.doc_head/2 and AgoraExWeb.GitwebController.themes/0). The * operator asked for those two to be left alone, and editing this file cannot affect * them. * * THE ACTUAL BUG THIS FIXES, found by auditing rather than assuming it was "styling": * 16 of the 19 pages wrap their content in `.header` + `.section` divs and have NO *
element. Those three class names were defined NOWHERE -- not here, not in the * live stylesheet, not in any inline block. So on those pages every rule keyed to * `main` (the width cap and page padding) never applied, and the text ran the full * width of the viewport with no gutter. That is the "renders in ways that make them * unreadable" report: a missing selector, not a taste problem. * * So `.header`/`.section` are first-class here, styled to be equivalent to the * `.hdr`/`main` shell the other 3 pages use. Nothing needs its markup rewritten. */ *{margin:0;padding:0;box-sizing:border-box} :root{ /* --------------------------------------------------------------------------- * LIGHT PALETTE, 2026-09-10 redesign. * * The previous iteration was phosphor-green-on-black, copied from pghackers.com. * The operator's verdict: "lighter, more well organized, ... simple, nerdy and fun yet * modern". Full-saturation green on near-black is a costume; it reads as a novelty and * it is genuinely tiring on a 25,000-character reference page. * * This keeps the nerd register through TYPE and DENSITY rather than through colour: * a monospace UI, tabular numbers, `>` nav markers, visible rules. The colour itself is * quiet so the content is what stands out. * * Accent is PostgreSQL elephant blue (#336791), which is the project's own colour -- * appropriate rather than arbitrary, and it survives being printed or read at 2am. * ------------------------------------------------------------------------- */ --paper: #fcfcfa; /* page: warm off-white, not #fff (less glare) */ --paper-2: #f4f4f1; /* panels, table stripes, code blocks */ --paper-3: #ebebe7; /* hover, active facet */ --rule: #dcdcd6; /* hairlines */ --rule-2: #c3c3bb; /* stronger dividers */ --ink: #1b1d1e; /* body text: near-black, ~15:1 on paper */ --ink-2: #4d5155; /* secondary */ --ink-3: #6b7075; /* tertiary. 4.87:1 on --paper -- WCAG AA for NORMAL text. Was #74797e, which measured 4.28:1: below AA and applied to .small/.muted/.lbl, i.e. exactly the SMALL text where the threshold matters. Checked with a contrast calculation rather than by eye, because 4.28 and 4.87 look identical side by side. */ --accent: #336791; /* PostgreSQL blue: links, headings, focus */ --accent-ink: #24496a; /* visited, pressed */ --accent-bg: #eaf1f7; /* selected facet, callout background */ --ok: #1f7a4c; --warn: #8a5a00; --bad: #a3282f; /* Monospace everywhere -- this is the "nerdy" carrier. System stacks only: a web font is a render-blocking request for a text site whose whole pitch is being fast. */ --font-mono: ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace; --font-ui: var(--font-mono); --measure: 74ch; /* prose line length */ --content: 52rem; /* single-column pages */ --wide: 76rem; /* tables, status dashboards */ /* Aliases so the 63 pre-existing selectors and 302 inline var() refs keep working. */ --link: var(--accent); --phosphor: var(--accent); --dim: var(--ink-3); --bg: var(--paper); --fg: var(--ink); --fg-dim: var(--ink-2); --fg-faint: var(--ink-3); --border: var(--rule); --up: var(--ok); --down: var(--bad); --font: var(--font-mono); } html{ background:var(--paper); color:var(--ink); font-family:var(--font-mono); font-size:16px; line-height:1.62; -webkit-text-size-adjust:100%; /* tabular numbers: this site is full of counts, dates and latencies */ font-variant-numeric:tabular-nums; } body{ min-height:100vh; display:flex; flex-direction:column; } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; } a:visited{ color:var(--accent-ink); } code,kbd,samp,.mono{ font-family:var(--font-mono); font-size:0.92em; } /* ---- shared header (§8.4): the one element on both registers ---- */ .hdr{ display:flex; align-items:center; gap:1rem; height:48px; padding:0 1rem; border-bottom:1px solid var(--rule); background:var(--paper); } .hdr__brand{ font-family:var(--font-mono); font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap; } .hdr__brand:visited{ color:var(--ink); } .hdr__nav{ display:flex; gap:0.9rem; } .hdr__nav a{ color:var(--ink-2); font-size:14px; } .hdr__nav a[aria-current="page"]{ color:var(--ink); font-weight:600; } .hdr__search{ margin-left:auto; display:flex; } .hdr__search input[type=search]{ font:inherit; font-size:14px; padding:0.3rem 0.6rem; border:1px solid var(--rule); border-radius:3px 0 0 3px; background:var(--paper); color:var(--ink); width:min(38ch,42vw); } .hdr__search button{ font:inherit; font-size:14px; padding:0.3rem 0.7rem; border:1px solid var(--accent); border-left:none; border-radius:0 3px 3px 0; background:var(--accent); color:var(--paper); cursor:pointer; } /* mobile: nav collapses to a native
disclosure, no JS */ @media (max-width:640px){ .hdr{ flex-wrap:wrap; height:auto; padding:0.5rem 0.75rem; gap:0.5rem; } .hdr__nav{ order:3; width:100%; } .hdr__search input[type=search]{ width:100%; } .hdr__search{ order:2; width:100%; } } /* ---- layout ---- */ main{ flex:1; width:100%; max-width:var(--content); margin:0 auto; padding:2rem 1.25rem 4rem; } main.wide{ max-width:var(--wide); } .prose{ max-width:var(--measure); } h1{ font-size:31px; line-height:1.2; font-weight:650; margin:0 0 0.75rem; letter-spacing:-0.01em; } h2{ font-size:20px; font-weight:600; margin:2rem 0 0.6rem; } h3{ font-size:16px; font-weight:600; margin:1.2rem 0 0.4rem; color:var(--ink-2); } p{ margin:0 0 0.9rem; } .lede{ font-size:20px; color:var(--ink-2); line-height:1.5; max-width:var(--measure); } .muted{ color:var(--ink-3); } .small{ font-size:14px; } hr{ border:none; border-top:1px solid var(--rule); margin:2rem 0; } /* ---- freshness dot (§8.7) ---- */ .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; } .dot--ok{ background:var(--ok); } .dot--warn{ background:var(--warn); } .dot--bad{ background:var(--bad); } .dot--idle{ background:var(--ink-3); } /* ---- degradation banner (§8.7 / P5) ---- */ .banner{ padding:0.6rem 0.9rem; border-radius:4px; margin:0 0 1rem; font-size:14px; border:1px solid; } .banner--warn{ background:color-mix(in srgb,var(--warn) 12%,var(--paper)); border-color:var(--warn); color:var(--ink); } .banner--bad{ background:color-mix(in srgb,var(--bad) 12%,var(--paper)); border-color:var(--bad); color:var(--ink); } /* ---- list row (archive index) ---- */ .rows{ border-top:1px solid var(--rule); } .row{ display:flex; align-items:baseline; gap:1rem; padding:0.55rem 0.25rem; border-bottom:1px solid var(--rule); } .row__name{ font-family:var(--font-mono); font-weight:600; min-width:18ch; } .row__desc{ color:var(--ink-2); flex:1; font-size:14px; } .row__count{ color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; } .row__fresh{ width:1.2rem; text-align:center; } /* ---- stat block (§8.7) ---- */ .stats{ display:flex; flex-wrap:wrap; gap:2rem; margin:1rem 0 1.5rem; } .stat__num{ font-size:25px; font-weight:650; font-variant-numeric:tabular-nums; } .stat__lbl{ font-size:13px; color:var(--ink-3); text-transform:none; } /* ---- data table (§8.7) ---- */ table{ border-collapse:collapse; width:100%; font-size:14px; } th,td{ text-align:left; padding:0.4rem 0.6rem; border-bottom:1px solid var(--rule); } th{ color:var(--ink-3); font-weight:600; } td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; } /* ---- disclosure groups (§8.7): native
, no JS ---- */ details.group{ border-bottom:1px solid var(--rule); } details.group>summary{ cursor:pointer; padding:0.6rem 0.25rem; font-weight:600; list-style:none; display:flex; gap:1rem; } details.group>summary::-webkit-details-marker{ display:none; } details.group>summary::after{ content:"▸"; margin-left:auto; color:var(--ink-3); } details.group[open]>summary::after{ content:"▾"; } /* ---- big centered search (home + archive index) ---- */ .hero{ text-align:left; max-width:var(--measure); } .searchbox{ display:flex; margin:1rem 0 0.5rem; } .searchbox input[type=search]{ flex:1; font:inherit; font-size:17px; padding:0.7rem 0.9rem; border:1px solid var(--rule); border-radius:4px 0 0 4px; background:var(--paper); color:var(--ink); } .searchbox button{ font:inherit; font-size:17px; padding:0.7rem 1.4rem; border:1px solid var(--accent); border-radius:0 4px 4px 0; background:var(--accent); color:var(--paper); cursor:pointer; } .tries{ font-size:14px; color:var(--ink-3); } .tries a{ font-family:var(--font-mono); } /* ---- footer ---- */ footer{ border-top:1px solid var(--rule); padding:1.25rem; font-size:13px; color:var(--ink-3); } footer nav{ display:flex; flex-wrap:wrap; gap:0.4rem 1rem; max-width:var(--wide); margin:0 auto; } footer a{ color:var(--ink-3); } /* ---- skip link (a11y §8.9) ---- */ .skip{ position:absolute; left:-9999px; } .skip:focus{ left:1rem; top:0.5rem; background:var(--paper); padding:0.4rem 0.7rem; border:1px solid var(--accent); z-index:10; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* --------------------------------------------------------------------------- * THE SHELL. 16 of 19 pages wrap content in `.header` + `.section` with NO
, and * those class names were defined NOWHERE before 2026-09-10 -- so every rule keyed to * `main` (the width cap and the page gutter) never applied and text ran the full width of * the viewport. That missing selector, not the colour scheme, was the original * "unreadable" complaint. * * These rules give those pages the same measure and gutter the 3 `.hdr`/
pages get, * without touching their markup. * ------------------------------------------------------------------------- */ .animation-wrap{ display:none; } /* Page title band. Sticky so the site identity stays visible while scrolling a long reference page -- how-to.html alone is 25,000 characters. */ .header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--rule); margin-bottom:1.5rem; } .header > *{ width:100%; max-width:var(--content); margin:0 auto; padding:0 1.25rem; } .header h1{ width:100%; max-width:var(--content); margin:0 auto; padding:0.9rem 1.25rem; font-size:0.95rem; font-weight:600; letter-spacing:0.01em; color:var(--ink); } .header h1 a{ color:var(--accent); } .header h1 a::before{ content:"$ "; color:var(--ink-3); } /* nerdy, cheap, no image */ /* Content block. Flat, not a card -- the measure does the work. */ .section{ width:100%; max-width:var(--content); margin:0 auto; padding:0 1.25rem 1.75rem; } .section > h2{ color:var(--ink); font-size:0.95rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; margin:2.25rem 0 0.9rem; padding-bottom:0.35rem; border-bottom:2px solid var(--accent); } .section > h2::before{ content:"# "; color:var(--accent); font-weight:400; } .section > h3{ color:var(--ink-2); font-size:0.9rem; font-weight:600; letter-spacing:0.02em; margin:1.5rem 0 0.5rem; } .section p, .section li{ max-width:var(--measure); } .section p{ margin:0 0 0.9rem; } .section ul, .section ol{ margin:0 0 0.9rem 1.35rem; } .section li{ margin:0 0 0.35rem; } /* Terminal-style nav markers. */ .hdr__nav a::before, footer nav a::before{ content:"> "; color:var(--ink-3); } /* Tables: the site is mostly reference data, so make them scannable rather than pretty. Zebra striping + a sticky header row, because several run past a screenful. */ table{ font-size:0.88rem; } thead th{ position:sticky; top:0; background:var(--paper-2); border-bottom:2px solid var(--rule-2); text-align:left; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; font-size:0.78rem; } tbody tr:nth-child(even){ background:var(--paper-2); } tbody tr:hover{ background:var(--accent-bg); } th,td{ padding:0.4rem 0.6rem; border-bottom:1px solid var(--rule); vertical-align:top; } /* Code: distinguish inline from block, and never let a long command break the layout. */ code,kbd,samp{ background:var(--paper-2); border:1px solid var(--rule); border-radius:3px; padding:0.05em 0.3em; font-size:0.9em; } pre code, .code-block{ display:block; padding:0.7rem 0.85rem; border-radius:4px; overflow-x:auto; white-space:pre; line-height:1.5; } .code-block{ background:var(--paper-2); border:1px solid var(--rule); } /* Minimum legible size. The audit found 0.7em/0.75em/0.78em in use; at 16px base that is 11.2px. Floor everything at 12.8px so no page can go below it. */ .small, .muted, .lbl, .num-cell, .uptime-pct{ font-size:0.8rem; } /* --------------------------------------------------------------------------- * On-page jump nav. how-to.html is 25,000 characters with 15 sections and, before * 2026-09-10, only TWO anchor ids -- so `/how-to#search` (linked from the search page as * "syntax help") landed the reader in the middle of an unnavigable wall. That is what * made it unreadable: not the styling, the absence of structure. * *
so it collapses on small screens without needing JavaScript. * ------------------------------------------------------------------------- */ .toc{ width:100%; max-width:var(--content); margin:0 auto 1.75rem; padding:0 1.25rem; } .toc details{ background:var(--paper-2); border:1px solid var(--rule); border-radius:4px; padding:0.6rem 0.9rem; } .toc summary{ cursor:pointer; font-weight:700; font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-2); } .toc summary::marker{ color:var(--accent); } .toc a{ display:block; padding:0.22rem 0; font-size:0.86rem; border-bottom:1px dotted var(--rule); } .toc a:last-child{ border-bottom:0; } .toc a::before{ content:"> "; color:var(--ink-3); } /* Anchored headings: give the sticky header room so a #fragment jump does not hide the heading underneath it. */ .section[id]{ scroll-margin-top:4.5rem; } /* Two-column definition tables (syntax reference, endpoint lists) read better with the first column emphasised as the "term". */ .section table td:first-child{ white-space:nowrap; } .section table td:first-child code{ font-weight:600; }