:root { color-scheme: light dark; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; --max-width: 800px; --spacing: 1.5rem; --icon-bg-github: #111010; --icon-bg-mastodon: #3088d4; --icon-bg-codeberg: #2185d0; /* Theme alias variables */ --bg-color: var(--bg-primary); --header-bg: var(--bg-navbar); --footer-bg: var(--bg-footer); --aside-bg: var(--bg-sidebar); --border-color: var(--border); --text-color: var(--text-primary); --muted-text: var(--text-muted); --link-color: var(--accent); --link-hover-color: var(--text-subtle); --header-text: var(--text-header-footer); --header-link: var(--text-header-footer); --header-link-hover: var(--text-subtle); --footer-text: var(--text-header-footer); --footer-link: var(--text-header-footer); --footer-link-hover: var(--text-subtle); --button-bg: var(--link-color); --button-text: var(--text-header-footer); --icon-color: var(--button-text); --icon-hover-color: var(--link-hover-color); --separator-color: var(--header-text); } @media (prefers-color-scheme: light) { :root { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-code: #f3f4f6; --bg-navbar: #111827; --bg-footer: #111827; --bg-sidebar: #f3f4f6; /* Borders */ --border: #e5e7eb; /* Text */ --text-primary: #111827; --text-muted: #6b7280; --text-subtle: #9ca3af; --text-header-footer: #f9fafb; --text-header-footer-hover: #dbeafe; /* Accent & tags */ --accent: #0f766e; --tag-bg: #ccfbf1; --tag-text: #115e59; /* Syntax */ --syn-keyword: #0f766e; --syn-ident: #7c3aed; --syn-comment: #9ca3af; /* Link/alias variables */ --bg-color: var(--bg-primary); --header-bg: var(--bg-navbar); --footer-bg: var(--bg-footer); --aside-bg: var(--bg-sidebar); --border-color: var(--border); --text-color: var(--text-primary); --muted-text: var(--text-muted); --link-color: var(--accent); --link-hover-color: var(--text-subtle); --header-text: var(--text-header-footer); --header-link: var(--text-header-footer); --header-link-hover: var(--text-header-footer-hover); --footer-text: var(--text-header-footer); --footer-link: var(--text-header-footer); --footer-link-hover: var(--text-header-footer-hover); --button-bg: var(--link-color); --button-text: var(--text-header-footer); --icon-color: var(--button-text); --icon-hover-color: var(--link-hover-color); --separator-color: var(--header-text); } } @media (prefers-color-scheme: dark) { :root { /* Backgrounds */ --bg-primary: #1f2937; --bg-secondary: #111827; --bg-code: #111827; --bg-navbar: #030712; --bg-footer: #030712; --bg-sidebar: #1f2937; /*Borders*/ --border: #374151; /*Text*/ --text-primary: #f9fafb; --text-muted: #9ca3af; --text-subtle: #4b5563; --text-header-footer: #f9fafb; --text-header-footer-hover: #dbeafe; /*Accent & tags*/ --accent: #2dd4bf; --tag-bg: #042f2e; --tag-text: #5eead4; /*Syntax*/ --syn-keyword: #2dd4bf; --syn-ident: #a78bfa; --syn-comment: #4b5563; /* Link/alias variables */ --bg-color: var(--bg-primary); --header-bg: var(--bg-navbar); --footer-bg: var(--bg-footer); --aside-bg: var(--bg-sidebar); --border-color: var(--border); --text-color: var(--text-primary); --muted-text: var(--text-muted); --link-color: var(--accent); --link-hover-color: var(--text-subtle); --header-text: var(--text-header-footer); --header-link: var(--text-header-footer); --header-link-hover: var(--text-header-footer-hover); --footer-text: var(--text-header-footer); --footer-link: var(--text-header-footer); --footer-link-hover: var(--text-header-footer-hover); --button-bg: #0f766e; --button-text: var(--text-header-footer); --icon-color: var(--button-text); --icon-hover-color: var(--link-hover-color); --separator-color: var(--header-text); } } /* Base styles */ * { box-sizing: border-box; } body { font-family: var(--font-family), serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-color); margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; } header.site-header nav { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--spacing) / 2); background-color: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; p { margin: 0; } a { text-decoration: none; color: var(--header-link); } a:hover { color: var(--header-link-hover); } ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--spacing); justify-content: center; li::after { content: " | "; /* Or use " • " for bullets, or an icon */ color: var(--separator-color); position: absolute; transform: translateX(250%); } li:last-child::after { content: ""; /* Remove separator from last item */ } } } @media (max-width: 680px) { header.site-header nav { flex-direction: column; align-items: center; gap: calc(var(--spacing) / 2); } } main { flex: 1; > div.container { margin: auto; max-width: var(--max-width); padding: var(--spacing); } } footer { border-top: 1px solid var(--border-color); background-color: var(--footer-bg); color: var(--footer-text); padding: calc(var(--spacing) / 2) 0; font-size: 0.80rem; text-align: center; a { color: var(--footer-link); } a:hover { color: var(--footer-link-hover); } p { margin: calc(var(--spacing) / 4) 0; } } a { color: var(--link-color); } a:hover { text-decoration: underline; color: var(--link-hover-color); } .article-meta { font-size: 0.8rem; color: var(--muted-text); margin-bottom: var(--spacing); } .articles-container { display: flex; flex-wrap: wrap; gap: 1rem; aside { text-align: center; background-color: var(--aside-bg); padding: var(--spacing); border-right: 1px solid var(--border-color); max-width: 30%; .sitename { font-size: 4rem; margin: 0; } nav[aria-label="Social Media Links"] ul { list-style-type: none; margin: calc(var(--spacing) * 2); padding: 0; font-size: 1.6rem; color: var(--text-color); li { display: inline; margin: 0 0.5rem; } a { width: 36px; height: 36px; border-radius: 100%; text-decoration: none; display: inline-block; font-size: 1.6rem; line-height: 36px; color: var(--icon-color); } a:hover { transform: translateY(-2px); color: var(--link-hover-color); } a.sc-github { background-color: var(--icon-bg-github); } a.sc-mastodon { background-color: var(--icon-bg-mastodon); } .sc-codeberg { background-color: var(--icon-bg-codeberg); } } } main { max-width: var(--max-width); h1 { font-size: 2.5rem; } article { border-bottom: 1px solid var(--border-color); header { h2 { margin-bottom: 0; font-size: 2rem; a { text-decoration: none; color: var(--text-color); } a:hover { text-decoration: underline; color: var(--muted-text); } } } p { margin: calc(var(--spacing) / 2) 0; } p.read-more { text-align: right; font-size: 0.8rem; margin-right: 0.8rem; } } } nav[aria-label="Pagination Navigation"] { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin: var(--spacing) 0 calc(var(--spacing) / 2) 0; div a { margin: 0.2rem; } } } @media (max-width: 800px) { .articles-container { flex-direction: column; aside, main { max-width: 100%; padding: var(--spacing); } aside { padding: 0; p { margin: 0; } nav[aria-label="Social Media Links"] ul, form#search { margin: calc(var(--spacing) / 2) 0; } } } } .article-details { h1 { font-size: 2.5rem; margin-bottom: 0; } } dl.archives dt { margin-top: .5rem; } /* Generic */ form#search { display: flex; gap: 0.5rem; align-items: center; padding: var(--spacing); flex-wrap: wrap; label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } input[name="q"] { flex: 1; padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-color); color: var(--text-color); font-size: 1rem; max-width: 100%; } input[name="q"]:focus { outline: none; border-color: var(--link-color); box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2); } button { padding: 0.5rem 1rem; border: none; border-radius: 4px; background-color: var(--button-bg); color: var(--button-text); font-size: 1rem; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: var(--link-hover-color); } } pre { overflow-x: auto; border-left: 4px solid var(--border-color); padding: 0.5rem; } /* line numbers must not be selectable. */ pre .ln { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } tt { word-wrap: break-word; } blockquote { border-left: 4px solid var(--border-color); padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--muted-text); } @media print { .site-header, aside { display: none; } nav { display: none; } main article { margin: 0; } } /* Admonitions */ .admonition { border-left: 4px solid; padding: 1rem; margin: 1.5rem 0; border-radius: 4px; .admonition-title { font-weight: bold; margin-top: 0; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; &::before { display: inline-block; flex-shrink: 0; } } p { margin: 0.5rem 0; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } } /* Admonition symbols */ .admonition.note .admonition-title::before { content: "🗒️"; } .admonition.tip .admonition-title::before { content: "💡"; } .admonition.important .admonition-title::before { content: "❗"; } .admonition.warning .admonition-title::before { content: "⚠️"; } @media (prefers-color-scheme: light) { .admonition.note { background-color: #dbeafe; border-color: #0284c7; color: #0c4a6e; .admonition-title, p.admonition-title { color: #0c4a6e; } } .admonition.tip { background-color: #dcfce7; border-color: #16a34a; color: #3f6212; .admonition-title, p.admonition-title { color: #3f6212; } } .admonition.important { background-color: #ffe7d5; border-color: #ea580c; color: #7c2d12; .admonition-title, p.admonition-title { color: #7c2d12; } } .admonition.warning { background-color: #fef3c7; border-color: #d97706; color: #78350f; .admonition-title, p.admonition-title { color: #78350f; } } } @media (prefers-color-scheme: dark) { .admonition.note { background-color: #082f49; border-color: #06b6d4; color: #cffafe; .admonition-title, p.admonition-title { color: #06b6d4; } } .admonition.tip { background-color: #0f2f1f; border-color: #10b981; color: #d1fae5; .admonition-title, p.admonition-title { color: #10b981; } } .admonition.important { background-color: #2f1f0f; border-color: #f97316; color: #fed7aa; .admonition-title, p.admonition-title { color: #f97316; } } .admonition.warning { background-color: #2f2514; border-color: #eab308; color: #fef08a; .admonition-title, p.admonition-title { color: #eab308; } } }