/* Single stylesheet for the whole site.
*
* These were previously fourteen separate tags in _layouts/default.html,
* six of them behind Liquid guards so a given page pulled somewhere between
* nine and twelve files. Bundling trades that waterfall for one request that
* every page shares, so the sheet is fetched once and then served from cache
* for the rest of the visit, instead of each page type warming its own subset.
*
* The partials live in _includes/css/ and are concatenated by the Liquid
* includes below. There is no Sass step: the partials are plain CSS, and the
* nesting in them is native CSS nesting, resolved by the browser rather than
* flattened at build time.
*
* Include order IS the cascade. fonts comes first (@font-face declarations,
* which nothing else depends on but which the browser should discover as early
* in the sheet as possible), then variables (every other file reads its custom
* properties), and site last (it is the override home). The page-specific
* sheets in between are namespaced under their own class prefixes --
* .about-*, .contact-form, .post-*, .docs-*, .highlight, .dgm-* -- so loading
* them everywhere does not leak styles onto pages that lack that markup. Keep
* new partials namespaced the same way, or the guard is gone.
*/
/* Self-hosted webfonts.
*
* Replaces three s to fonts.googleapis.com / fonts.gstatic.com. Those
* cost two extra origins AND a serialized round trip: the browser had to fetch
* Google's stylesheet before it could learn which woff2 to request. Declaring
* the faces here means the URLs are known the moment main.css lands, and the
* two faces needed for first paint are preloaded from .
*
* All three families are SIL Open Font License 1.1. Licenses ship alongside the
* files in assets/fonts/ as the OFL requires.
*
* These are VARIABLE fonts: one file spans a whole weight range, which is why
* each face declares e.g. `font-weight: 200 800` instead of one file per
* weight. Asking for another weight in CSS costs no extra bytes.
*
* The ranges below are the fonts' REAL axes, read from the files, not the
* narrower ones Google's CSS advertised. That matters: Google declared
* JetBrains Mono as `400 500`, so diagrams.css asking for 600 was silently
* clamped to 500. The true axis is 400-800 and now renders as asked.
*
* unicode-range is copied verbatim from Google's CSS and is load bearing. It is
* what stops the browser fetching latin-ext for pages with no latin-ext
* characters, which is currently every page on the site.
*/
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/atkinson-hyperlegible-next-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/assets/fonts/atkinson-hyperlegible-next-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('/assets/fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/jetbrains-mono-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/jetbrains-mono-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* CSS Custom Properties */
:root {
--nav-width: clamp(200px, 20vw, 250px);
--toolbar-height: 48px;
--sidebar-resizer-hover: #b8a99a;
--sidebar-resizer-active: #DFD0B8;
/* Colors - Dark theme (default) */
--bg: #1D2A3B;
--text: #DFD0B8;
--text-muted: #b8a99a;
--border-muted: #3d4a54;
--primary: #2F3941;
--primary-hover: #3d4a54;
--primary-inverse: #DFD0B8;
--primary-underline: rgba(223, 208, 184, 0.5);
--card-bg: #2F3941;
/* Form elements */
--input-bg: #2F3941;
--input-border: #3d4a54;
--input-text: #DFD0B8;
--input-placeholder: #a89d8a;
--input-focus: #DFD0B8;
/* Typography */
--font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Space Grotesk", "Atkinson Hyperlegible Next", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--font-size: 100%;
--font-weight: 400;
--line-height: 1.5;
/* Fluid typography */
--font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
--font-size-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
--font-size-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--font-size-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
--font-size-3xl: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
/* Spacing */
--spacing: 1rem;
--block-spacing-y: 1rem;
--block-spacing-x: 1rem;
/* Border */
--radius: 0.25rem;
--border-width: 1px;
/* Code */
--code-bg: #2F3941;
--code-text: #e6b89c;
/* Mark */
--mark-bg: #b48e5a;
--mark-text: #1D2A3B;
/* Toolbar */
--toolbar-bg: #253040;
--toolbar-border: #3d4a54;
/* Table */
--table-border: var(--border-muted);
/* Kbd */
--kbd-bg: #b48e5a;
--kbd-text: #1D2A3B;
}
html[data-theme="light"] {
--sidebar-resizer-hover: #a0aec0;
--sidebar-resizer-active: #4a5568;
--bg: #f5f5f5;
--text: #2d3748;
--text-muted: #718096;
--border-muted: #e2e8f0;
--primary: #e2e8f0;
--primary-hover: #cbd5e0;
--primary-inverse: #2d3748;
--primary-underline: rgba(45, 55, 72, 0.3);
--card-bg: #ffffff;
/* Form elements */
--input-bg: #ffffff;
--input-border: #e2e8f0;
--input-text: #2d3748;
--input-placeholder: #a0aec0;
--input-focus: #4a5568;
/* Code */
--code-bg: #edf2f7;
--code-text: #BC5215;
/* Mark */
--mark-bg: #faf089;
--mark-text: #2d3748;
/* Toolbar */
--toolbar-bg: #edf2f7;
--toolbar-border: #e2e8f0;
/* Kbd */
--kbd-bg: #e2e8f0;
--kbd-text: #2d3748;
}
html[data-theme="moon"] {
--sidebar-resizer-hover: #878580;
--sidebar-resizer-active: #CECDC3;
--bg: #1C1B1A;
--text: #CECDC3;
--text-muted: #878580;
--border-muted: #403E3C;
--primary: #282726;
--primary-hover: #343331;
--primary-inverse: #CECDC3;
--primary-underline: rgba(206, 205, 195, 0.3);
--card-bg: #282726;
/* Form elements */
--input-bg: #282726;
--input-border: #403E3C;
--input-text: #CECDC3;
--input-placeholder: #6F6E69;
--input-focus: #CECDC3;
/* Code */
--code-bg: #343331;
--code-text: #DA702C;
/* Mark */
--mark-bg: #403E3C;
--mark-text: #CECDC3;
/* Toolbar */
--toolbar-bg: #100F0F;
--toolbar-border: #282726;
/* Table */
--table-border: var(--border-muted);
/* Kbd */
--kbd-bg: #403E3C;
--kbd-text: #CECDC3;
}
/* Minimal CSS Reset */
*,
*::before,
*::after {
box-sizing: border-box;
background-repeat: no-repeat;
}
::before,
::after {
text-decoration: inherit;
vertical-align: inherit;
}
:where(:root) {
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--font-size);
font-weight: var(--font-weight);
line-height: var(--line-height);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
tab-size: 4;
}
body {
margin: 0;
width: 100%;
}
main {
display: block;
}
/* Typography */
/* Headings */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: var(--spacing);
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
h1 {
font-size: 2rem;
color: var(--h1);
}
h2 {
font-size: 1.75rem;
color: var(--h2);
}
h3 {
font-size: 1.5rem;
color: var(--h3);
}
h4 {
font-size: 1.25rem;
color: var(--h4);
}
h5 {
font-size: 1.125rem;
color: var(--h5);
}
h6 {
font-size: 1rem;
color: var(--h6);
}
/* Paragraphs */
p {
margin-top: 0;
margin-bottom: var(--spacing);
}
/* Links */
a {
color: var(--primary-inverse);
text-decoration: underline;
text-decoration-color: var(--primary-underline);
text-underline-offset: 0.125em;
transition: color var(--transition), text-decoration-color var(--transition);
&:hover {
color: var(--primary-inverse);
text-decoration-color: var(--primary-inverse);
}
&:visited {
color: var(--primary-inverse);
}
}
/* Text elements */
strong, b {
font-weight: 700;
}
em, i {
font-style: italic;
}
small {
font-size: 0.875em;
}
sub, sup {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Abbreviations */
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
/* Block quotes */
blockquote {
margin: var(--spacing) 0;
padding: var(--spacing) var(--spacing) var(--spacing) calc(var(--spacing) * 1.5);
border-left: 0.25rem solid var(--border-muted);
color: var(--text-muted);
footer {
margin-top: calc(var(--spacing) * 0.5);
font-size: 0.875em;
}
}
/* Address */
address {
margin-bottom: var(--spacing);
font-style: normal;
}
/* HTML Elements */
article {
margin-bottom: 1.5rem;
padding: var(--block-spacing-y) var(--block-spacing-x);
background-color: var(--card-bg);
border-radius: var(--radius);
& > header,
& > footer {
margin-right: calc(var(--block-spacing-x) * -1);
margin-left: calc(var(--block-spacing-x) * -1);
padding: calc(var(--block-spacing-y) * 0.66) var(--block-spacing-x);
}
& > header {
margin-top: calc(var(--block-spacing-y) * -1);
margin-bottom: var(--block-spacing-y);
border-bottom: var(--border-width) solid var(--border-muted);
}
& > footer {
margin-top: var(--block-spacing-y);
margin-bottom: calc(var(--block-spacing-y) * -1);
border-top: var(--border-width) solid var(--border-muted);
}
}
/* Project card layout */
.project-card {
display: flex;
gap: var(--spacing);
.project-content {
flex: 1;
min-width: 0;
}
.project-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-shrink: 0;
align-self: center;
[role="button"] {
white-space: nowrap;
}
[role="button"].primary {
background-color: var(--text);
border-color: var(--text);
color: var(--bg);
&:hover {
background-color: var(--text-muted);
border-color: var(--text-muted);
color: var(--bg);
}
}
small {
display: block;
text-align: center;
}
}
}
@media (max-width: 640px) {
.project-card {
flex-direction: column;
.project-actions {
flex-direction: row;
flex-wrap: wrap;
}
}
}
/* Heading group */
hgroup {
margin-bottom: var(--spacing);
& > * {
margin-bottom: 0;
}
& > *:last-child {
color: var(--text-muted);
font-weight: normal;
font-size: 1rem;
}
}
/* Section */
section {
margin-bottom: 3rem;
}
/* Mark - highlight */
mark {
padding: 0.125rem 0.25rem;
background-color: var(--mark-bg);
color: var(--mark-text);
border-radius: var(--radius);
}
/* Keyboard input */
kbd {
display: inline-block;
padding: 0.25rem 0.5rem;
background-color: var(--kbd-bg);
color: var(--kbd-text);
font-family: var(--font-mono);
font-size: 0.875em;
border-radius: var(--radius);
vertical-align: baseline;
}
.tech-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.8em;
color: var(--text-muted);
}
.tech-tag + .tech-tag::before {
content: "\00b7";
margin: 0 0.35rem;
color: var(--text-muted);
opacity: 0.5;
}
/* Buttons */
button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"] {
display: inline-block;
width: auto;
margin: 0;
padding: 0.5rem 1rem;
border: var(--border-width) solid var(--bg);
border-radius: var(--radius);
background-color: var(--bg);
color: var(--primary-inverse);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
line-height: var(--line-height);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transition), border-color var(--transition), color var(--transition);
&:hover {
background-color: var(--primary);
border-color: var(--primary);
}
&:focus {
outline: 2px solid var(--primary-inverse);
outline-offset: 2px;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
/* Outline buttons */
.outline,
[role="button"].outline,
button.outline {
background-color: transparent;
color: var(--primary-inverse);
&:hover {
background-color: var(--primary);
color: var(--primary-inverse);
}
}
/* Secondary button variant */
.secondary,
[role="button"].secondary,
button.secondary {
background-color: var(--text-muted);
border-color: var(--text-muted);
&:hover {
background-color: var(--text);
border-color: var(--text);
}
}
/* Code elements */
code {
padding: 0.125rem 0.375rem;
background-color: var(--code-bg);
color: var(--code-text);
font-family: var(--font-mono);
font-size: 0.875em;
border-radius: var(--radius);
}
pre {
margin: var(--spacing) 0;
padding: var(--spacing);
background-color: var(--code-bg);
color: var(--text);
border-radius: var(--radius);
overflow-x: auto;
code {
display: block;
padding: 0;
background-color: transparent;
color: inherit;
font-size: 0.875rem;
line-height: 1.6;
}
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: var(--spacing);
border-color: var(--border-muted);
}
th, td {
padding: 0.75rem;
text-align: left;
border-bottom: var(--border-width) solid var(--table-border);
}
th {
font-weight: 700;
background-color: var(--card-bg);
color: var(--text);
}
thead th {
border-bottom-width: 2px;
}
tbody tr:last-child td {
border-bottom: none;
}
/* Horizontal rule */
hr {
height: 0;
margin: calc(var(--spacing) * 2) 0;
border: 0;
border-top: var(--border-width) solid var(--border-muted);
}
/* Lists */
ul, ol {
margin: 0 0 var(--spacing) 0;
padding-left: var(--spacing);
}
li {
margin-bottom: calc(var(--spacing) * 0.25);
}
/* Nested lists */
ul ul, ul ol, ol ul, ol ol {
margin-top: calc(var(--spacing) * 0.25);
margin-bottom: 0;
}
/* Definition lists */
dl {
margin: 0 0 var(--spacing) 0;
}
dt {
font-weight: 700;
}
dd {
margin-left: var(--spacing);
margin-bottom: calc(var(--spacing) * 0.5);
}
/* Images */
img {
max-width: 100%;
height: auto;
border-style: none;
}
/* Figure */
figure {
margin: var(--spacing) 0;
img {
display: block;
}
figcaption {
margin-top: calc(var(--spacing) * 0.5);
font-size: 0.875em;
color: var(--text-muted);
}
}
/* Details/Summary */
details {
margin-bottom: var(--spacing);
padding: var(--spacing);
background-color: var(--card-bg);
border-radius: var(--radius);
summary {
cursor: pointer;
font-weight: 700;
&:focus {
outline: 2px solid var(--primary-inverse);
outline-offset: 2px;
}
}
&[open] summary {
margin-bottom: var(--spacing);
}
}
/* Navigation */
nav {
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: var(--text);
&:hover {
opacity: 0.8;
}
}
}
/* Form elements (basic) */
input, select, textarea {
margin: 0;
padding: 0.5rem 0.75rem;
border: var(--border-width) solid var(--input-border);
border-radius: var(--radius);
background-color: var(--input-bg);
color: var(--input-text);
font-family: inherit;
font-size: 1rem;
line-height: var(--line-height);
transition: border-color var(--transition), box-shadow var(--transition);
&:focus {
border-color: var(--input-focus);
outline: none;
box-shadow: 0 0 0 2px rgba(223, 208, 184, 0.2);
}
&::placeholder {
color: var(--input-placeholder);
opacity: 1;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
textarea {
resize: vertical;
}
label {
display: block;
margin-bottom: calc(var(--spacing) * 0.25);
font-weight: 700;
}
/* Inline SVG icons, rendered by _includes/icon.html.
Sized in `em` and filled with `currentColor` so an icon tracks the font-size
and color of whatever contains it -- the same way the Font Awesome
elements these replaced used to behave. The negative vertical-align matches
Font Awesome's optical baseline so icon-plus-label pairs sit where they did. */
.icon {
display: inline-block;
vertical-align: -0.125em;
flex-shrink: 0;
}
.icon-spin {
animation: icon-spin 1s linear infinite;
}
@keyframes icon-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.icon-spin {
animation-duration: 3s;
}
}
/* Utility classes */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--primary-inverse);
padding: 0.75rem 1.5rem;
border-radius: var(--radius);
text-decoration: none;
font-weight: 600;
z-index: 9999;
transition: top 0.3s ease;
&:focus {
top: 1rem;
outline: 2px solid var(--text);
outline-offset: 2px;
}
}
/* Scroll animation classes */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
&.visible {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.fade-in {
opacity: 1;
transform: none;
transition: none;
}
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
outline: none;
}
/* Navigation styles */
#main-nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--nav-width);
padding: 2rem 1rem 4rem;
background: var(--card-bg);
border-right: 1px solid var(--border-muted);
display: flex;
flex-direction: column;
text-align: center;
z-index: 100;
}
#main-nav hgroup {
margin-bottom: 2rem;
}
#main-nav .name {
font-size: 1.1rem;
margin: 0;
padding: 0.5rem;
background: var(--primary);
color: var(--primary-inverse);
border-radius: 0.25rem;
white-space: nowrap;
}
#main-nav .title {
font-size: 1rem;
color: var(--text-muted);
margin: 0.5rem 0 0 0;
white-space: nowrap;
}
#main-nav ul {
flex-direction: column;
margin: auto 0;
padding: 0;
}
#main-nav li {
padding: 0.5rem 0;
}
/* Docs variant of the sidebar (moved from docs.css so all #main-nav
chrome lives in one file). */
#main-nav.docs-nav {
text-align: left;
overflow-y: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
hgroup {
margin-bottom: 1rem;
text-align: left;
}
.nav-back {
display: inline-block;
font-size: var(--font-size-sm);
color: var(--text-muted);
text-decoration: none;
margin-bottom: 0.5rem;
&:hover {
color: var(--text);
}
.icon {
margin-right: 0.25rem;
}
}
.name {
white-space: normal;
a {
color: var(--primary-inverse);
text-decoration: none;
&:hover {
opacity: 0.8;
}
}
}
}
/* ===== TOP NAV BAR (home/non-docs pages) ===== */
#main-nav.top-nav {
bottom: auto;
right: 0;
width: 100%;
height: 60px;
padding: 0 clamp(1rem, 3vw, 2rem);
border-right: none;
border-bottom: 1px solid var(--border-muted);
flex-direction: row;
align-items: center;
justify-content: space-between;
text-align: left;
z-index: 200;
}
.top-nav-brand {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
white-space: nowrap;
&:hover {
color: var(--primary-inverse);
}
}
.top-nav-icons {
display: flex;
align-items: center;
gap: 1rem;
a {
color: var(--text-muted);
font-size: 1.15rem;
text-decoration: none;
transition: color 0.15s ease;
&:hover {
color: var(--text);
}
}
}
.top-nav .theme-toggle {
position: static;
width: auto;
bottom: auto;
left: auto;
border: none;
padding: 0.25rem;
font-size: 1.15rem;
color: var(--text-muted);
z-index: auto;
&:hover {
background: transparent;
color: var(--text);
}
}
/* Mobile hamburger button (lives in the docs toolbar; the drawer slides
out from under the bar). Visibility is controlled by the
.toolbar-btn.hamburger rule in toolbar.css — this holds only the
burger-lines styling. */
.hamburger {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
span {
display: block;
width: 24px;
height: 3px;
background: var(--text);
transition: all 0.3s ease;
transform-origin: center;
}
&.active {
span:nth-child(1) {
transform: translateY(4px) rotate(45deg);
}
span:nth-child(2) {
transform: translateY(-4px) rotate(-45deg);
}
}
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: var(--text);
transition: background 0.2s ease, color 0.2s ease;
.icon {
font-size: 1rem;
}
.icon-sun {
display: none;
}
.icon-moon {
display: inline;
}
}
[data-theme="light"] .theme-toggle {
.icon-sun {
display: inline;
}
.icon-moon {
display: none;
}
}
.nav-content {
display: contents;
}
.nav-overlay {
display: none;
}
/* ===== SIDEBAR RESIZE HANDLE ===== */
.sidebar-resize-indicator {
position: absolute;
top: 0;
right: -4px;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: 200;
&:hover::after, &.dragging::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: var(--primary-inverse);
opacity: 0.4;
}
}
/* ===== RESPONSIVE NAV STYLES ===== */
@media (max-width: 768px) {
/* Desktop panel toggle is meaningless on mobile (the drawer takes
over); the hamburger occupies its slot. */
.sidebar-toggle {
display: none;
}
#main-nav:not(.top-nav) {
/* Starts below the toolbar and slides out from under it: z-index
below the toolbar's 50 so the bar masks the drawer mid-slide. */
top: calc(var(--toolbar-height) + 1px);
z-index: 40;
width: 100%;
max-height: calc(100vh - var(--toolbar-height));
padding-top: 1rem;
border: none;
border-bottom: 1px solid var(--border-muted);
transform: translateY(-100%);
transition: transform 0.3s ease;
overflow-y: auto;
&.open {
transform: translateY(0);
}
}
#main-nav.top-nav {
padding: 0 1rem;
}
.top-nav-icons {
gap: 0.75rem;
}
.nav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
/* Below the drawer (40) and toolbar (50). */
z-index: 30;
&.visible {
display: block;
}
}
#main-nav:not(.top-nav) .theme-toggle {
display: none;
}
#main-nav ul {
flex-direction: column;
flex-wrap: nowrap;
margin: 0;
}
#main-nav hgroup {
display: none;
}
}
/* ===== SIDEBAR COLLAPSE (desktop) ===== */
@media (min-width: 769px) {
#main-nav:not(.top-nav) {
transition: transform 0.3s ease;
/* The Contents header supplies the top spacing; zero padding lets
its sticky position pin flush at the scrollport top. */
padding-top: 0;
}
.docs-page main {
transition: margin-left 0.3s ease;
}
html.sidebar-collapsed #main-nav {
transform: translateX(-100%);
}
/* Recenter with an animatable margin instead of `margin: 0 auto` +
a max-width jump — auto margins and none→px max-width can't
transition and used to make the content leap. */
html.sidebar-collapsed main {
margin-left: max(0px, calc((100vw - 1100px) / 2));
}
html.sidebar-collapsed .docs-layout {
max-width: 1100px;
}
html.sidebar-collapsed .docs-toc {
flex-basis: 0;
opacity: 0;
}
html.sidebar-collapsed .site-footer {
margin-left: max(0px, calc((100vw - 1100px) / 2));
max-width: 1100px;
}
}
/* Rustdoc-style sidebar resize handle: two staggered dot columns. Ported
from the Notch docs. Fixed to the viewport (the nav is its own scroll
container, so an absolute handle would scroll away); tracking
--nav-width keeps it glued to the sidebar edge during a drag. The drag
behavior lives in assets/js/modules/docs-sidebar.js. */
.sidebar-resize-indicator {
touch-action: none;
position: fixed;
top: 0;
bottom: 0;
left: var(--nav-width);
width: 14px;
padding-left: 5px;
cursor: ew-resize;
z-index: 200;
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--text-muted);
&::before {
content: '';
width: 2px;
height: 16px;
margin-right: 2px;
background-image: radial-gradient(circle, currentColor 0.9px, transparent 1.1px);
background-size: 2px 4px;
background-repeat: repeat;
}
&::after {
content: '';
width: 2px;
height: 20px;
background-image: radial-gradient(circle, currentColor 0.9px, transparent 1.1px);
background-size: 2px 4px;
background-repeat: repeat;
}
&:hover,
&:active {
width: 15px;
left: calc(var(--nav-width) - 1px);
border-left: solid 1px var(--sidebar-resizer-hover);
color: var(--sidebar-resizer-hover);
}
/* Wide invisible hit area while dragging so fast pointer movement
can't escape the handle. */
&.dragging {
padding: 0 140px;
width: 291px;
margin-left: -140px;
border-left: none;
color: var(--sidebar-resizer-active);
}
@media (max-width: 768px), (pointer: coarse) {
display: none;
}
}
/* Momentarily disables all transitions while docs-sidebar.js measures
the collapse destination layout between two invisible class flips. */
html.sidebar-no-anim *,
html.sidebar-no-anim *::before,
html.sidebar-no-anim *::after {
transition: none !important;
}
/* Docs sidebar/content separation drawn as a pseudo-element starting
BELOW the blended top bar, so no vertical seam cuts the bar; only the
horizontal border line crosses the corner. */
@media (min-width: 769px) {
#main-nav.docs-nav {
border-right: none;
&::after {
content: '';
position: absolute;
top: calc(var(--toolbar-height) + 1px);
bottom: 0;
right: 0;
width: 1px;
background: var(--border-muted);
}
}
/* Solid guide line while a drag is in progress (widens/recolors the
separation line). */
#main-nav:has(.sidebar-resize-indicator.dragging)::after {
width: 2px;
background: var(--sidebar-resizer-active);
}
}
html.sidebar-collapsed .sidebar-resize-indicator {
display: none;
}
/* "Contents" header pinned at the top of the docs sidebar, holding the
canonical side-panel close button (see sidebar-contents-header.html). */
.sidebar-contents-header {
/* Pinned to the top of the nav's own scrollport so "Contents" stays
visible while the sidebar list scrolls. */
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
/* Label centered over the sidebar. */
justify-content: center;
gap: 0.5rem;
/* +1px so the bottom border lands at the same y as the toolbar's
(toolbar = --toolbar-height content + 1px border; this is border-box). */
height: calc(var(--toolbar-height) + 1px);
flex-shrink: 0;
margin: 0 -1rem 1rem;
padding: 0 0.5rem;
background: var(--toolbar-bg);
border-bottom: 1px solid var(--toolbar-border);
text-align: left;
}
.sidebar-contents-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
/* Emerges from behind the toggle button: fades + slides out to the
right slightly after the panel starts opening. */
transition: opacity 0.18s ease 0.12s, transform 0.22s ease 0.08s;
}
html.sidebar-collapsed .sidebar-contents-label {
opacity: 0;
transform: translateX(-10px);
transition-delay: 0s, 0s;
}
@media (max-width: 768px) {
/* The mobile drawer is closed by the hamburger, not this header. */
.sidebar-contents-header {
display: none;
}
}
/* ===== LIGHT THEME — Flexoki (600 accent variants) ===== */
html[data-theme="light"] .highlight {
background-color: #FFFCF0;
/* Comments */
.c, .cd, .cm, .c1, .cs { color: #6F6E69; font-style: italic; }
.cp { color: #6F6E69; }
/* Keywords */
.k, .kc, .kd, .kn, .kp, .kr, .kv { color: #5E409D; font-weight: bold; }
.kt { color: #24837B; font-weight: bold; }
/* Strings */
.s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1 { color: #66800B; }
.sr { color: #24837B; }
.ss { color: #BC5215; }
/* Numbers */
.m, .mb, .mf, .mh, .mi, .mo, .mx, .il { color: #BC5215; }
/* Names */
.na { color: #AD8301; }
.nb { color: #205EA6; }
.nc { color: #AD8301; font-weight: bold; }
.nd { color: #205EA6; }
.ne { color: #AF3029; font-weight: bold; }
.nf { color: #205EA6; font-weight: bold; }
.ni { color: #24837B; }
.nl { color: #BC5215; }
.nn { color: #AD8301; }
.no { color: #BC5215; }
.nt { color: #AF3029; }
.nv, .vc, .vg, .vi { color: #A02F6F; }
.bp { color: #205EA6; }
/* Operators */
.o, .ow { color: #24837B; }
/* Punctuation */
.p { color: var(--text); }
/* Generic */
.gd { color: #AF3029; background-color: rgba(175, 48, 41, 0.1); }
.ge { font-style: italic; }
.gh { color: var(--text); font-weight: bold; }
.gi { color: #66800B; background-color: rgba(102, 128, 11, 0.1); }
.go { color: #6F6E69; }
.gp { color: #AD8301; font-weight: bold; }
.gr { color: #AF3029; }
.gs { font-weight: bold; }
.gt { color: #AF3029; }
.gu { color: #24837B; font-weight: bold; }
/* Errors */
.err { color: #AF3029; background-color: transparent; }
/* Whitespace */
.w { color: #6F6E69; }
}
/* ===== MOON THEME — Flexoki warm dark (400 accent variants) ===== */
html[data-theme="moon"] .highlight {
background-color: #282726;
/* Comments */
.c, .cd, .cm, .c1, .cs { color: #575653; font-style: italic; }
.cp { color: #575653; }
/* Keywords */
.k, .kc, .kd, .kn, .kp, .kr, .kv { color: #8B7EC8; font-weight: bold; }
.kt { color: #3AA99F; font-weight: bold; }
/* Strings */
.s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1 { color: #879A39; }
.sr { color: #3AA99F; }
.ss { color: #DA702C; }
/* Numbers */
.m, .mb, .mf, .mh, .mi, .mo, .mx, .il { color: #DA702C; }
/* Names */
.na { color: #D0A215; }
.nb { color: #4385BE; }
.nc { color: #D0A215; font-weight: bold; }
.nd { color: #4385BE; }
.ne { color: #D14D41; font-weight: bold; }
.nf { color: #4385BE; font-weight: bold; }
.ni { color: #3AA99F; }
.nl { color: #DA702C; }
.nn { color: #D0A215; }
.no { color: #DA702C; }
.nt { color: #D14D41; }
.nv, .vc, .vg, .vi { color: #CE5D97; }
.bp { color: #4385BE; }
/* Operators */
.o, .ow { color: #3AA99F; }
/* Punctuation */
.p { color: var(--text); }
/* Generic */
.gd { color: #D14D41; background-color: rgba(209, 77, 65, 0.15); }
.ge { font-style: italic; }
.gh { color: var(--text); font-weight: bold; }
.gi { color: #879A39; background-color: rgba(135, 154, 57, 0.15); }
.go { color: #575653; }
.gp { color: #D0A215; font-weight: bold; }
.gr { color: #D14D41; }
.gs { font-weight: bold; }
.gt { color: #D14D41; }
.gu { color: #3AA99F; font-weight: bold; }
/* Errors */
.err { color: #D14D41; background-color: transparent; }
/* Whitespace */
.w { color: #575653; }
}
/* ===== DARK THEME (default) ===== */
.highlight {
background-color: var(--card-bg);
border-radius: var(--radius);
margin: var(--spacing) 0;
overflow-x: auto;
pre {
margin: 0;
padding: var(--spacing);
background-color: transparent;
}
code {
background-color: transparent;
padding: 0;
}
table td { padding: 5px; }
table pre { margin: 0; }
/* Comments */
.c, .cd, .cm, .c1, .cs { color: #546e7a; font-style: italic; }
.cp { color: #546e7a; }
/* Keywords */
.k, .kc, .kd, .kn, .kp, .kr, .kv { color: #c792ea; font-weight: bold; }
.kt { color: #ffcb6b; font-weight: bold; }
/* Strings */
.s, .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1 { color: #c3e88d; }
.sr { color: #89ddff; }
.ss { color: #f78c6c; }
/* Numbers */
.m, .mb, .mf, .mh, .mi, .mo, .mx, .il { color: #f78c6c; }
/* Names */
.na { color: #ffcb6b; }
.nb { color: #82aaff; }
.nc { color: #ffcb6b; font-weight: bold; }
.nd { color: #82aaff; }
.ne { color: #ff5370; font-weight: bold; }
.nf { color: #82aaff; font-weight: bold; }
.ni { color: #89ddff; }
.nl { color: #f78c6c; }
.nn { color: #ffcb6b; }
.no { color: #f78c6c; }
.nt { color: #ff5370; }
.nv, .vc, .vg, .vi { color: #f07178; }
.bp { color: #82aaff; }
/* Operators */
.o, .ow { color: #89ddff; }
/* Punctuation */
.p { color: var(--text); }
/* Generic */
.gd { color: #ff5370; background-color: rgba(255, 83, 112, 0.1); }
.ge { font-style: italic; }
.gh { color: var(--text); font-weight: bold; }
.gi { color: #c3e88d; background-color: rgba(195, 232, 141, 0.1); }
.go { color: #546e7a; }
.gp { color: #ffcb6b; font-weight: bold; }
.gr { color: #ff5370; }
.gs { font-weight: bold; }
.gt { color: #ff5370; }
.gu { color: #89ddff; font-weight: bold; }
/* Errors */
.err { color: #ff5370; background-color: transparent; }
/* Whitespace */
.w { color: #546e7a; }
}
/* Docs layout styles */
/* Docs sidebar chrome (#main-nav.docs-nav) lives in navigation.css. */
.docs-nav-list {
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
/* Collapsible chapter sections, mirroring the notch docs sidebar:
a header row (uppercase label + fold chevron) over each section's own
list. Labels sit at the base 0.75rem inset; chapter links indent
slightly past them (1rem + 3px marker border) so titles read as
children of their section. */
#main-nav .docs-nav-section {
margin: 0;
}
#main-nav .docs-nav-section + .docs-nav-section {
margin-top: 0.75rem;
}
.nav-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.25rem;
padding-right: 0.5rem;
/* The whole row toggles the fold (see docs-sidebar.js), not just the
chevron. */
cursor: pointer;
user-select: none;
}
#main-nav .docs-nav-section-label {
flex: 1;
min-width: 0;
padding-left: 0.75rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-section-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 22px;
height: 22px;
padding: 0;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius);
&:hover {
color: var(--text);
background: var(--primary-hover);
}
.nav-chevron {
transition: transform 0.2s ease;
}
}
#main-nav .docs-nav-section.collapsed {
.nav-section-toggle .nav-chevron {
transform: rotate(-90deg);
}
.docs-nav-list {
display: none;
}
}
#main-nav .docs-nav-chapter {
padding: 0;
/* Cancel the global prose li margin — it opened the row pitch 4px
wider than pika's sidebar. */
margin: 0;
& > a {
display: block;
padding: 0.3rem 0.75rem 0.3rem 1rem;
color: var(--text-muted);
text-decoration: none;
font-size: var(--font-size-sm);
border-left: 3px solid transparent;
/* One line per title; the ellipsis tracks the sidebar as it resizes. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
&:hover {
background: var(--primary);
color: var(--text);
}
}
&.active > a {
border-left-color: var(--text);
background: var(--primary);
color: var(--text);
font-weight: 500;
}
}
/* ===== CONTENT ===== */
@media (min-width: 769px) {
body.docs-page {
padding: 0;
}
}
.docs-content {
max-width: 100%;
padding: 2rem clamp(1rem, 3vw, 2rem);
transition: max-width 0.3s ease;
}
.docs-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-muted);
h1 {
margin-bottom: 0.5rem;
}
.docs-subtitle {
font-size: 1.25rem;
color: var(--text-muted);
font-style: italic;
margin: 0;
}
}
/* Source attribution shown above every chapter in the compilers collection. */
.docs-source-note {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: 1.5;
margin: 0 0 2rem;
padding: 0.75rem 1rem;
border-left: 3px solid var(--border-muted);
background: var(--card-bg);
border-radius: 0 var(--radius) var(--radius) 0;
}
.docs-body {
line-height: 1.8;
h2 {
margin-top: 2rem;
}
pre {
margin: 1rem 0;
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
}
table {
margin: 1rem 0;
}
}
/* ===== INDEX PAGE ===== */
.docs-intro p {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.docs-chapter-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: chapter-list;
}
.docs-chapter-list li {
counter-increment: chapter-list;
margin-bottom: 0.75rem;
a {
display: block;
padding: 0.75rem 1rem;
background: var(--card-bg);
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
transition: transform 0.15s ease, box-shadow 0.15s ease;
&::before {
content: counter(chapter-list) ". ";
color: var(--text-muted);
}
&:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
.docs-chapter-subtitle {
display: block;
font-size: var(--font-size-sm);
color: var(--text-muted);
font-style: italic;
margin-top: 0.25rem;
padding-left: 1.25rem;
}
}
/* ===== RIGHT TOC ===== */
.docs-layout {
display: flex;
gap: 0;
}
.docs-toc {
display: none;
flex: 0 0 220px;
/* Collapses by animating flex-basis (see navigation.css) instead of
display:none, which would pop. min-width lets the basis shrink.
overflow: clip (NOT hidden) — hidden would make this a scroll
container and silently break the inner position: sticky. */
min-width: 0;
overflow: clip;
transition: flex-basis 0.3s ease, opacity 0.3s ease;
}
.docs-toc-inner {
/* Fixed width so the TOC clips during collapse instead of re-wrapping. */
width: 220px;
position: sticky;
top: var(--toolbar-height);
max-height: calc(100vh - var(--toolbar-height));
overflow-y: auto;
padding: 1.5rem 1rem 2rem;
border-left: 1px solid var(--border-muted);
}
.docs-toc-heading {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin: 0 0 0.75rem;
}
.docs-toc-list {
list-style: none;
padding: 0;
margin: 0;
li {
margin-bottom: 0;
}
li a {
display: block;
padding: 0.2rem 0 0.2rem 0.75rem;
font-size: 0.8rem;
line-height: 1.4;
color: var(--text-muted);
text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
&:hover { color: var(--text); }
&.active {
color: var(--primary-inverse);
border-left-color: var(--primary-inverse);
font-weight: 500;
}
}
}
/* ===== RESPONSIVE TOC ===== */
@media (min-width: 1200px) {
.docs-toc {
display: block;
}
}
/* ===== MOBILE (<768px) ===== */
@media (max-width: 768px) {
.docs-content {
max-width: 100%;
}
}
/* ===== START READING CTA ===== */
.start-reading-btn {
display: inline-block;
margin-top: 1.5rem;
padding: 0.6rem 1.25rem;
background: var(--primary);
color: var(--text);
border-radius: var(--radius);
text-decoration: none;
font-weight: 500;
transition: background 0.15s ease;
&:hover {
background: var(--primary-hover);
}
}
/* ===== PREV / NEXT PAGINATION ===== */
.docs-pagination {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-muted);
}
.docs-prev,
.docs-next {
display: inline-block;
padding: 0.5rem 0.75rem;
background: var(--card-bg);
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
font-size: var(--font-size-sm);
transition: background 0.15s ease;
&:hover {
background: var(--primary-hover);
}
}
.docs-next {
margin-left: auto;
}
/* Docs toolbar styles */
.docs-toolbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 0.125rem;
/* 6px vertical + 36px buttons = 48px bar (--toolbar-height), matching
pika's topbar density. */
padding: 0.375rem 0.5rem;
margin-left: calc(-1 * var(--body-px));
margin-right: calc(-1 * var(--body-px));
background: var(--toolbar-bg);
border-bottom: 1px solid var(--toolbar-border);
transition: opacity 0.2s ease;
}
@media (min-width: 769px) {
body.docs-page .docs-toolbar {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
transition: margin-left 0.3s ease;
}
/* Collapsed: the bar stretches to the viewport's left edge (like the
notch docs) by cancelling main's centering margin. */
html.sidebar-collapsed body.docs-page .docs-toolbar {
margin-left: calc(-1 * max(0px, (100vw - 1100px) / 2));
}
}
/* "Home" centered in the bar. Absolutely positioned so it stays dead
center regardless of how many buttons sit in the left slot. */
.toolbar-home-link {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s ease;
&:hover {
color: var(--text);
}
}
/* Hamburger is mobile-only; double class outranks the .toolbar-btn
display:flex below regardless of load order. */
.toolbar-btn.hamburger {
display: none;
@media (max-width: 768px) {
display: flex;
}
}
.toolbar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: var(--radius);
color: var(--text);
cursor: pointer;
position: relative;
padding: 0;
font-size: 1rem;
transition: background 0.15s ease;
&:hover {
background: var(--primary-hover);
}
}
/* Canonical side-panels toggle, always visible in the toolbar's left
slot; the icon (inline Lucide SVGs) swaps with the collapse state. */
.sidebar-toggle svg {
width: 18px;
height: 18px;
}
.sidebar-toggle .icon-panel-open {
display: none;
}
html.sidebar-collapsed .sidebar-toggle .icon-panel-close {
display: none;
}
html.sidebar-collapsed .sidebar-toggle .icon-panel-open {
display: block;
}
.sidebar-toggle {
@media (max-width: 768px) {
display: none;
}
}
/* Theme dropdown */
.theme-btn {
position: relative;
}
.theme-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 150px;
margin: 0.25rem 0 0;
padding: 0.25rem 0;
list-style: none;
background: var(--card-bg);
border: 1px solid var(--border-muted);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 60;
li {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: var(--font-size-sm);
color: var(--text);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
&:hover {
background: var(--primary-hover);
}
&.active {
font-weight: 700;
}
.icon {
width: 1rem;
text-align: center;
}
}
}
/* Search overlay */
.search-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: var(--toolbar-height);
}
.search-container {
width: 100%;
max-width: 560px;
margin: 0 1rem;
background: var(--card-bg);
border: 1px solid var(--border-muted);
border-radius: 0.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
overflow: hidden;
}
.search-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
border-bottom: 1px solid var(--border-muted);
kbd {
flex-shrink: 0;
padding: 0.15rem 0.4rem;
font-size: 0.7rem;
background: var(--kbd-bg);
color: var(--kbd-text);
border-radius: var(--radius);
}
}
.search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: var(--font-size-base);
color: var(--text);
font-family: var(--font-sans);
&::placeholder {
color: var(--input-placeholder);
}
}
.search-results {
list-style: none;
margin: 0;
padding: 0;
max-height: 50vh;
overflow-y: auto;
li {
border-bottom: 1px solid var(--border-muted);
&:last-child {
border-bottom: none;
}
}
a {
display: block;
padding: 0.75rem;
color: var(--text);
text-decoration: none;
transition: background 0.1s ease;
&:hover,
&.active {
background: var(--primary-hover);
}
}
.search-result-title {
font-weight: 600;
font-size: var(--font-size-base);
margin-bottom: 0.25rem;
}
.search-result-snippet {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: 1.4;
}
mark {
background: var(--mark-bg);
color: var(--mark-text);
border-radius: 2px;
padding: 0 1px;
}
}
.search-empty {
padding: 1.5rem;
text-align: center;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.toolbar-project-link {
margin-left: auto;
text-decoration: none;
}
/* Post and card styles */
.post {
display: block;
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
@media (max-width: 480px) {
padding: 1rem 0.5rem;
}
}
article.post {
display: block;
}
.post-header {
position: relative;
float: none !important;
width: 100%;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-muted);
}
.post-header h1 {
margin-bottom: 0.5rem;
}
.post-subtitle {
font-size: 1.25rem;
color: var(--text-muted);
font-style: italic;
margin-bottom: 1rem;
}
.post-meta {
display: flex;
gap: 1.5rem;
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 1rem;
@media (max-width: 768px) {
flex-direction: column;
gap: 0.5rem;
}
}
.post-meta .icon {
margin-right: 0.5rem;
}
.post-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.post-content {
line-height: 1.8;
}
.post-content h2 {
margin-top: 2rem;
}
.post-content pre {
margin: 1rem 0;
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
}
.post-content table {
margin: 1rem 0;
}
.post-footer {
position: relative;
margin-top: 3rem;
padding-top: 1rem;
border-top: 1px solid var(--border-muted);
}
.back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.post-tags .tag {
background: var(--card-bg);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.8rem;
width: fit-content;
}
/* About section styles */
.about-container {
display: flex;
gap: 2rem;
align-items: stretch;
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
}
}
.about-image {
flex: 0 0 250px;
display: flex;
@media (min-width: 769px) and (max-width: 1024px) {
flex: 0 0 180px;
}
@media (max-width: 768px) {
flex: 0 0 auto;
}
}
.about-image .profile-image {
width: 250px;
height: auto;
margin: 1.5rem 0;
border: 2px solid var(--text);
border-radius: 0.75rem;
object-fit: cover;
object-position: center top;
@media (min-width: 769px) and (max-width: 1024px) {
width: 180px;
}
@media (max-width: 768px) {
width: 200px;
height: 200px;
}
@media (max-width: 480px) {
width: 150px;
height: 150px;
}
}
.about-content {
flex: 1;
display: flex;
flex-direction: column;
}
#education h2 {
font-size: var(--font-size-xl);
}
.about-heading {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 0.75rem;
}
.about-info {
margin-bottom: 1.25rem;
max-width: 42rem;
font-size: 1.0625rem;
line-height: 1.6;
p {
margin-bottom: 1.25rem;
}
}
.about-availability {
margin: 0 0 2rem;
max-width: 42rem;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.education-list {
display: flex;
gap: 2rem;
@media (max-width: 480px) {
flex-direction: column;
}
}
.education-item {
display: flex;
align-items: flex-start;
gap: 1rem;
flex: 1;
@media (max-width: 480px) {
flex-direction: column;
align-items: center;
text-align: center;
}
}
.education-item h6 {
margin-bottom: 0.25rem;
}
.education-item p {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
}
.education-item .education-dates {
margin-top: 0.15rem;
font-size: 0.825rem;
opacity: 0.85;
}
/* Contact form styles */
.contact-form {
margin-bottom: 2rem;
@media (max-width: 768px) {
padding: 1rem;
}
}
.contact-form .form-group {
margin-bottom: 1rem;
}
.contact-form label {
display: block;
margin-bottom: 0.5rem;
color: var(--text);
font-weight: 500;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 0.75rem;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius);
color: var(--input-text);
font-family: var(--font-sans);
font-size: 1rem;
transition: border-color 0.2s ease;
&::placeholder {
color: var(--input-placeholder);
}
&:focus {
outline: none;
border-color: var(--input-focus);
}
}
.contact-form textarea {
min-height: 150px;
resize: vertical;
overflow-y: hidden;
transition: height 0.1s ease, border-color 0.2s ease;
}
.contact-form button[type="submit"] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--primary);
color: var(--primary-inverse);
border: none;
border-radius: var(--radius);
font-size: 1rem;
cursor: pointer;
transition: background 0.2s ease;
position: relative;
min-width: 150px;
&:hover {
background: var(--primary-hover);
}
&:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.btn-loading {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
}
/* Resume download button */
.resume-download {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
/* Contact form messages */
.form-message {
padding: 1rem 1.25rem;
border-radius: var(--radius);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
.icon {
font-size: 1.25rem;
}
}
.form-success {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22c55e;
}
/* Form validation states */
.form-group {
&.error {
input,
textarea {
border-color: #ef4444;
&:focus {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
}
}
&.valid {
input,
textarea {
border-color: #22c55e;
}
}
}
.form-error {
display: block;
color: #ef4444;
font-size: 0.85rem;
margin-top: 0.25rem;
}
.form-group-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.25rem;
}
/* Character count */
.char-count {
font-size: 0.85rem;
color: var(--text-muted);
margin-left: auto;
&.warning {
color: #f59e0b;
}
}
/* Site footer styles */
.site-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 2rem 1rem 2rem 0;
margin-top: 3rem;
border-top: 1px solid var(--border-muted);
font-size: 0.9rem;
color: var(--text-muted);
}
.footer-left {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
@media (min-width: 769px) {
.docs-page .site-footer {
/* Tracks the resizable sidebar (was a hardcoded copy of the
--nav-width default, which ignored drag-resize). */
margin-left: var(--nav-width);
/* Match .docs-content's inline padding so the footer text clears the
sidebar edge and lines up with the body copy above it. */
padding-left: clamp(1rem, 3vw, 2rem);
padding-right: clamp(1rem, 3vw, 2rem);
}
}
.footer-updated {
font-style: italic;
}
/* Tagline relocated here from the about section. Keeps the hover crossfade
defined in site.css — .tagline-hover is absolutely positioned over
.tagline-primary, so the container must stay inline-block. */
.footer-tagline .tagline {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
font-style: normal;
color: var(--text-muted);
white-space: nowrap;
}
@media (max-width: 600px) {
.footer-tagline {
display: none;
}
}
.footer-attribution {
font-size: 0.85rem;
a {
color: var(--text-muted);
}
}
/* Documents bar on main page */
.documents-bar {
text-align: center;
padding: 2rem 0 0;
margin-top: 3rem;
border-top: 1px solid var(--border-muted);
h2 {
font-size: var(--font-size-lg);
margin-bottom: 0.25rem;
}
p {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-bottom: 1rem;
}
}
.documents-bar-links {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
a {
text-decoration: none;
color: inherit;
}
kbd {
cursor: pointer;
background: transparent;
border: 1px solid var(--border-muted);
color: var(--text-muted);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
&:hover {
background: var(--primary-hover);
border-color: var(--text-muted);
color: var(--primary-inverse);
}
}
}
/* Circuit diagrams.
*
* Inline SVG rather than raster, so the figures read correctly under all three
* themes: the shapes reference the same custom properties as the rest of the
* page instead of baking in colors. Namespaced under .dgm-* per the rule in
* assets/css/main.css.
*
* The accent stroke (--code-text, warm in every theme) is reserved for ONE
* thing: the conducting path that actually determines the output in that
* panel. Everything else is muted. That contrast is the whole point of the
* figures, so do not repurpose .dgm-live for general emphasis.
*/
/* Two columns by default, so a four-panel figure stacks 2x2 on a phone. Only
* the four-panel figures widen to a single row, and only when there is room:
* auto-fit was landing on three columns at desktop width, which orphaned the
* fourth case on its own line and broke the left-to-right reading order. */
.dgm-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing);
margin: 0;
}
@media (min-width: 720px) {
.dgm-grid[data-panels="4"],
.dgm-grid[data-panels="7"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.dgm-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--spacing) * 0.35);
}
.dgm-panel svg {
display: block;
width: 100%;
max-width: 210px;
height: auto;
}
.dgm-panel-cap {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--text-muted);
text-align: center;
line-height: 1.35;
}
.dgm-panel-cap b {
color: var(--text);
font-weight: 600;
}
/* --- SVG primitives --- */
.dgm-wire {
stroke: var(--text-muted);
stroke-width: 2;
fill: none;
stroke-linecap: round;
}
.dgm-dead {
stroke: var(--text-muted);
stroke-width: 2;
fill: none;
stroke-linecap: round;
opacity: 0.45;
}
.dgm-dead-dash {
stroke: var(--text-muted);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-dasharray: 4 4;
opacity: 0.5;
}
.dgm-live {
stroke: var(--code-text);
stroke-width: 3;
fill: none;
stroke-linecap: round;
}
.dgm-node {
fill: var(--code-text);
stroke: none;
}
/* Transistor bodies: on carries the accent, off recedes. */
.dgm-box-on {
stroke: var(--code-text);
stroke-width: 2;
fill: var(--code-bg);
rx: 4;
}
.dgm-box-off {
stroke: var(--text-muted);
stroke-width: 2;
fill: none;
rx: 4;
opacity: 0.55;
}
.dgm-kind {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.06em;
text-anchor: middle;
}
.dgm-state-on {
fill: var(--code-text);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-anchor: middle;
}
.dgm-state-off {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 11px;
text-anchor: middle;
}
.dgm-label {
fill: var(--text);
font-family: var(--font-mono);
font-size: 12px;
}
.dgm-rail-label {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
text-anchor: middle;
}
/* Gate symbols. The body is plain outline; the inversion bubble takes the
* accent, because "the plain gate plus the dot" is the whole rule. Its fill is
* --bg rather than none so it reads as a bubble sitting on the output lead
* instead of a ring the wire runs through. */
.dgm-gate {
stroke: var(--text);
stroke-width: 2;
fill: none;
stroke-linejoin: round;
}
.dgm-bubble {
stroke: var(--code-text);
stroke-width: 2;
fill: var(--bg);
}
/* A single wide schematic rather than a row of cases. Capped well below the
* measure so the gate symbols stay the size they are in the reference figure
* instead of ballooning on a wide screen. */
.dgm-single {
display: flex;
justify-content: center;
margin: 0;
}
.dgm-single svg {
display: block;
width: 100%;
max-width: 430px;
height: auto;
}
/* --- Layout (mask) view ---
*
* The flat cell is a stack of fabrication layers, not a schematic, so it has to
* separate four regions that the two-tone accent scheme cannot. Every layer
* derives from --text or --text-muted at a set opacity, and P versus N
* diffusion is told apart by hatch direction rather than hue, so the figures
* survive all three themes and stay readable without color vision.
*
* The accent is still reserved for the conducting path, per the rule at the top
* of this file. Nothing in a layer class may use --code-text except -live.
*/
.dgm-metal {
fill: var(--text-muted);
opacity: 0.26;
stroke: none;
}
.dgm-metal-live {
fill: var(--code-text);
opacity: 0.9;
stroke: none;
}
.dgm-poly {
fill: var(--text);
opacity: 0.14;
stroke: var(--text-muted);
stroke-width: 1;
}
.dgm-diff {
stroke: var(--text-muted);
stroke-width: 1;
}
.dgm-well {
fill: none;
stroke: var(--text-muted);
stroke-width: 1;
stroke-dasharray: 3 3;
opacity: 0.7;
}
.dgm-hatch {
stroke: var(--text-muted);
stroke-width: 1;
}
.dgm-contact {
fill: var(--text);
stroke: none;
}
.dgm-layer-cap {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.04em;
}
/* A rail carrying the live path is filled with the accent, so its label has to
* flip to the page background to stay readable. --bg is the correct value in
* every theme: the accent is light on the dark palettes and dark on the light
* one, and --bg tracks that inversion for free. */
.dgm-rail-label-live {
fill: var(--bg);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-anchor: middle;
}
/* An inverter that is part of a live loop. The plain .dgm-bubble already takes
* the accent on its stroke; this fills the triangle's bubble against a live
* wire so the ring does not read as a break in the path. */
.dgm-bubble-live {
stroke: var(--code-text);
stroke-width: 2;
fill: var(--bg);
}
/* A value plate sitting on a node. It has to mask the wire running behind it,
* so the fill is --bg rather than none, and the digit stays at full --text
* contrast in both states: which value a node holds is the point of the
* figure, so a 0 must be exactly as readable as a 1. */
.dgm-chip {
fill: var(--bg);
stroke: var(--text);
stroke-width: 1.5;
rx: 3;
}
.dgm-chip-text {
fill: var(--text);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-anchor: middle;
}
/* --- Gate-level schematics --- */
/* Signal direction. Solid, because an outlined head at this size turns into a
* smudge and the whole reason the arrows are here is to say which way the
* carry travels. */
.dgm-arrow {
fill: var(--text-muted);
stroke: none;
}
/* The name written inside a gate body. Small and muted: the shape is the
* primary identifier, and the word is there for anyone who has not yet
* memorised the shapes. */
.dgm-gate-label {
fill: var(--text-muted);
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.04em;
}
/* A dashed grouping box around a functional sub-unit, such as the carry block
* of a full adder. */
.dgm-region {
fill: none;
stroke: var(--text-muted);
stroke-width: 1;
stroke-dasharray: 4 4;
opacity: 0.65;
rx: 4;
}
/* A component collapsed to a labelled box. Filled, so it reads as opaque:
* having stopped caring what is inside is the entire point of the symbol. */
.dgm-block {
fill: var(--code-bg);
stroke: var(--text);
stroke-width: 2;
rx: 4;
}
.dgm-block-label {
fill: var(--text);
font-family: var(--font-mono);
font-size: 13px;
text-anchor: middle;
}
/* A schematic wide enough that capping it at .dgm-single's 430px would shrink
* the gate labels below readable size. Fills the measure instead, and scrolls
* rather than overflowing the page on a narrow screen. */
.dgm-wide {
margin: 0;
overflow-x: auto;
}
.dgm-wide svg {
display: block;
width: 100%;
min-width: 460px;
/* Capped, or a wide viewport scales these past 1.5x and the gate labels end
* up larger than the prose around them. */
max-width: 760px;
height: auto;
margin: 0 auto;
}
/* --- Interactive schematics ---
*
* A diagram whose inputs can be toggled. Scoped to .dgm-interactive so the
* static figures are untouched: they set liveness at generation time with
* .dgm-live, while these carry a data-net on every element and let the JS
* decide. An element with a data-net and no .is-1 is a net holding 0.
*
* The affordance is gated on .is-ready, which the JS adds once it has bound its
* handlers. If the script fails or is blocked the figure stays a correct static
* schematic of the all-zeros case and never shows a control that does nothing.
*/
.dgm-interactive .dgm-node {
fill: var(--text-muted);
}
.dgm-interactive .dgm-wire[data-net].is-1 {
stroke: var(--code-text);
stroke-width: 3;
}
.dgm-interactive .dgm-node[data-net].is-1 {
fill: var(--code-text);
}
.dgm-interactive .dgm-arrow[data-net].is-1 {
fill: var(--code-text);
}
.dgm-interactive [data-net].is-1 .dgm-gate {
stroke: var(--code-text);
}
.dgm-interactive [data-net].is-1 .dgm-gate-label,
.dgm-interactive .dgm-chip[data-net].is-1 + .dgm-chip-text {
fill: var(--code-text);
}
.dgm-interactive .dgm-chip[data-net].is-1 {
stroke: var(--code-text);
}
/* The clickable inputs. */
.dgm-hit {
fill: transparent;
}
.dgm-interactive.is-ready .dgm-toggle {
cursor: pointer;
}
.dgm-interactive.is-ready .dgm-toggle:hover .dgm-chip {
stroke: var(--code-text);
stroke-width: 2.5;
}
.dgm-toggle:focus {
outline: none;
}
.dgm-interactive.is-ready .dgm-toggle:focus-visible .dgm-chip {
stroke: var(--code-text);
stroke-width: 2.5;
}
.dgm-interactive.is-ready .dgm-toggle:focus-visible .dgm-hit {
stroke: var(--code-text);
stroke-width: 1.5;
stroke-dasharray: 3 2;
}
/* Transitions make it obvious which paths just changed, but they are decoration
* and the diagram is fully usable without them. */
@media (prefers-reduced-motion: no-preference) {
.dgm-interactive .dgm-wire,
.dgm-interactive .dgm-node,
.dgm-interactive .dgm-arrow,
.dgm-interactive .dgm-gate,
.dgm-interactive .dgm-chip {
transition: stroke 140ms ease, fill 140ms ease, stroke-width 140ms ease;
}
}
/* An arrow on a live path. */
.dgm-arrow-live {
fill: var(--code-text);
stroke: none;
}
/* --- Click paths ---
*
* "Settings, then SSH and GPG keys, then New SSH key" is a sequence, not a
* picture, so it is set as text rather than shipped as a screenshot of a menu.
* It costs nothing to serve, stays selectable and searchable, re-themes for
* free, is read correctly aloud, and cannot go stale the way a screenshot of
* someone else's UI does the moment they reskin it.
*
* The separator is generated, so it is never selected when copying the path
* and is never announced by a screen reader.
*/
.ui-path {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem 0;
margin: 1rem 0;
padding: 0;
list-style: none;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
/* The li carries the separator and the span carries the chip. Putting both on
* the li would render the chevron inside the bordered box instead of between
* two of them. */
.ui-path li {
display: flex;
align-items: center;
}
.ui-path li span {
padding: 0.2rem 0.5rem;
border: 1px solid var(--border-muted);
border-radius: 4px;
background: var(--code-bg);
color: var(--text);
}
.ui-path li + li::before {
content: "\203A";
padding: 0 0.45rem;
color: var(--text-muted);
font-weight: 600;
}
/* The starting point of a path: the app it happens in. */
.ui-path li:first-child span {
border-style: dashed;
background: none;
color: var(--text-muted);
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
@media (max-width: 768px) {
/* Sticky toolbar only (the fixed mobile header is gone). */
scroll-padding-top: 60px;
}
}
:root { --body-px: clamp(1rem, 3vw, 50px); }
body {
padding: 0 var(--body-px);
background: var(--bg);
color: var(--text);
@media (max-width: 768px) {
--body-px: 1rem;
}
@media (max-width: 480px) {
--body-px: 0.75rem;
}
}
h1, h2, h3, h4, h5, h6, strong {
color: var(--text);
}
main {
padding: 0 !important;
}
.docs-page main {
@media (min-width: 769px) {
margin-left: var(--nav-width);
}
}
.home-layout main {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
padding-top: 1.5rem;
}
#about {
padding-top: 0.5rem;
}
/* Consistent vertical rhythm between homepage sections */
.home-layout main > section {
margin-bottom: 4rem;
}
.home-layout main > .documents-bar {
margin-bottom: 0;
}
#contact-cta p {
max-width: 42rem;
}
.demo-offline {
max-width: 42rem;
margin: 4rem auto;
text-align: center;
[role="button"].outline {
border-color: var(--text);
color: var(--text);
}
}
.contact-cta-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
[role="button"].outline {
background-color: transparent;
border-color: var(--text);
color: var(--text);
&:hover {
background-color: var(--primary-hover);
color: var(--primary-inverse);
}
}
}
section {
float: none;
max-width: 100%;
width: 100%;
}
.tagline-container {
position: relative;
display: inline-block;
cursor: default;
}
.tagline {
transition: opacity 1s ease;
}
.tagline-primary {
opacity: 1;
}
.tagline-hover {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.tagline-container:hover .tagline-primary {
opacity: 0;
}
.tagline-container:hover .tagline-hover {
opacity: 1;
}
[hidden] {
display: none !important;
}
/* Algorithms index page (layout: default) */
.algorithms-index {
padding: 2rem 1rem;
}
.algorithms-index h1 {
margin-bottom: 2rem;
}
/* Placeholder page */
.placeholder-page {
padding: 2rem 1rem;
text-align: center;
}
.placeholder-page h1 {
margin-bottom: 1rem;
}
.placeholder-page p {
color: var(--text-muted);
}