/* ——— Reading column presets ——— */ :root { /* target ~60–75 characters per line */ --reading-width: 70ch; --reading-pad: 1.25rem; --body-size: 18px; /* smaller than your current 25px */ --line-height: 1.65; } /* Limit the post content width and center it */ main.content, .quarto-container .page-columns .content, #quarto-document-content { max-width: var(--reading-width); margin-inline: auto; padding-inline: var(--reading-pad); } /* Title block same width + centered */ .quarto-title-block, .quarto-title-block .quarto-title-banner, .quarto-title-block .quarto-title { max-width: var(--reading-width); margin-inline: auto; padding-inline: var(--reading-pad); text-align: left; /* set to center if you prefer */ } /* Typography tuned for reading */ body { font-size: var(--body-size); line-height: var(--line-height); } /* Headings */ h1, h2, h3 { line-height: 1.25; margin-top: 1.6em; margin-bottom: 0.6em; } /* Paragraph rhythm */ p { margin: 0 0 1em 0; } /* Images stay within the column and don’t overflow */ main.content img, main.content figure > img { display: block; max-width: 100%; height: auto; margin: 1rem auto; } /* Optional: scale down captions slightly */ figcaption { font-size: 0.95em; opacity: .85; } /* Links: a subtle underline that looks good on long reads */ main.content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Optional: soften code blocks in posts */ main.content pre code { font-size: 0.95em; } /* Responsiveness — a touch more width on big screens, comfy on phones */ @media (min-width: 1200px) { :root { --reading-width: 72ch; } } @media (max-width: 600px) { :root { --reading-pad: 1rem; --body-size: 17px; } } /* If you previously added big global margins or borders to images/cards, neutralize them in posts so the column looks clean. */ main.content img { margin: 1rem auto !important; border: none !important; } /* ── Dark mode (Slate) overrides: make text light on dark ───────────── */ /* Quarto sets data-bs-theme="dark" on for dark mode. */ body[data-bs-theme="dark"], .quarto-dark { /* Core Bootstrap color tokens used by Slate in dark mode */ --bs-body-color: #f2f5f8; /* main text (very light grey) */ --bs-heading-color: #ffffff; /* headings = pure white */ --bs-link-color: #d8e7ff; /* links: light bluish */ --bs-link-hover-color: #ffffff; /* links on hover */ --bs-secondary-color: rgba(255,255,255,.75); /* captions, meta */ --bs-border-color: rgba(255,255,255,.2); } /* Ensure article content actually uses those colors */ body[data-bs-theme="dark"] #quarto-document-content, body[data-bs-theme="dark"] main.content { color: var(--bs-body-color); } /* Headings + page title */ body[data-bs-theme="dark"] h1, body[data-bs-theme="dark"] h2, body[data-bs-theme="dark"] h3, body[data-bs-theme="dark"] .quarto-title-block .title { color: var(--bs-heading-color); } /* Links inside the reading column */ body[data-bs-theme="dark"] main.content a { color: var(--bs-link-color); text-decoration: underline; text-underline-offset: 2px; } body[data-bs-theme="dark"] main.content a:hover { color: var(--bs-link-hover-color); } /* Captions / small meta */ body[data-bs-theme="dark"] figcaption, body[data-bs-theme="dark"] .quarto-title-meta { color: var(--bs-secondary-color); opacity: 1; /* override any previous opacity */ } /* Blockquotes: lighten text + border */ body[data-bs-theme="dark"] blockquote { color: var(--bs-body-color); border-left-color: var(--bs-border-color); } /* Article images: slightly narrower than the reading column */ main.content .quarto-figure img, main.content figure > img, main.content p > img { max-width: 80% !important; /* try 90–95% to taste */ height: auto; display: block; margin-left: auto !important; margin-right: auto !important; } /* Keep listing/card thumbnails unchanged */ .quarto-listing .card-img-top { max-width: 100% !important; }