/* Hand-written companion to assets/styles..css. * * WHY THIS FILE EXISTS: the Tailwind sheet next to it is a PURGED build output * containing only the ~154 utilities the eight exported pages happened to use, and * the React project that produced it is not in this repo. Classes it never emitted * (list-disc, underline, leading-relaxed, mb-4, ...) silently do nothing. So every * style for markup we hand-write -- the contact form, the theme toggle, and the whole * generated blog -- lives here instead. * * Everything below is expressed in the build's own custom properties (--foreground, * --rule, --surface, ...). Those are redefined wholesale by .dark on , so this * file follows the theme for free and must never hardcode a colour. */ /* Let form controls, scrollbars and the like follow the active theme. */ :root { color-scheme: light; } .dark { color-scheme: dark; } /* ---------- Theme toggle ---------- */ /* Show the icon for the theme you would switch TO: a moon while light, a sun while * dark. Without this both SVGs render side by side. */ #theme-toggle .icon-sun { display: none; } .dark #theme-toggle .icon-moon { display: none; } .dark #theme-toggle .icon-sun { display: inline-block; } /* ---------- Contact form ---------- */ /* Honeypot. Hidden by OFF-SCREEN POSITIONING, deliberately not display:none, * visibility:hidden or type=hidden: a bot parsing the DOM must still see a normal, * focusable, autofillable field and fill it in. n8n drops any submission that * arrives with this populated (and answers {ok:true} so the bot learns nothing). * The !importants keep a utility class from un-hiding it. */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Reserve the line height so the card does not jump when a message appears. */ .form-status { min-height: 1.25em; color: var(--muted-foreground); } .form-status.success { color: var(--accent); } .form-status.error { color: var(--destructive); } #contact-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------- Blog: index ---------- */ .blog-card { display: block; padding: 1.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); transition: border-color 0.2s ease, transform 0.2s ease; } .blog-card:hover { border-color: var(--accent); } .blog-card h2 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; } .blog-card-meta, .article-meta { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted-foreground); } .blog-card-meta { margin-top: 0.75rem; } .blog-card-excerpt { margin-top: 1rem; color: var(--muted-foreground); } .blog-card-more { display: inline-block; margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); } .blog-empty { color: var(--muted-foreground); } /* ---------- Blog: article prose ---------- */ /* The Tailwind build ships a full Preflight reset -- headings inherit font-size and * weight, lists have list-style:none, links inherit text-decoration. Markdown from * Directus arrives as plain semantic HTML, so it needs real element styling here. * Tag list mirrors ALLOWED_TAGS in blog-generator/generate.py. */ .article-body { line-height: 1.75; } .article-body > * + * { margin-top: 1.25rem; } .article-body h2, .article-body h3, .article-body h4 { font-family: var(--font-display); line-height: 1.25; margin-top: 2.5rem; } .article-body h2 { font-size: 1.875rem; } .article-body h3 { font-size: 1.375rem; } .article-body h4 { font-size: 1.125rem; } .article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; } .article-body a:hover { text-decoration-thickness: 2px; } .article-body ul, .article-body ol { padding-left: 1.5rem; } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; } .article-body li { margin-top: 0.5rem; } .article-body li::marker { color: var(--muted-foreground); } .article-body strong { font-weight: 650; } .article-body em { font-style: italic; } .article-body code { font-family: var(--font-mono); font-size: 0.875em; padding: 0.15em 0.4em; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); } .article-body pre { padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow-x: auto; } .article-body pre code { padding: 0; border: 0; background: none; font-size: 0.875rem; } .article-body blockquote { padding-left: 1.25rem; border-left: 2px solid var(--accent); color: var(--muted-foreground); } .article-body hr { border-top: 1px solid var(--rule); margin: 2.5rem 0; } .article-body img { max-width: 100%; height: auto; border-radius: var(--radius); } /* Wide tables scroll inside their own box rather than the page. */ .article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.9375rem; } .article-body th, .article-body td { padding: 0.6rem 0.9rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; } .article-body th { background: var(--surface); font-weight: 600; } /* ---------- Blog: article furniture ---------- */ .article-sources { margin-top: 3rem; } .article-sources h2 { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted-foreground); } .article-sources ul { margin-top: 1rem; padding-left: 1.5rem; list-style: decimal; } .article-sources li { margin-top: 0.5rem; } .article-sources a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; } .article-disclaimer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--muted-foreground); } /* ---------- Keyboard focus ---------- */ /* Preflight strips the UA outline on some controls; put a visible one back. */ :is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }