/* Light lifted from pages.rafayard.com/secretaria-lar (hueless warm grays, white cards, green accent); dark from world.hey.com's dark mode. The inline script stamps data-theme before first paint, so the CSS below mostly only knows the attribute. */ :root, :root[data-theme="light"] { color-scheme: light; --background: #e6e6e3; --card: #ffffff; --ink: #17181a; --link: #2a6b3e; --muted: #63666a; --border: #bcbcb7; --font-family: -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif; --content-width: 45rem; } :root[data-theme="dark"] { color-scheme: dark; --background: #1b2733; --card: transparent; --ink: #ece9e6; --link: #50a2ff; --muted: #8a94a3; --border: #333c47; } /* Same dark values again on purpose: this block serves visitors with JavaScript off, where nothing stamps data-theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --background: #1b2733; --card: transparent; --ink: #ece9e6; --link: #50a2ff; --muted: #8a94a3; --border: #333c47; } } * { box-sizing: border-box; } body { /* Anchors the theme toggle to the content column's top-right corner. */ position: relative; margin: 0 auto; padding: 3rem 1.5rem 4rem; max-width: var(--content-width); background: var(--background); color: var(--ink); font-family: var(--font-family); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; } time { color: var(--muted); font-size: 0.9rem; } /* Home */ .masthead { text-align: center; } .masthead h1 { font-size: 2rem; margin: 0 0 0.25rem; } .masthead .tagline { margin: 0 0 1rem; color: var(--muted); font-weight: 600; } .masthead .yard { margin: 0 0 1rem; color: var(--muted); font-style: italic; font-size: 1rem; } .masthead .bio { margin: 0 0 1rem; } .masthead .subscribe { margin: 0; font-size: 0.9rem; } .post-summary { position: relative; margin: 2.25rem -1.25rem 0; padding: 1.25rem; /* White card on the warm gray page in light; transparent (page-colored, the pre-toggle look) in dark. */ background: var(--card); /* Always-visible but discrete border, sitting close to the background; hover pushes it toward the ink color (lighter in dark, stronger in light). */ border: 1px solid color-mix(in srgb, var(--border) 60%, var(--background)); border-radius: 12px; } .post-summary:hover { border-color: color-mix(in srgb, var(--border) 80%, var(--ink)); } .post-summary h2 { font-size: 1.4rem; margin: 0.35rem 0 0.5rem; } /* The title link stretches invisibly over the whole card, making the article clickable without turning its text into link-styled content. */ .post-summary h2 a { color: var(--ink); } .post-summary h2 a:hover { text-decoration: none; } .post-summary h2 a::after { content: ""; position: absolute; inset: 0; } .post-summary p { margin: 0 0 0.5rem; } .post-summary .read-more { color: var(--link); font-size: 0.95rem; } /* Post */ .post header .home-link { margin: 0 0 2.5rem; font-size: 0.95rem; font-weight: 600; } .post h1 { font-size: 2rem; margin: 0.35rem 0 1.75rem; } .post h2 { font-size: 1.4rem; margin: 2.25rem 0 0.75rem; } .post h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; } .post p, .post ul, .post ol { margin: 0 0 1.25rem; } .post footer { margin-top: 3rem; } .post .byline { color: var(--muted); font-size: 0.9rem; } blockquote { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--border); } code { font-size: 0.88em; padding: 0.15em 0.35em; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, var(--background)); } pre { padding: 1rem; border-radius: 8px; overflow-x: auto; background: color-mix(in srgb, var(--ink) 8%, var(--background)); } pre code { padding: 0; background: none; } hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } img { max-width: 100%; height: auto; } /* Theme toggle: top-right corner of the content column. Hidden until the script wires it up — without JavaScript it can't do anything. */ .theme-toggle { position: absolute; top: 1.1rem; right: 1.5rem; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .theme-toggle[hidden] { display: none; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--link); border-color: var(--link); } .theme-toggle svg { width: 16px; height: 16px; display: block; } /* The icon shows where the click leads: moon in light, sun in dark. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }