/* wclarke.net - one stylesheet for the whole site (hand-written pages and ssssg/pandoc output alike). Quiet ink-on-paper: system serif for prose, monospace for the machine-flavoured details, no webfonts. Theme follows the OS unless data-theme on says otherwise. */ :root { color-scheme: light; --bg: #faf8f3; --fg: #23252a; --muted: #71695c; --accent: #8f4222; --line: #e3ddd0; --code-bg: #f1ede3; --img-dim: 1; --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "Ubuntu Mono", monospace; } :root[data-theme="dark"] { color-scheme: dark; --bg: #191a1c; --fg: #d8d4ca; --muted: #918a7c; --accent: #d0885a; --line: #333129; --code-bg: #232420; --img-dim: 0.9; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #191a1c; --fg: #d8d4ca; --muted: #918a7c; --accent: #d0885a; --line: #333129; --code-bg: #232420; --img-dim: 0.9; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 1.5rem 1.25rem 4rem; background: var(--bg); color: var(--fg); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.65; } .wrap { max-width: 42rem; margin: 0 auto; } ::selection { background: var(--accent); color: var(--bg); } /* links: quiet underline, brightens on hover */ a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 0.15em; } a:hover { text-decoration-color: var(--accent); } /* header + nav */ header.site { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; } header.site .brand { font-weight: bold; font-size: 1.1rem; } header.site .brand a { color: var(--fg); text-decoration: none; } header.site nav { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; } header.site nav a { color: var(--muted); text-decoration: none; margin-left: 1.1em; } header.site nav a:first-child { margin-left: 0; } header.site nav a:hover { color: var(--accent); } button.theme-toggle { font-family: var(--mono); font-size: 0.9rem; line-height: 1; background: none; border: 0; padding: 0; margin-left: 1.1em; color: var(--muted); cursor: pointer; } button.theme-toggle:hover { color: var(--accent); } /* headings */ h1, h2, h3, h4 { line-height: 1.2; margin: 2.2em 0 0.5em; } h1 { font-size: 1.8rem; margin-top: 0; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } /* pandoc's title block on generated posts */ #title-block-header { margin-bottom: 1.5rem; } #title-block-header h1 { margin: 0 0 0.2em; } #title-block-header .date, .date { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } .lede { font-size: 1.15rem; } .muted { color: var(--muted); } .section-lede { margin-top: -0.2em; } p { margin: 1em 0; } /* the machine-flavoured details */ .tag { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5em; } /* card shelf (games, featured things) */ .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; margin: 1.5rem 0; } .card { border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem; } .card:hover { border-color: var(--accent); } .card h3 { margin: 0 0 0.15em; } .card p { margin: 0; font-size: 0.9rem; } /* lists of things */ ul.things { list-style: none; padding: 0; } ul.things > li { margin: 0 0 1rem; padding-left: 1.2em; position: relative; } ul.things > li::before { content: "\25B8"; position: absolute; left: 0; color: var(--muted); } ul, ol { padding-left: 1.4em; } li { margin: 0.3em 0; } blockquote { margin: 1.5em 0; padding: 0.1em 0 0.1em 1.1em; border-left: 2px solid var(--line); color: var(--muted); } code { font-family: var(--mono); font-size: 0.85em; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; } pre { background: var(--code-bg); padding: 0.9em 1.1em; border-radius: 4px; overflow-x: auto; line-height: 1.5; } pre code { background: none; padding: 0; font-size: 0.85rem; } img { display: block; max-width: 100%; margin: 1.5em auto; border-radius: 4px; filter: brightness(var(--img-dim)); } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; } table { border-collapse: collapse; margin: 1.5em 0; font-size: 0.95em; } th, td { border: 1px solid var(--line); padding: 0.4em 0.8em; text-align: left; } footer.site { margin-top: 4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } footer.site a { color: var(--muted); } footer.site a:hover { color: var(--accent); } @media (max-width: 480px) { body { font-size: 1rem; padding-top: 1rem; } .shelf { grid-template-columns: 1fr; } h1 { font-size: 1.5rem; } }