/* ============================================================ Remko Weijnen's Blog — modern theme (Hugo) Tokens lifted from the design handoff; light default + dark via (the head script resolves system). ============================================================ */ /* IBM Plex Mono — self-hosted (latin + latin-ext), the only webfont we load. Body/headings use the native system stack; mono is for the wordmark, kickers, dates, counts and code blocks. */ @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/IBMPlexMono-Regular-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/IBMPlexMono-Medium-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/IBMPlexMono-SemiBold-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --page:#FFFFFF; --bar:#FFFFFF; --surface:#FAFAFA; --card-bg:#FAFAFA; --card-border:#ECECEC; --hair:#ECECEC; --bar-border:#E8E8E8; --input-bg:#F5F5F5; --input-border:#E5E5E5; --text:#242424; --head:#1f1f1f; --body:#383838; --secondary:#5a5a5a; --muted:#9a9a9a; --faint:#cfcfcf; --nav:#444; --accent:#0E8AA6; --accent-bg:#E2F1F3; --strip:#5E6A64; --avatar-bg:#0E8AA6; --avatar-fg:#ffffff; --hover:rgba(127,127,127,.10); --shadow-card:0 1px 3px rgba(0,0,0,.06); --shadow-pop:0 12px 34px rgba(0,0,0,.14); /* Body + headings render in the native UI stack — Segoe UI on Windows is ClearType-hinted, so it's noticeably crisper than the IBM Plex Sans webfont, especially in dark mode. IBM Plex Mono is kept for the signature mono accents. */ --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --font-scale:100%; } html[data-theme="dark"] { --page:#141414; --bar:#1F1F1F; --surface:#1A1A1A; --card-bg:#1A1A1A; --card-border:#2C2C2C; --hair:#2C2C2C; --bar-border:#303030; --input-bg:#262626; --input-border:#333; --text:#EDEDED; --head:#F2F2F2; --body:#C9C9C9; --secondary:#A6A6A6; --muted:#777; --faint:#444; --nav:#C8C8C8; --accent:#3FB6CE; --accent-bg:rgba(63,182,206,.14); --strip:#A6A6A6; --avatar-bg:#3FB6CE; --avatar-fg:#08252c; --hover:rgba(180,180,180,.10); --shadow-card:0 1px 3px rgba(0,0,0,.4); --shadow-pop:0 12px 34px rgba(0,0,0,.5); } /* Accessibility: High contrast — darken text and firm up borders/accents per theme (Settings toggle sets ). */ html[data-contrast="high"] { --body:#111111; --text:#000000; --head:#000000; --secondary:#242424; --muted:#4a4a4a; --faint:#808080; --nav:#141414; --card-border:#8a8a8a; --hair:#9a9a9a; --bar-border:#8a8a8a; --input-border:#7a7a7a; --accent:#0A6577; --accent-bg:#D2E8EC; } html[data-contrast="high"][data-theme="dark"] { --page:#000000; --bar:#0A0A0A; --surface:#0E0E0E; --card-bg:#0E0E0E; --body:#FFFFFF; --text:#FFFFFF; --head:#FFFFFF; --secondary:#E8E8E8; --muted:#C2C2C2; --faint:#8A8A8A; --nav:#FFFFFF; --card-border:#7A7A7A; --hair:#6A6A6A; --bar-border:#6A6A6A; --input-border:#8A8A8A; --accent:#5FD2EA; --accent-bg:rgba(95,210,234,.20); } /* the dark card border is otherwise hardcoded, so it would ignore high contrast */ html[data-contrast="high"][data-theme="dark"] .card { border-color:var(--card-border); } /* Accessibility: Reduce motion — honour the OS pref and the Settings toggle (). Near-instant so nothing appears broken. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } * { box-sizing:border-box; } html { font-size:var(--font-scale); } body { margin:0; background:var(--page); color:var(--text); --page-w:1080px; font-family:var(--font-ui); font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } body.is-about { --page-w:720px; } body.is-about .searchpill { display:none; } /* about masthead hides search (design) */ a { color:inherit; text-decoration:none; } .mono { font-family:var(--font-mono); } .pf-meta { display:none; } /* Pagefind facets — indexed from raw HTML, never shown */ @keyframes spin { to { transform:rotate(360deg); } } /* ---------- masthead ---------- */ .topbar { position:sticky; top:0; z-index:40; background:var(--page); } /* bar stays on screen */ .masthead { display:flex; align-items:center; gap:16px; height:68px; padding:0 32px; background:var(--bar); max-width:var(--page-w); margin:0 auto; box-sizing:border-box; border-bottom:1px solid var(--hair); } .brand { display:flex; align-items:center; gap:11px; flex-shrink:0; } .brand img { height:52px; width:auto; display:block; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22)); } .drawer .brand img { height:36px; } /* CRT phosphor r│w badge — onerror fallback only (shown if the PNG is missing) */ .logo-badge { width:50px; height:50px; border-radius:9px; flex-shrink:0; background:radial-gradient(120% 120% at 50% 30%, #123634 0%, #0b1f1e 70%, #081413 100%); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:18px; letter-spacing:1px; color:#5FE3C0; text-shadow:0 0 7px rgba(95,227,192,.75); box-shadow:0 1px 3px rgba(0,0,0,.25), inset 0 0 0 1px rgba(95,227,192,.16); } .logo-badge.sm { width:34px; height:34px; font-size:13px; border-radius:7px; } .brand .name { font-family:var(--font-mono); font-weight:600; font-size:19px; color:var(--text); letter-spacing:-.01em; position:relative; top:-4px; white-space:nowrap; } .brand .name .slash { color:var(--accent); } .searchpill { display:flex; align-items:center; gap:9px; width:280px; height:34px; padding:0 12px; margin-left:26px; flex-shrink:0; background:var(--input-bg); border:1px solid var(--input-border); border-radius:8px; color:var(--muted); font-size:13px; cursor:text; } .searchpill .mag { width:13px; height:13px; border:1.6px solid var(--muted); border-radius:50%; flex-shrink:0; } .searchpill .kbd { font-family:var(--font-mono); font-size:11px; color:var(--muted); border:1px solid var(--input-border); border-radius:4px; padding:0 5px; } .spacer { flex:1; } .nav { display:flex; gap:2px; } .nav a { padding:7px 12px; border-radius:6px; font-size:13.5px; color:var(--nav); } .nav a:hover { background:var(--hover); } .nav a.active { color:var(--accent); background:var(--accent-bg); font-weight:600; } .bar-div { width:1px; height:24px; background:var(--bar-border); } .iconbtn { width:34px; height:34px; border-radius:8px; border:1px solid var(--input-border); background:var(--page); display:flex; align-items:center; justify-content:center; color:var(--secondary); cursor:pointer; flex-shrink:0; } .iconbtn:hover { background:var(--hover); } /* mobile-only bar bits */ .m-only { display:none; } /* ---------- home hero (the tagline, relocated out of the masthead) ---------- */ .home-hero { max-width:var(--page-w); margin:0 auto; padding:36px 32px 4px; box-sizing:border-box; } .home-hero h1 { margin:0; max-width:none; white-space:nowrap; font-size:23px; font-weight:600; line-height:1.3; letter-spacing:-.02em; color:var(--head); } /* ---------- layout ---------- */ .wrap { max-width:var(--page-w); margin:0 auto; padding:38px 32px 60px; } /* hybrid home: main column + 250px sidebar */ .home { max-width:var(--page-w); margin:0 auto; padding:24px 32px 60px; display:grid; grid-template-columns:1fr 250px; column-gap:44px; align-items:start; } .home > *, .post-grid > * { min-width:0; } /* let main column shrink so the sidebar never overflows the bar */ .home .feat-label { grid-column:1; grid-row:1; margin-bottom:20px; } .home .feat-grid { grid-column:1; grid-row:2; margin-bottom:0; } .home .latest { grid-column:1; grid-row:3; margin-top:46px; } /* topics+archive sidebar spans the full column, sticky, top-aligned with > featured */ .home .side-modules { grid-column:2; grid-row:1 / span 3; align-self:start; position:sticky; top:88px; } .post-grid .rail { align-self:start; position:sticky; top:88px; } /* shared sidebar internals (home + post rail are identical) */ .side-modules { display:flex; flex-direction:column; gap:42px; } .feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:42px; } .card { display:flex; flex-direction:column; background:var(--page); border:1px solid var(--card-border); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.08); transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .card:hover { transform:translateY(-4px); box-shadow:0 6px 10px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.18); } .card:hover h2 { color:var(--accent); } /* dark mode: shadows vanish on near-black, so lean on bg contrast + border */ html[data-theme="dark"] .card { background:#1E1E1E; border-color:#383838; box-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.55); } html[data-theme="dark"] .card .cardimg { border-bottom-color:#383838; } html[data-theme="dark"] .card:hover { border-color:var(--accent); box-shadow:0 10px 18px rgba(0,0,0,.6), 0 30px 60px rgba(0,0,0,.7); } .card .cardimg { height:168px; border-bottom:1px solid var(--card-border); background-size:cover; background-position:center; background-image:repeating-linear-gradient(135deg,#EFF2F1,#EFF2F1 8px,#E8ECEB 8px,#E8ECEB 16px); } html[data-theme="dark"] .card .cardimg { background-image:repeating-linear-gradient(135deg,#23282A,#23282A 8px,#1E2224 8px,#1E2224 16px); } .card .cardbody { padding:18px 20px 20px; } .card .cat { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; } .card h2 { margin:0 0 9px; font-size:1.3125rem; font-weight:700; line-height:1.22; letter-spacing:-.02em; color:var(--head); } .card .excerpt { margin:0 0 12px; font-size:0.875rem; line-height:1.55; color:var(--secondary); } .card .meta { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); } .latest .prow { border-top:1px solid var(--hair); border-bottom:0; } .latest .prow:last-child { border-bottom:1px solid var(--hair); } .post-grid { display:grid; grid-template-columns:1fr 248px; gap:48px; } .narrow { max-width:760px; } /* ---------- home: kicker + list ---------- */ .kickerline { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; } .kicker { font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); } .kicker .arch { color:var(--faint); text-transform:none; letter-spacing:0; } .count { font-family:var(--font-mono); font-size:12px; color:var(--muted); } .prow { display:flex; gap:20px; align-items:flex-start; padding:22px 0; border-bottom:1px solid var(--hair); } .prow.featured { gap:26px; padding:0 0 30px; margin-bottom:8px; } .prow .body { flex:1; min-width:0; } .prow .cat { font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .prow.featured .cat { font-size:11.5px; margin-bottom:12px; } .prow h2, .prow h3 { margin:0 0 7px; color:var(--head); letter-spacing:-.01em; } .prow h2 { font-size:1.75rem; font-weight:700; line-height:1.18; letter-spacing:-.02em; margin-bottom:12px; } .prow h3 { font-size:1.15625rem; font-weight:600; line-height:1.3; } .prow a:hover h2, .prow a:hover h3 { color:var(--accent); } .prow .excerpt { margin:0 0 11px; font-size:0.90625rem; line-height:1.55; color:var(--secondary); } .prow.featured .excerpt { font-size:0.96875rem; line-height:1.6; margin-bottom:16px; color:var(--body); } .prow .meta { font-family:var(--font-mono); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .prow .meta .dot { color:var(--faint); } .prow .meta .tags { display:flex; gap:6px; margin-left:4px; color:var(--secondary); } .prow .meta .tags .h { color:var(--accent); } .thumb { flex-shrink:0; border:1px solid var(--card-border); border-radius:9px; background-size:cover; background-position:center; background-image:repeating-linear-gradient(135deg,#EFF2F1,#EFF2F1 8px,#E8ECEB 8px,#E8ECEB 16px); } html[data-theme="dark"] .thumb { background-image:repeating-linear-gradient(135deg,#23282A,#23282A 8px,#1E2224 8px,#1E2224 16px); } .prow .thumb { width:140px; height:92px; border-radius:9px; } .prow.featured .thumb { width:212px; height:138px; border-radius:10px; } .loader { display:flex; align-items:center; justify-content:center; gap:11px; margin-top:30px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); } .loader .sp { width:14px; height:14px; border:2px solid var(--card-border); border-top-color:var(--accent); border-radius:50%; display:inline-block; animation:spin .8s linear infinite; } /* ---------- sidebar (home + post rail) ---------- */ .rail { font-size:14px; } /* side-about + .side-modules; spacing via .side-modules margin-top */ .sidebar { font-size:14px; } .side-h { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:13px; } .side-about { background:var(--card-bg); border:1px solid var(--card-border); border-radius:12px; padding:18px; box-sizing:border-box; display:flex; flex-direction:column; box-shadow:var(--shadow-card); } .side-about .top { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .side-about .who { font-size:15px; font-weight:600; color:var(--text); } .side-about .roles { font-family:var(--font-mono); font-size:11px; line-height:1.65; color:var(--muted); margin-bottom:13px; } .side-about p { margin:0; font-size:13px; line-height:1.6; color:var(--secondary); } .side-about .links { margin-top:auto; padding-top:14px; border-top:1px solid var(--card-border); display:flex; flex-wrap:wrap; gap:16px; font-family:var(--font-mono); font-size:12px; } .side-about .links a { color:var(--accent); } .side-about .links a:hover { text-decoration:underline; } .topics { display:flex; flex-direction:column; } .topics a { display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; color:var(--body); border-bottom:1px solid var(--hair); } .topics a:last-child { border-bottom:0; } .topics a:hover { color:var(--accent); } .topics .n { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); } .arch-list { display:flex; flex-direction:column; } .arch-list a { display:flex; justify-content:space-between; padding:5px 0; font-family:var(--font-mono); font-size:13px; color:var(--body); } .arch-list a:hover { color:var(--accent); } .arch-list .n { color:var(--muted); } .arch-all { display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:12.5px; color:var(--accent); } /* avatar: image with initials-tile fallback (until remko-avatar.png is dropped in) */ .avatar-img { border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--input-bg); display:block; } .avatar { border-radius:50%; background:var(--avatar-bg); color:var(--avatar-fg); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; } .side-about .avatar-img, .side-about .avatar { width:46px; height:46px; font-size:15px; } /* ---------- about page ---------- */ .about-page { max-width:var(--page-w); margin:0 auto; padding:52px 32px 72px; } .about-page .kick { font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; } .about-page .head { display:flex; align-items:center; gap:16px; margin-bottom:30px; } .about-page .avatar-img, .about-page .avatar { width:64px; height:64px; font-size:20px; } .about-page h1 { margin:0; font-size:1.875rem; font-weight:700; letter-spacing:-.02em; color:var(--head); } .about-page .rule { height:1px; background:var(--hair); margin-bottom:30px; } .about-page p { margin:0 0 20px; font-size:1.03125rem; line-height:1.72; color:var(--body); } .about-page .disclaimer { font-size:13.5px; line-height:1.6; color:var(--muted); margin-bottom:32px; } .about-page .find { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:24px; border-top:1px solid var(--hair); font-family:var(--font-mono); font-size:13.5px; color:var(--secondary); } .about-page .find a { color:var(--accent); } .about-page .find .dot { color:var(--faint); } /* ---------- per-post "written by" footer (replaces the sidebar about card) ---------- */ .author-foot { display:flex; gap:18px; align-items:flex-start; margin-top:44px; padding-top:28px; border-top:1px solid var(--hair); } .author-foot .avatar-img, .author-foot .avatar { width:56px; height:56px; font-size:18px; } .author-foot .who { min-width:0; } .author-foot .side-h { margin-bottom:6px; } .author-foot .name { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; } .author-foot p { margin:0 0 12px; font-size:14px; line-height:1.6; color:var(--secondary); } .author-foot .links { display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; font-weight:500; } .author-foot .links a { color:var(--accent); } .author-foot .links a:hover { text-decoration:underline; } /* ---------- article content (reused converter output) ---------- */ .article .cat { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .article h1 { font-size:2.125rem; font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:0 0 14px; color:var(--head); } .article .byline { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; color:var(--muted); margin-bottom:20px; } .article .byline .dot { color:var(--faint); } /* Reading text is in rem (1rem = 16px at 100%) so the Settings "Text size" control — which scales the root font-size via --font-scale — actually resizes it. Chrome (masthead, nav, cards) stays in px on purpose, so only the article scales. */ .post-content { font-size:1.03125rem; line-height:1.72; color:var(--body); overflow-wrap:break-word; } .post-content h2 { font-size:1.375rem; margin-top:1.7em; color:var(--head); } .post-content h3 { font-size:1.125rem; margin-top:1.4em; color:var(--head); } .post-content a { color:var(--accent); } .post-content a:hover { text-decoration:underline; } .post-content img { max-width:100%; height:auto; border-radius:8px; } .post-content figure { margin:1.7em 0; text-align:center; } .post-content figcaption { margin-top:9px; font-size:.85em; line-height:1.5; color:var(--muted); font-style:italic; } .post-content a.glightbox img { border:1px solid var(--card-border); cursor:zoom-in; } /* dead image (flagged by tools/check_images.py): dashed placeholder + "broken" tag */ .post-content img[data-missing] { min-width:120px; min-height:80px; border:1px dashed var(--card-border); background:var(--surface); border-radius:8px; position:relative; } .post-content img[data-missing]::after { content:"image unavailable \2014 follow-up"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:6px; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--muted); } .post-content :not(pre) > code { background:var(--input-bg); border:1px solid var(--input-border); padding:.08em .35em; border-radius:5px; font-family:var(--font-mono); font-size:.86em; overflow-wrap:anywhere; } .post-content blockquote { border-left:3px solid var(--accent); margin:1em 0; padding:.2em 1em; color:var(--secondary); } .highlight { background:var(--surface); border:1px solid var(--card-border); border-radius:8px; padding:12px 14px; overflow-x:auto; margin:1.3em 0; } .highlight pre, .highlight .chroma { margin:0; background:none !important; font-family:var(--font-mono); font-size:13.5px; line-height:1.5; } /* syntax tokens (Chroma classes) — VS Light (default) + VS Code Dark */ .chroma { color:#1f1f1f; } .chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr { color:#0000FF; } .chroma .kt,.chroma .nc,.chroma .nn,.chroma .nb,.chroma .bp { color:#2B91AF; } .chroma .s,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .dl,.chroma .sd,.chroma .s2,.chroma .se,.chroma .sh,.chroma .si,.chroma .sx,.chroma .sr,.chroma .s1,.chroma .ss { color:#A31515; } .chroma .c,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .c1,.chroma .cs { color:#008000; font-style:italic; } .chroma .nf,.chroma .fm { color:#795E26; } .chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo,.chroma .il { color:#098658; } .chroma .o,.chroma .ow,.chroma .p { color:#1f1f1f; } .chroma .nt { color:#800000; } .chroma .na { color:#E50000; } .chroma .gp { color:#9a9a9a; } html[data-theme="dark"] .chroma { color:#D4D4D4; } html[data-theme="dark"] .chroma .k,html[data-theme="dark"] .chroma .kc,html[data-theme="dark"] .chroma .kd,html[data-theme="dark"] .chroma .kn,html[data-theme="dark"] .chroma .kp,html[data-theme="dark"] .chroma .kr { color:#569CD6; } html[data-theme="dark"] .chroma .kt,html[data-theme="dark"] .chroma .nc,html[data-theme="dark"] .chroma .nn,html[data-theme="dark"] .chroma .nb,html[data-theme="dark"] .chroma .bp { color:#4EC9B0; } html[data-theme="dark"] .chroma .s,html[data-theme="dark"] .chroma .sa,html[data-theme="dark"] .chroma .sb,html[data-theme="dark"] .chroma .sc,html[data-theme="dark"] .chroma .dl,html[data-theme="dark"] .chroma .sd,html[data-theme="dark"] .chroma .s2,html[data-theme="dark"] .chroma .se,html[data-theme="dark"] .chroma .sh,html[data-theme="dark"] .chroma .si,html[data-theme="dark"] .chroma .sx,html[data-theme="dark"] .chroma .sr,html[data-theme="dark"] .chroma .s1,html[data-theme="dark"] .chroma .ss { color:#CE9178; } html[data-theme="dark"] .chroma .c,html[data-theme="dark"] .chroma .ch,html[data-theme="dark"] .chroma .cm,html[data-theme="dark"] .chroma .cp,html[data-theme="dark"] .chroma .cpf,html[data-theme="dark"] .chroma .c1,html[data-theme="dark"] .chroma .cs { color:#6A9955; } html[data-theme="dark"] .chroma .nf,html[data-theme="dark"] .chroma .fm { color:#DCDCAA; } html[data-theme="dark"] .chroma .m,html[data-theme="dark"] .chroma .mb,html[data-theme="dark"] .chroma .mf,html[data-theme="dark"] .chroma .mh,html[data-theme="dark"] .chroma .mi,html[data-theme="dark"] .chroma .mo,html[data-theme="dark"] .chroma .il { color:#B5CEA8; } html[data-theme="dark"] .chroma .o,html[data-theme="dark"] .chroma .ow,html[data-theme="dark"] .chroma .p { color:#D4D4D4; } html[data-theme="dark"] .chroma .nt { color:#569CD6; } html[data-theme="dark"] .chroma .na { color:#9CDCFE; } html[data-theme="dark"] .chroma .gp { color:#777; } .code-title { font-family:var(--font-mono); font-size:12px; color:var(--muted); margin:1.4em 0 -.7em; } /* code card: header strip (filename + lang pill + Copy / Download) over the highlighted body */ .codecard { border:1px solid var(--card-border); border-radius:8px; overflow:hidden; margin:1.4em 0; background:var(--surface); } .codehead { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px 7px 14px; background:var(--card-bg); border-bottom:1px solid var(--card-border); font-family:var(--font-mono); font-size:12px; } .codefile { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .codetools { display:flex; align-items:center; gap:8px; flex-shrink:0; } .codelang { color:var(--accent); background:var(--accent-bg); border-radius:5px; padding:1px 8px; font-size:11px; } .codebtn { font-family:var(--font-mono); font-size:11.5px; color:var(--secondary); background:none; border:1px solid var(--card-border); border-radius:5px; padding:2px 9px; cursor:pointer; text-decoration:none; line-height:1.6; } .codebtn:hover { color:var(--accent); border-color:var(--accent); } .codecard .highlight { border:0; border-radius:0; margin:0; } .download { display:inline-flex; align-items:center; gap:8px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:9px 16px; margin:8px 0; font-family:var(--font-mono); font-weight:600; font-size:13.5px; } .download::before { content:"\2193"; color:var(--accent); } /* recovered-but-lost download (e.g. dead ShareFile link with no backup): greyed, non-clickable */ .dl-unavailable { color:var(--muted); text-decoration:line-through; cursor:not-allowed; } .dl-unavailable::after { content:" (unavailable)"; font-family:var(--font-mono); font-size:.82em; text-decoration:none; } .post-tags { margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; } .post-tags .tag { font-family:var(--font-mono); font-size:12px; color:var(--secondary); border:1px solid var(--card-border); border-radius:7px; padding:3px 10px; } .post-tags .tag .h { color:var(--accent); } /* comments */ .comments { margin-top:48px; border-top:1px solid var(--hair); padding-top:18px; } .comments h2 { font-size:20px; color:var(--head); } .comment-list { list-style:none; padding:0; } .comment { background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:10px 16px; margin:12px 0; } .comment.depth-1 { margin-left:28px; } .comment.depth-2 { margin-left:56px; } .comment.depth-3 { margin-left:84px; } .comment-meta { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-bottom:4px; } .comment-author { font-weight:700; color:var(--text); } /* Some ancient comments are pasted code dumps with no spaces to wrap on (e.g. a long hex blob), which otherwise widen the whole page; overflow-wrap breaks them so they stay in the column. (No height cap: this post alone has ~20 long code-sharing comments, so a scrollbox would box legitimate comments, not just rare outliers.) */ .comment-body { font-size:0.90625rem; line-height:1.6; color:var(--body); overflow-wrap:anywhere; } /* page titles for list/search/archives */ .page-title, .list-title { font-size:1.875rem; font-weight:700; letter-spacing:-.02em; color:var(--head); margin:0 0 18px; } .post-list { list-style:none; padding:0; } .post-list li { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--hair); } .post-list time, .search-results time, .muted { color:var(--muted); font-family:var(--font-mono); font-size:12px; } .search-page-form input, .search-results { width:100%; } .search-page-form input { font:inherit; padding:12px 16px; border:1px solid var(--input-border); border-radius:8px; background:var(--input-bg); color:var(--text); } .search-hint { margin-top:10px; font-family:var(--font-mono); font-size:12px; color:var(--muted); } .search-hint code { background:var(--input-bg); border:1px solid var(--input-border); border-radius:4px; padding:1px 5px; color:var(--secondary); } .search-results { list-style:none; padding:0; margin-top:22px; } .search-results li { padding:14px 0; border-bottom:1px solid var(--hair); } .search-results .sr-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .search-results .sr-top a { font-size:16px; font-weight:600; color:var(--head); } .search-results .sr-top a:hover { color:var(--accent); } .search-results .sr-excerpt { margin:6px 0 0; font-size:14px; line-height:1.6; color:var(--secondary); } .search-results .sr-excerpt mark { background:var(--accent-bg); color:var(--accent); padding:0 2px; border-radius:3px; } .search-results .no-results { color:var(--muted); padding:14px 0; } .archive-year { margin:1.4em 0 .4em; padding-bottom:4px; border-bottom:2px solid var(--hair); color:var(--head); } .archive-list { list-style:none; padding:0; } .archive-list li { padding:5px 0; display:flex; gap:12px; } .archive-list time { color:var(--muted); font-family:var(--font-mono); font-size:12px; min-width:56px; } .pagination { display:flex; justify-content:space-between; gap:12px; margin-top:24px; font-family:var(--font-mono); font-size:13px; } .pagination a { padding:8px 14px; border:1px solid var(--card-border); border-radius:8px; color:var(--nav); } .pagination .disabled { color:var(--muted); opacity:.45; padding:8px 14px; } /* ---------- mobile drawer + settings popover ---------- */ .drawer-backdrop, .settings-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:60; } .drawer { position:fixed; top:0; right:0; width:330px; max-width:88vw; height:100%; background:var(--page); border-left:1px solid var(--card-border); z-index:70; transform:translateX(100%); transition:transform .22s ease; overflow-y:auto; padding:18px; } .drawer.open { transform:translateX(0); } .drawer-backdrop.open, .settings-backdrop.open { display:block; } .drawer .d-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; } .drawer .d-close { font-size:22px; color:var(--secondary); cursor:pointer; background:none; border:0; } .drawer .d-search { display:flex; align-items:center; gap:9px; height:42px; padding:0 13px; background:var(--input-bg); border:1px solid var(--input-border); border-radius:9px; color:var(--muted); font-size:14px; margin-bottom:22px; } .drawer .d-nav { display:flex; flex-direction:column; gap:2px; margin-bottom:22px; } .drawer .d-nav a { padding:11px 12px; border-radius:8px; font-size:17px; color:var(--nav); } .drawer .d-nav a.active { color:var(--accent); background:var(--accent-bg); font-weight:600; } .drawer .d-row { display:flex; align-items:center; justify-content:space-between; padding:4px 2px 20px; } .drawer .d-div { height:1px; background:var(--hair); margin-bottom:20px; } .seg { display:inline-flex; gap:3px; background:var(--input-bg); border-radius:8px; padding:3px; } .seg button { font:inherit; font-size:12.5px; border:0; cursor:pointer; padding:5px 13px; border-radius:6px; color:var(--secondary); background:transparent; } .seg button.active { color:var(--text); background:var(--page); box-shadow:0 1px 2px rgba(0,0,0,.1); font-weight:600; } .settings-pop { display:none; position:fixed; top:60px; right:24px; width:300px; background:var(--page); border:1px solid var(--card-border); border-radius:12px; box-shadow:var(--shadow-pop); z-index:80; padding:16px; } .settings-pop.open { display:block; } .settings-pop h4 { font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; } .settings-pop .grp { margin-bottom:16px; } .settings-pop .opt { display:flex; align-items:center; justify-content:space-between; gap:12px; } .settings-pop .opt + .opt { margin-top:8px; } .settings-pop .opt > span { font-size:13.5px; color:var(--body); } .settings-pop .foot { font-family:var(--font-mono); font-size:11px; color:var(--muted); border-top:1px solid var(--hair); padding-top:10px; } .loadmore { font:inherit; font-size:13.5px; font-weight:600; color:var(--accent); background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:9px 20px; cursor:pointer; } .loadmore:hover { border-color:var(--accent); } /* ---------- responsive ---------- */ @media (max-width:880px) { .masthead { height:56px; padding:0 14px; gap:10px; } .brand img { height:38px; border-radius:7px; } .brand .name { font-size:15px; top:-3px; } .searchpill, .nav, .bar-div, .cog { display:none; } .m-only { display:flex; } .home-hero { padding:18px 14px 0; } .home-hero h1 { font-size:18px; white-space:normal; } .wrap, .about-page { padding:18px 14px 26px; } .home { grid-template-columns:1fr; padding:18px 14px 26px; } .home .side-modules { display:none; } /* topics/archive move into the drawer on mobile */ .home .latest { margin-top:30px; } .post-grid { grid-template-columns:1fr; gap:0; } .feat-grid { grid-template-columns:1fr; gap:18px; margin-bottom:30px; } .rail { display:none; } /* rail content lives in the drawer on mobile */ .prow.featured { flex-direction:column; gap:0; } .prow.featured .thumb { width:100%; height:178px; order:-1; margin-bottom:14px; } .prow.featured h2 { font-size:1.375rem; } .prow .thumb { width:78px; height:78px; } .prow h3 { font-size:1rem; } .article h1 { font-size:1.625rem; } } @media (min-width:881px) { .drawer, .drawer-backdrop { display:none !important; } }