:root { --bg: #edefe7; --surface: #f6f7f1; --text: #2f3a26; --muted: #6c7559; --accent: #6b8e4e; --accent-hover: #87a96b; --border: #c9d1b8; /* Stable light foreground used for text on accent/dark backgrounds — decoupled from --surface so a dark-theme can flip the card surface without inverting the legibility of accent buttons and the lightbox. */ --on-accent: #f6f7f1; } /* Dark theme — opt-in site-wide. The inline head script in views.rs sets before paint, so the variable overrides cascade to every element with no FOUC. `--on-accent` stays light from :root, so accent buttons and the lightbox caption keep legible contrast. */ html[data-theme="dark"] { --bg: #0d0e0c; --surface: #181a17; --text: #e8ebe2; --muted: #9aa395; --border: #2a2e26; --accent: #8db168; --accent-hover: #a8c884; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } header.site { border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; background: var(--surface); display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; } header.site .site-left { display: flex; align-items: center; gap: 0.75rem; } header.site .brand { font-weight: 600; letter-spacing: 0.02em; font-size: 1.1rem; color: var(--text); } /* Theme toggle: one button with both sun + moon icons stacked; CSS shows the icon for the *target* theme based on the current data-theme value, so the button visually previews what clicking it will do. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle .theme-icon { width: 1.1rem; height: 1.1rem; display: block; } /* Show moon in light mode (clicking goes dark); show sun in dark mode. */ html[data-theme="light"] .theme-icon-sun, html[data-theme="dark"] .theme-icon-moon { display: none; } header.site .brand:hover { color: var(--accent); text-decoration: none; } header.site .topnav { display: flex; gap: 1.25rem; font-size: 0.95rem; } header.site .topnav a { color: var(--muted); } header.site .topnav a:hover { color: var(--accent-hover); text-decoration: none; } main { margin: 2rem 0; padding: 0 1.5rem; } nav.crumbs { margin-bottom: 1.5rem; font-size: 0.95rem; color: var(--muted); } nav.crumbs .sep { margin: 0 0.4rem; color: var(--border); } nav.crumbs .current { color: var(--text); font-weight: 500; } section.dirs { margin-bottom: 2rem; } section.dirs h2, section.gallery h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 0.75rem; font-weight: 600; } section.gallery h2 { display: flex; align-items: center; gap: 0.5rem; } .collapse-toggle { background: transparent; border: none; padding: 0.15rem; margin: 0; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .collapse-toggle:hover { color: var(--accent); background: var(--surface); } .collapse-toggle svg { width: 1rem; height: 1rem; display: block; transition: transform 0.15s ease; } section.gallery.collapsed .collapse-toggle svg { transform: rotate(-90deg); } section.gallery.collapsed ul.grid { display: none; } section.gallery.hidden-by-ancestor { display: none; } ul.dirlist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } ul.dirlist li a { display: inline-block; padding: 0.4rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text); } ul.dirlist li a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); text-decoration: none; } ul.dirlist li a .count { color: var(--muted); font-size: 0.85em; } ul.dirlist li a:hover .count { color: var(--on-accent); } ul.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } li.tile a { display: block; border-radius: 4px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 0.15s ease, box-shadow 0.15s ease; } li.tile a:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(47, 58, 38, 0.15); } li.tile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } p.empty { color: var(--muted); font-style: italic; } .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; background: rgba(20, 24, 16, 0.88); z-index: 1000; padding: 2rem; } @supports (backdrop-filter: blur(4px)) { .lightbox { background: rgba(20, 24, 16, 0.72); backdrop-filter: blur(4px); } } .lightbox.open { display: flex; } .lightbox .lb-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; } .lightbox img { max-width: calc(100vw - 8rem); max-height: calc(100vh - 4rem); object-fit: contain; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); background: var(--surface); } .lightbox .lb-btn { position: absolute; background: rgba(246, 247, 241, 0.12); color: var(--on-accent); border: 1px solid rgba(246, 247, 241, 0.25); cursor: pointer; font-family: inherit; padding: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; } .lightbox .lb-btn svg { display: block; width: 55%; height: 55%; } .lightbox .lb-btn:hover { background: rgba(246, 247, 241, 0.22); border-color: rgba(246, 247, 241, 0.45); } .lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.75rem; line-height: 1; } .lightbox .lb-prev { left: 1rem; } .lightbox .lb-next { right: 1rem; } .lightbox .lb-close { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; } /* ---- Nether (Obsidian vault) ---- */ main.nether { margin: 0; padding: 0; } .nether-layout { display: flex; align-items: flex-start; min-height: calc(100vh - 4rem); } .nether-sidebar { flex: 0 0 190px; align-self: stretch; padding: 1.25rem 0.75rem; background: var(--surface); border-right: 1px solid var(--border); font-size: 0.82rem; line-height: 1.35; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; } .nether-sidebar .nether-home { display: block; font-weight: 600; color: var(--text); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .nether-sidebar .nether-home:hover { color: var(--accent); text-decoration: none; } .nether-views { display: flex; gap: 0.3rem; margin-bottom: 1rem; } .nether-views a { flex: 1 1 0; text-align: center; padding: 0.3rem 0.4rem; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); font-weight: 500; } .nether-views a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; } .nether-views a.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* ---- Nether graph view ---- */ /* The graph fills the whole pane below the header, edge-to-edge, with the breadcrumb floating over the canvas so the drawing area is maximised. The compound selector outranks the `.nether-content` defaults above. */ .nether-content.graph-content { max-width: none; padding: 0; display: flex; } .graph-stage { position: relative; flex: 1 1 auto; height: calc(100vh - 4rem); background: var(--surface); overflow: hidden; } .graph-stage .crumbs { position: absolute; top: 0.75rem; left: 1rem; z-index: 1; padding: 0.3rem 0.7rem; border-radius: 6px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(2px); } #graph-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; } #graph-canvas:active { cursor: grabbing; } .graph-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); } .graph-empty[hidden] { display: none; } ul.nav-tree { list-style: none; margin: 0; padding: 0; } ul.nav-tree ul.nav-tree { margin-left: 0.6rem; padding-left: 0.6rem; border-left: 1px solid var(--border); } .nav-folder > .folder-name { display: block; font-weight: 600; color: var(--muted); margin: 0.5rem 0 0.25rem; } .nav-note a { display: block; padding: 0.15rem 0.4rem; border-radius: 4px; color: var(--text); } .nav-note a:hover { background: var(--bg); color: var(--accent); text-decoration: none; } .nav-note a.active { background: var(--accent); color: var(--on-accent); } .nether-content { flex: 1 1 auto; min-width: 0; padding: 2rem 2rem; max-width: 820px; } .note-body { line-height: 1.65; } .note-body h1, .note-body h2, .note-body h3, .note-body h4 { color: var(--text); line-height: 1.25; margin: 1.6rem 0 0.6rem; } .note-body h1 { font-size: 1.8rem; } .note-body h2 { font-size: 1.4rem; } .note-body h3 { font-size: 1.15rem; } .note-body h4 { font-size: 1rem; } .note-body hr { border: none; border-top: 1px solid var(--border); margin: 0.8rem 0; } .note-body ul, .note-body ol { padding-left: 1.5rem; } .note-body li { margin: 0.15rem 0; } .note-body code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.35rem; font-size: 0.9em; } .note-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.9rem 1rem; overflow-x: auto; } .note-body pre code { background: none; border: none; padding: 0; } .note-body blockquote { margin: 0.8rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--border); color: var(--muted); } .note-body table { border-collapse: collapse; margin: 0.8rem 0; } .note-body th, .note-body td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; } .note-body img { max-width: 100%; height: auto; border-radius: 4px; } .wikilink-missing { color: var(--muted); border-bottom: 1px dashed var(--border); cursor: help; } @media (max-width: 700px) { .nether-layout { flex-direction: column; } .nether-sidebar { flex-basis: auto; width: 100%; position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); } .nether-content { padding: 1.5rem 1.25rem; } } @media (max-width: 600px) { header.site { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.85rem 1rem; } header.site .site-left { justify-content: space-between; } header.site .topnav { flex-wrap: wrap; gap: 0.75rem 1rem; font-size: 0.9rem; } .lightbox { padding: 0.5rem; } .lightbox img { max-width: 100vw; max-height: calc(100vh - 1rem); } .lightbox .lb-nav { width: 3rem; height: 3rem; } .lightbox .lb-prev { left: 0.5rem; } .lightbox .lb-next { right: 0.5rem; } .lightbox .lb-close { width: 3rem; height: 3rem; top: 0.5rem; right: 0.5rem; } } /* ---- Work (client delivery) ---- */ main.work { max-width: 1100px; margin: 2rem auto; } .work-title { margin: 0 0 1rem; font-size: 1.5rem; color: var(--text); } .banner { border-radius: 6px; padding: 0.7rem 1rem; margin: 0 0 1rem; font-size: 0.95rem; } .banner-error { background: #f8d8c8; border: 1px solid #d4886a; color: #6e2a10; } ul.work-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } li.work-card a { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); } li.work-card a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); text-decoration: none; } .work-name { font-weight: 600; font-size: 1rem; } .work-counts { font-size: 0.85rem; color: var(--muted); } li.work-card a:hover .work-counts { color: var(--on-accent); } .work-downloads { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1.5rem; } .dl-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; font-weight: 500; } #work-password { width: 100%; max-width: 320px; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; } #work-password:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .dl-locked { margin: 0; color: var(--muted); font-style: italic; } .dl-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; } /* Bulk download bar uses one row per scope: a label on the left, three submit buttons on the right (JPEG / RAW / Both). Each row is its own
so the hidden scope field rides with whichever kind button fires. */ .dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 0; margin: 0; border-bottom: 1px dashed var(--border); } .dl-row:last-child { border-bottom: none; } .dl-row-label { flex: 1 1 12rem; font-weight: 500; color: var(--text); } .dl-row .dl-buttons { margin-top: 0; } .dl-buttons button { font: inherit; cursor: pointer; padding: 0.45rem 0.9rem; border-radius: 4px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); transition: background 0.15s ease, border-color 0.15s ease; } .dl-buttons button:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); } .dl-buttons button:disabled { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; } /* Work galleries reuse the /all grid scaffolding but with bigger tiles so clients see large previews; the name + per-photo download surface only in the lightbox (see lightbox.js + .lb-caption below). */ main.work .work-gallery { margin-top: 1.5rem; } main.work .work-gallery h2 { font-size: 1rem; text-transform: lowercase; letter-spacing: 0.02em; color: var(--muted); margin: 0 0 0.6rem; } main.work .work-gallery .section-label { color: var(--text); font-weight: 600; } main.work .work-gallery .section-count { font-weight: 400; font-size: 0.85rem; color: var(--muted); } /* Photos in a work item land in a CSS-columns masonry rather than a fixed square grid, so each tile renders at the image's natural aspect ratio without leaving gaps for taller portraits next to shorter landscapes. */ main.work ul.work-grid { display: block; grid-template-columns: none; gap: 0; columns: 360px; column-gap: 1.25rem; } main.work ul.work-grid li.tile { break-inside: avoid; margin: 0 0 1.25rem; } main.work ul.work-grid li.tile a { display: block; } main.work ul.work-grid li.tile img { aspect-ratio: auto; width: 100%; height: auto; object-fit: initial; } .lb-caption { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; max-width: calc(100vw - 8rem); padding: 0.55rem 0.85rem; border-radius: 6px; background: rgba(20, 24, 16, 0.78); color: var(--on-accent); font-size: 0.9rem; z-index: 1; } .lb-caption[hidden] { display: none; } .lb-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; } .lb-download { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.85rem; border-radius: 4px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .lb-download:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .lb-download[hidden] { display: none; }