@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap"); :root { --bg: #212529; --text: #f1f1f1; --link: #8ab4f8; --link-hover: #aecbfa; --border: #3a3f44; --code-bg: #2c3136; --muted: #9a9a9a; /* Pagefind's search UI reads these same variable names directly */ --pagefind-ui-primary: #f1f1f1; --pagefind-ui-text: #f1f1f1; --pagefind-ui-background: #212529; --pagefind-ui-border: #3a3f44; --pagefind-ui-tag: #2c3136; } /* Light theme: only applies when the toggle sets data-theme="light" on */ [data-theme="light"] { --bg: #ffffff; --text: #1a1a1a; --link: #1a56db; --link-hover: #1e40af; --border: #e0e0e0; --code-bg: #f4f4f4; --muted: #666666; --pagefind-ui-primary: #1a1a1a; --pagefind-ui-text: #1a1a1a; --pagefind-ui-background: #ffffff; --pagefind-ui-border: #e0e0e0; --pagefind-ui-tag: #f4f4f4; } html, body { margin: 0 auto; font-family: "IBM Plex Mono", monospace; } body { max-width: 700px; padding: 2rem 1rem 3rem; line-height: 1.6; background-color: var(--bg); color: var(--text); transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--link); } a:hover { color: var(--link-hover); } nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } nav a { margin-right: 1rem; text-decoration: none; color: var(--text); font-weight: 600; } nav a:hover { color: var(--link); } #theme-toggle { background: none; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 0.9rem; padding: 0.3rem 0.7rem; border-radius: 4px; cursor: pointer; height: 32px; box-sizing: border-box; } #theme-toggle:hover { border-color: var(--link); } h1, h2, h3 { font-weight: 700; } .hero { padding: 3rem 0 0; } .hero h1 { margin: 0 0 1rem; } .eyebrow { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.75rem; } .hero-lede { font-size: 1.2rem; color: var(--muted); } .home-section { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.5rem; } .home-section h2 { margin-top: 0; } .home-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .placeholder-section { color: var(--muted); } .page-intro { color: var(--muted); margin-bottom: 2rem; } .page-heading { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .page-heading h1 { margin: 0; } .post-list { list-style: none; padding: 0; } .post-list li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 0.5rem 0; } .date { color: var(--muted); font-size: 0.9em; } img { max-width: 100%; } code, pre { background-color: var(--code-bg); color: var(--text); } pre { padding: 1rem; overflow-x: auto; border-radius: 4px; } table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } th, td { text-align: left; padding: 0.6rem 1rem; vertical-align: top; border-bottom: 1px solid var(--border); } th { font-weight: 600; border-bottom: 2px solid var(--border); } #search { grid-column: 2; grid-row: 1; width: 320px; max-width: 100%; min-width: 0; justify-self: end; --pagefind-ui-font: inherit; --pagefind-ui-primary: var(--text); --pagefind-ui-text: var(--text); --pagefind-ui-background: transparent; --pagefind-ui-border: var(--border); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 4px; --pagefind-ui-scale: 0.6; } #search .pagefind-ui__search-input { height: 32px; box-sizing: border-box; padding: 0 2.2rem; border: 1px solid var(--border); border-radius: 4px; background-color: var(--bg) !important; color: var(--text) !important; font-family: inherit; font-size: 0.9rem; font-weight: 400; } #search .pagefind-ui__form::before { background-color: var(--muted) !important; } #search .pagefind-ui__search-clear { background-color: var(--bg) !important; color: var(--text) !important; } #search .pagefind-ui__search-input::placeholder { color: var(--muted); opacity: 1; } #search .pagefind-ui__search-input:focus { outline: 1px solid var(--link); outline-offset: 1px; } @media (max-width: 600px) { .page-heading { grid-template-columns: 1fr; } #search { grid-column: 1; grid-row: 2; width: 100%; justify-self: stretch; } }