/* Defaults */ :root { --font-family: -apple-system, system-ui, sans-serif; --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace; --syntax-tab-size: 2; } /* Theme colors */ html { --bg-color-secondary: #fcfcfc; /* Slightly off-white background */ --bg-color: #f7f7f7; /* Secondary background for elements */ --text-color: #333; /* Dark gray text */ --heading-color: #222; /* Slightly darker gray for headings */ --link-color: #0071d4; --link-color-hover: #0381c7; --accent-color: #0381c7; --border-color: #cccccc; --shadow-color: rgba(0, 0, 0, 0.1); } html[data-theme="dark"] { --bg-color: #060606; /* Dark gray background */ --bg-color-secondary: #1a1a1a; /* Slightly lighter dark gray for elements */ --text-color: #bbb; /* Light gray text */ --heading-color: #ccc; /* White for headings */ --link-color: #0096e6; --link-color-hover: #1badfc; --accent-color: #0381c7; --border-color: #333; --shadow-color: rgba(255, 255, 255, 0.1); } /* Global stylesheet */ * { box-sizing: border-box; } @view-transition { navigation: auto; } html, body { padding: 0; margin: 0; } html { scroll-padding-top: 5rem; } body { font-family: var(--font-family); color: var(--text-color); background-color: var(--bg-color); transition: background-color 0.3s, color 0.3s; padding-bottom: 5rem; min-height: 100vh; } .flex { display: flex; } /* https://www.a11yproject.com/posts/how-to-hide-content/ */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } img.banner { width: 100%; } p:last-child { margin-bottom: 0; } a { color: var(--link-color); text-decoration: none; } a:hover, a:active { color: var(--link-color-hover); text-decoration: dotted underline var(--text-color); text-decoration-thickness: 1px; transition: color 0.3s; } a.ha { text-decoration: none; } hr { border: 0; border-top: 1px solid var(--border-color); width: 100% } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); transition: color 0.3s; text-align: left; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.4rem; } h4 { font-size: 1.2rem; } blockquote { border-left: 4px solid var(--accent-color); padding-left: 1rem; } .content-wrapper { display: flex; margin: 0 auto; width: 100%; max-width: 70em; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 3rem; line-height: 1.5; } .bottom-content { display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%; max-width: 70em; padding-left: 0.5rem; padding-right: 0.5rem; line-height: 1.5; } main { flex: 1; overflow: auto; padding-bottom: 0.5rem; color: var(--text-color); transition: background-color 0.3s, color 0.3s; } pre, code { font-family: var(--font-family-monospace); -moz-tab-size: var(--syntax-tab-size) !important; -o-tab-size: var(--syntax-tab-size) !important; tab-size: var(--syntax-tab-size) !important; } pre:not([class*="language-"]), code:not([class*="language-"]) { margin: 0; padding: 0.1rem; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-x: auto; background-color: var(--bg-color-secondary); border-radius: 4px; border: 1px solid var(--border-color); transition: background-color 0.3s; } table { border: 1px solid var(--border-color); transition: border-color 0.3s; } table td, table th { padding: 0.25rem; } table th { padding-left: 0.5rem; padding-right: 0.5rem; background-color: var(--bg-color-secondary); transition: background-color 0.3s; } table tr:nth-child(even) { background-color: rgba(127, 127, 127, 0.1); transition: background-color 0.3s; } svg.icon { vertical-align: text-top; margin: 0; padding: 0; width: 1.25rem; height: 1.25rem; } /* Base styles */ header { position: fixed; width: 100%; top: 0; padding: 0.5em; box-shadow: 0 2px 4px var(--shadow-color); background-color: var(--bg-color-secondary); transition: background-color 0.3s; z-index: 1000; } @media(max-height: 480px) { header { position: relative; margin-bottom: -4rem; } } header .icon { width: 1.5rem; height: 1.5rem; } #header-container { display: flex; justify-content: space-between; align-items: center; max-width: 70rem; margin: 0 auto; } /* Logo and site title */ .header-left { display: flex; align-items: center; gap: 0.5rem; font-size: 1.5em; font-weight: 700; text-decoration: none !important; color: var(--text-color); margin-right: 1em; white-space: nowrap; transition: color 0.3s; } .header-left img { height: 2rem; } /* Desktop navigation (inline next to logo) */ .desktop-nav { flex-grow: 1; } .desktop-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; } .desktop-nav ul li { } .desktop-nav ul li a { text-decoration: none; } .desktop-nav ul li a:hover { text-decoration: none; } .desktop-nav ul li a[aria-current="page"] { font-weight: 700; } /* Right side links */ .header-right { display: flex; align-items: center; gap: 1rem; } .header-right a, .header-right span { text-decoration: none; color: var(--text-color) !important; transition: color 0.3s; cursor: pointer; } .header-right a:hover, .header-right span:hover, header .icon:hover { color: var(--link-color-hover); transition: color 0.3s; } /* Hide the checkbox (used to toggle mobile menu) */ .nav-toggle { display: none; } /* Burger menu icon hidden by default */ .burger-menu { display: none; cursor: pointer; } /* Mobile nav styling */ .mobile-nav { display: none; /* Hidden by default */ position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-color-secondary); box-shadow: 0 2px 4px var(--shadow-color); transition: background-color 0.3s; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav ul li { border-bottom: 1px solid var(--border-color); transition: border-color 0.3s; } .mobile-nav ul li a { display: block; padding: 0.75em 1em; text-decoration: none; color: var(--link-color); transition: color 0.3s; } .mobile-nav ul li a[aria-current="page"] { font-weight: 700; } /* Mobile Styles */ @media (max-width: 740px) { /* Hide desktop nav and show burger icon */ .desktop-nav { display: none; } .burger-menu { display: inline-block; } /* When the hidden checkbox is checked, show the mobile nav */ #nav-toggle:checked ~ .mobile-nav { display: block; } } footer { position: relative; width: 100%; margin-top: 2rem; margin-bottom: -5rem; padding: 0.5em; background-color: var(--bg-color-secondary); transition: background-color 0.3s; box-shadow: 0 -2px 4px var(--shadow-color); z-index: 1000; } .footer-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; max-width: 70em; margin-left: auto; margin-right: auto; font-weight: bold; } footer .icon { color: var(--text-color); transition: color 0.3s; cursor: pointer; } footer .icon:hover { color: var(--link-color-hover); transition: color 0.3s; }