/* http://colorschemedesigner.com/#2N42b8otdw0w0 */ /* Instant view transitions for micromorph SPA navigation */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; } /* ----- CSS Custom Properties ----- */ :root { /* Page background and structure */ --color-page-bg: #728597; --color-content-bg: #ffffff; --color-banner-bg: #5C6771; --color-nav-bg: #4C5761; /* Text colors */ --color-text: #000000; --color-text-muted: #666666; /* Link colors */ --color-link: #254562; --color-link-hover: #052542; /* Navigation */ --color-nav-text: #ffffff; --color-nav-border: #4C5761; --color-nav-hover-bg: #254562; --color-nav-hover-border: #052542; /* Code and highlights */ --color-code-bg: #f5f5f5; --color-code-border: #000000; --color-blockquote-border: #cccccc; /* Shadows */ --shadow-main: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.12); } /* ----- Dark Theme Variables ----- */ /* Used by both auto (prefers-color-scheme) and manual (data-theme) modes */ /* Red accents chosen for reduced blue light at night */ :root { --color-page-bg-dark: #1a1a1a; --color-content-bg-dark: #1e1e1e; --color-banner-bg-dark: #2a1a1a; --color-nav-bg-dark: #1a1a1a; --color-text-dark: #e8e8e8; --color-text-muted-dark: #a8a8a8; --color-link-dark: #e07a7a; --color-link-hover-dark: #f0a0a0; --color-nav-text-dark: #e8e8e8; --color-nav-border-dark: #1a1a1a; --color-nav-hover-bg-dark: #4a2525; --color-nav-hover-border-dark: #e07a7a; --color-code-bg-dark: #242424; --color-code-border-dark: #444444; --color-blockquote-border-dark: #6b4444; --shadow-main-dark: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-small-dark: 0 1px 3px rgba(0, 0, 0, 0.3); } /* ----- Auto Dark Theme (follows OS preference) ----- */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --color-page-bg: var(--color-page-bg-dark); --color-content-bg: var(--color-content-bg-dark); --color-banner-bg: var(--color-banner-bg-dark); --color-nav-bg: var(--color-nav-bg-dark); --color-text: var(--color-text-dark); --color-text-muted: var(--color-text-muted-dark); --color-link: var(--color-link-dark); --color-link-hover: var(--color-link-hover-dark); --color-nav-text: var(--color-nav-text-dark); --color-nav-border: var(--color-nav-border-dark); --color-nav-hover-bg: var(--color-nav-hover-bg-dark); --color-nav-hover-border: var(--color-nav-hover-border-dark); --color-code-bg: var(--color-code-bg-dark); --color-code-border: var(--color-code-border-dark); --color-blockquote-border: var(--color-blockquote-border-dark); --shadow-main: var(--shadow-main-dark); --shadow-small: var(--shadow-small-dark); } } /* ----- Manual Dark Theme (user override) ----- */ html[data-theme="dark"] { --color-page-bg: var(--color-page-bg-dark); --color-content-bg: var(--color-content-bg-dark); --color-banner-bg: var(--color-banner-bg-dark); --color-nav-bg: var(--color-nav-bg-dark); --color-text: var(--color-text-dark); --color-text-muted: var(--color-text-muted-dark); --color-link: var(--color-link-dark); --color-link-hover: var(--color-link-hover-dark); --color-nav-text: var(--color-nav-text-dark); --color-nav-border: var(--color-nav-border-dark); --color-nav-hover-bg: var(--color-nav-hover-bg-dark); --color-nav-hover-border: var(--color-nav-hover-border-dark); --color-code-bg: var(--color-code-bg-dark); --color-code-border: var(--color-code-border-dark); --color-blockquote-border: var(--color-blockquote-border-dark); --shadow-main: var(--shadow-main-dark); --shadow-small: var(--shadow-small-dark); } /* Self-hosted fonts with font-display: fallback to avoid FOUT */ @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 400; font-display: fallback; src: url('/theme/fonts/noto-serif-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Noto Serif'; font-style: italic; font-weight: 400; font-display: fallback; src: url('/theme/fonts/noto-serif-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 700; font-display: fallback; src: url('/theme/fonts/noto-serif-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Noto Serif'; font-style: italic; font-weight: 700; font-display: fallback; src: url('/theme/fonts/noto-serif-latin-700-italic.woff2') format('woff2'); } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 400; font-display: fallback; src: url('/theme/fonts/source-code-pro-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 700; font-display: fallback; src: url('/theme/fonts/source-code-pro-latin-700-normal.woff2') format('woff2'); } /* HTML 5 support */ header, section, footer, aside, nav, article, figure { display: block; } * { margin: 0; padding: 0; } .print-only { display: none; } /* Link footnotes are hidden on screen, shown only in print */ .link-footnotes { display: none; } .link-footnote-ref { display: none; } blockquote, pre, pre *, code, code * { font-size: 95%; } code, code *, pre, pre * { font-family: "Source Code Pro", monospace; } ul, ol { padding-left: 1.5rem; } canvas, img, video { border-style:none; max-width:100%; height: auto; } body{ font: 100%/1.5 "Noto Serif", Georgia, serif; text-rendering: optimizeLegibility; background-color: var(--color-page-bg); color: var(--color-text); } a, a:link, a:visited { color: var(--color-link); } a:hover { color: var(--color-link-hover); } /* Accessibility - visible focus states */ a:focus { outline: 2px solid var(--color-link); outline-offset: 2px; } a:focus:not(:focus-visible) { outline: none; } a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; } #banner, #menu, #content{ max-width: 50rem; margin: 0 auto; background-color: var(--color-content-bg); box-shadow: var(--shadow-main); box-sizing: border-box; } /* ----- header ----- */ #banner{ display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding: 1rem 1.5rem; border-radius: 4px 4px 0 0; background-color: var(--color-banner-bg); } #banner a.logo{ line-height: 0; } #banner .social-icon{ width: 48px; height: 48px; } #banner .social-icon img{ width: 48px; height: 48px; border-radius: 3px; box-shadow: var(--shadow-small); } /* ----- Theme Toggle ----- */ #banner .header-controls { display: flex; align-items: center; gap: 0.75rem; } #theme-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; } #theme-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } #theme-toggle:focus { outline: 2px solid var(--color-nav-text); outline-offset: 2px; } #theme-toggle:focus:not(:focus-visible) { outline: none; } #theme-toggle:focus-visible { outline: 2px solid var(--color-nav-text); outline-offset: 2px; } #theme-toggle svg { width: 1.5rem; height: 1.5rem; stroke: #ffffff; } /* Show/hide icons based on theme */ #theme-toggle .icon-sun, #theme-toggle .icon-moon, #theme-toggle .icon-auto { display: none; } /* Auto mode (no data-theme attribute) */ html:not([data-theme]) #theme-toggle .icon-auto { display: block; } /* Light mode */ html[data-theme="light"] #theme-toggle .icon-sun { display: block; } /* Dark mode */ html[data-theme="dark"] #theme-toggle .icon-moon { display: block; } /* ----- Navigation ----- */ #menu { display: block; width: 100%; background-color: var(--color-nav-bg); } #menu ul{ display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; font-size: 1.125rem; } #menu li { margin: 0; } #menu a, #menu a:link, #menu a:visited{ display: flex; align-items: center; height: 3rem; padding: 0 1.5rem; text-decoration: none; border: 1px solid var(--color-nav-border); color: var(--color-nav-text); } #menu a:hover, #menu .active a { background-color: var(--color-nav-hover-bg); border-color: var(--color-nav-hover-border); } #menu a:focus { outline: 2px solid var(--color-nav-text); outline-offset: -2px; } #menu a:focus:not(:focus-visible) { outline: none; } #menu a:focus-visible { outline: 2px solid var(--color-nav-text); outline-offset: -2px; } #menu .title-emoji { width: 32px; height: 32px; } /* ----- div.main ----- */ #post-list { list-style: none; } article { margin-bottom: 2.5rem; } #content{ padding: 2rem; margin-bottom: 1rem; border-radius: 0 0 4px 4px; } p, blockquote, hr, ul, ol { margin-bottom: 1rem; line-height: 1.7; } li { margin-bottom: 0.25rem; line-height: 1.7; } sup{ line-height: 0; } hr{ width:25%; margin-left: auto; margin-right: auto; } blockquote{ padding: 0 1.5rem; border-left: 0.25rem solid var(--color-blockquote-border); } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; margin-top: 1.5rem; line-height: 1.3; } section#content article:first-of-type { /* Negative margin offsets half-leading from line-height: 1.3 */ margin-top: -29px; } footer#contentinfo { margin-bottom: -42px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ text-decoration: none; } h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.125rem; } h4, h5, h6 { font-size: 1rem; } .center{ display: block; margin-left: auto; margin-right: auto; } .right{ display: block; float: right; margin: 1rem; } .left{ display: block; float: left; margin: 1rem; } pre { white-space: pre-wrap; word-wrap: break-word; padding: 1rem; margin: 0.5rem 0; border-radius: 4px; background-color: var(--color-code-bg); } .codehilite { border: 1px solid var(--color-code-border); } .caption, figcaption { text-align: center; font-style: italic; margin-top: 0.5rem; margin-bottom: 1rem; color: var(--color-text-muted); } #content table { margin: 1rem auto; max-width: 100%; border-collapse: collapse; } #content table td, #content table th { text-align: left; padding: 0.5rem 1rem; } .footnote, .footnote b { font-size: 0.875rem; } /* ----- footer ----- */ #contentinfo{ text-align: center; padding: 1.5rem 0; border-top: 1px solid var(--color-blockquote-border); margin-top: 2rem; } #contentinfo p{ font-size: 0.875rem; color: var(--color-text-muted); } /* ----- Blog ----- */ .entry-title { font-weight: bold; font-size: 1.25rem; } .entry-title a{ font-size: 1.25rem; text-decoration: none; } .entry-byline{ margin-top: 0.25rem; } .post-info { margin-bottom: 0.5rem; } .entry-byline { font-size: 0.875rem; color: var(--color-text-muted); } .published { border-style: none; } .paginator { margin-bottom: 1.5rem; } /* ---- LaTeX logo ----- */ .latex { font-family: Times, "Times New Roman", serif; letter-spacing: 1px; } .latex sup { text-transform: uppercase; letter-spacing: 1px; font-size: 0.85em; vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; } .latex sub { text-transform: uppercase; vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em; } /* ----- Responsive Design ----- */ @media (max-width: 52rem) { #banner, #content { border-radius: 0; margin-top: 0; margin-bottom: 0; } } @media (max-width: 36rem) { #banner { padding: 0.75rem 1rem; } #banner a.logo img { height: 60px; width: auto; } #menu ul { font-size: 1rem; } #menu a, #menu a:link, #menu a:visited { padding: 0 1rem; height: 2.75rem; } #content { padding: 1.25rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } } @media (max-width: 24rem) { #banner a.logo img { height: 48px; width: auto; } }