mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-10-24 14:39:14 +00:00
kennethreitz
ce93f429a2
Publish the Obsidian vault's Knowledge folder as /knowledge (881 notes, 67 folders), with a Knowledge item in the nav and footer. - scripts/import_knowledge.py regenerates data/knowledge from the vault: slugged paths, folder notes as index pages, wikilinks resolved to site links (or plain text), callouts, highlights, and Dataview tables rendered statically. Personal notes are withheld via an exclusion list plus a privacy guard. - tuftecms/core/knowledge.py builds a concept index from note titles and aliases. First mentions on ordinary pages link to their Knowledge note (capped, never in headings, code, links, or sidenotes); Knowledge pages list related notes and where they're mentioned across the site; other pages get a Related Knowledge block. - Knowledge URLs join sitemap.xml (so the sweep test covers them), never displace existing legacy slugs, list alphabetically, and mermaid diagrams render client-side only on pages that have them.
1247 lines
27 KiB
CSS
1247 lines
27 KiB
CSS
/* Site CSS — layout, navigation, dark mode, and the design tokens
|
|
that keep both modes (and the rotating accent schemes) coherent. */
|
|
|
|
/* =========================================
|
|
Design tokens
|
|
========================================= */
|
|
|
|
/* Warm paper by day. */
|
|
:root {
|
|
--paper: #fffff8;
|
|
--ink: #111;
|
|
--ink-muted: #6e6759;
|
|
--ink-faint: #99917f;
|
|
--line: #e0ddd0;
|
|
--line-soft: #eceade;
|
|
--surface: #fbfaf0;
|
|
--surface-raised: #fffef4;
|
|
--code-bg: #f6f5ea;
|
|
--code-border: #e6e3d3;
|
|
--selection: rgba(255, 224, 110, 0.45);
|
|
--shadow-soft: 0 10px 28px rgba(54, 47, 33, 0.08);
|
|
--accent: #9c4b2f;
|
|
--cat-software: #a8443c;
|
|
--cat-essay: #3a6b8a;
|
|
--cat-ai: #7a5a9e;
|
|
--cat-music: #a8762a;
|
|
--cat-poetry: #47795a;
|
|
--cat-philosophy: #75726a;
|
|
}
|
|
|
|
/* Warm lamplight by night (no-JS fallback; the body classes below win
|
|
once the theme script runs). */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--paper: #0d1117;
|
|
--ink: #c9d1d9;
|
|
--ink-muted: #9aa4af;
|
|
--ink-faint: #6e7681;
|
|
--line: #30363d;
|
|
--line-soft: #21262d;
|
|
--surface: #161b22;
|
|
--surface-raised: #1b212b;
|
|
--code-bg: #161b22;
|
|
--code-border: #30363d;
|
|
--selection: rgba(255, 196, 87, 0.25);
|
|
--shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.25);
|
|
--accent: #cf8a5b;
|
|
--cat-software: #d08078;
|
|
--cat-essay: #7fa8c4;
|
|
--cat-ai: #ab90d0;
|
|
--cat-music: #cfa25e;
|
|
--cat-poetry: #85b096;
|
|
--cat-philosophy: #9a968c;
|
|
}
|
|
}
|
|
|
|
body.light-mode {
|
|
--paper: #fffff8;
|
|
--ink: #111;
|
|
--ink-muted: #6e6759;
|
|
--ink-faint: #99917f;
|
|
--line: #e0ddd0;
|
|
--line-soft: #eceade;
|
|
--surface: #fbfaf0;
|
|
--surface-raised: #fffef4;
|
|
--code-bg: #f6f5ea;
|
|
--code-border: #e6e3d3;
|
|
--selection: rgba(255, 224, 110, 0.45);
|
|
--shadow-soft: 0 10px 28px rgba(54, 47, 33, 0.08);
|
|
--accent: #9c4b2f;
|
|
--cat-software: #a8443c;
|
|
--cat-essay: #3a6b8a;
|
|
--cat-ai: #7a5a9e;
|
|
--cat-music: #a8762a;
|
|
--cat-poetry: #47795a;
|
|
--cat-philosophy: #75726a;
|
|
}
|
|
|
|
body.dark-mode {
|
|
--paper: #0d1117;
|
|
--ink: #c9d1d9;
|
|
--ink-muted: #9aa4af;
|
|
--ink-faint: #6e7681;
|
|
--line: #30363d;
|
|
--line-soft: #21262d;
|
|
--surface: #161b22;
|
|
--surface-raised: #1b212b;
|
|
--code-bg: #161b22;
|
|
--code-border: #30363d;
|
|
--selection: rgba(255, 196, 87, 0.25);
|
|
--shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.25);
|
|
--accent: #cf8a5b;
|
|
--cat-software: #d08078;
|
|
--cat-essay: #7fa8c4;
|
|
--cat-ai: #ab90d0;
|
|
--cat-music: #cfa25e;
|
|
--cat-poetry: #85b096;
|
|
--cat-philosophy: #9a968c;
|
|
}
|
|
|
|
/* Accent schemes — the theme script picks one at random on ~20% of
|
|
visits. Everything downstream (progress bar, hover underlines,
|
|
focus rings) follows the accent. */
|
|
body.scheme-ocean { --accent: #33707e; }
|
|
body.scheme-forest { --accent: #43714a; }
|
|
body.scheme-sunset { --accent: #b05a35; }
|
|
body.scheme-lavender { --accent: #6d5b9e; }
|
|
body.scheme-rose { --accent: #a34d62; }
|
|
body.scheme-sage { --accent: #6a7a52; }
|
|
body.scheme-amber { --accent: #a17420; }
|
|
|
|
body.dark-mode.scheme-ocean { --accent: #7fb5c0; }
|
|
body.dark-mode.scheme-forest { --accent: #8cbb95; }
|
|
body.dark-mode.scheme-sunset { --accent: #d89b74; }
|
|
body.dark-mode.scheme-lavender { --accent: #a89bd4; }
|
|
body.dark-mode.scheme-rose { --accent: #cf8fa0; }
|
|
body.dark-mode.scheme-sage { --accent: #a8b98d; }
|
|
body.dark-mode.scheme-amber { --accent: #cfa552; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body.scheme-ocean:not(.light-mode) { --accent: #7fb5c0; }
|
|
body.scheme-forest:not(.light-mode) { --accent: #8cbb95; }
|
|
body.scheme-sunset:not(.light-mode) { --accent: #d89b74; }
|
|
body.scheme-lavender:not(.light-mode) { --accent: #a89bd4; }
|
|
body.scheme-rose:not(.light-mode) { --accent: #cf8fa0; }
|
|
body.scheme-sage:not(.light-mode) { --accent: #a8b98d; }
|
|
body.scheme-amber:not(.light-mode) { --accent: #cfa552; }
|
|
}
|
|
|
|
/* =========================================
|
|
Base
|
|
========================================= */
|
|
|
|
body {
|
|
background-color: var(--paper);
|
|
color: var(--ink);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Prevent FOUC by hiding content until stylesheets load */
|
|
html {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
html.loaded {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.1s ease-in;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--selection);
|
|
}
|
|
|
|
/* Keyboard focus follows the accent. */
|
|
a:focus-visible,
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Hovered links reveal the accent through the underline. */
|
|
a:hover {
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
|
|
/* Legend dots for content guide */
|
|
.legend-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 0.3rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Reading progress indicator */
|
|
.reading-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0%;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
z-index: 1000;
|
|
transition: width 0.1s ease-out;
|
|
}
|
|
|
|
/* =========================================
|
|
Header and navigation
|
|
========================================= */
|
|
|
|
header {
|
|
position: relative;
|
|
z-index: 9999;
|
|
}
|
|
|
|
header nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.25rem 0;
|
|
position: relative;
|
|
z-index: 9999;
|
|
}
|
|
|
|
nav > a, nav > .nav-dropdown {
|
|
margin-right: 1rem;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-dropdown-trigger {
|
|
cursor: pointer;
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.055em;
|
|
text-underline-offset: 0.18em;
|
|
padding-bottom: 0;
|
|
display: inline;
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav-dropdown-trigger:hover {
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
|
|
.nav-dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
min-width: 250px;
|
|
max-width: 400px;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-soft);
|
|
z-index: 10000;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.nav-dropdown:hover .nav-dropdown-content,
|
|
.nav-dropdown:focus-within .nav-dropdown-content,
|
|
.nav-dropdown-content:hover {
|
|
display: block;
|
|
}
|
|
|
|
/* Skip link: invisible until focused, for keyboard and screen-reader users. */
|
|
.skip-link {
|
|
position: absolute;
|
|
left: -9999px;
|
|
top: 0;
|
|
z-index: 10001;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 0 0 4px 0;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
left: 0;
|
|
}
|
|
|
|
.tree-item {
|
|
border-radius: 4px;
|
|
padding: 0.38rem 0.45rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: background-color 0.15s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.tree-item:hover {
|
|
background: color-mix(in srgb, var(--accent) 7%, transparent);
|
|
}
|
|
|
|
.tree-item-icon {
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.tree-item a {
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.tree-item a:hover {
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tree-folder a {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* =========================================
|
|
GitHub corner and theme toggle
|
|
========================================= */
|
|
|
|
.github-corner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 9998;
|
|
opacity: 0.85;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.github-corner:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.github-corner-img {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
body.dark-mode .github-corner {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
body.dark-mode .github-corner:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
body.dark-mode .github-corner-img {
|
|
filter: invert(1);
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.github-corner-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
width: 2.45rem;
|
|
height: 2.45rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: color-mix(in srgb, var(--surface) 85%, transparent);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
color: var(--ink-faint);
|
|
padding: 0;
|
|
margin: 0;
|
|
opacity: 0.62;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
|
transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
|
|
line-height: 1;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
opacity: 1;
|
|
color: var(--accent);
|
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
|
}
|
|
|
|
.sun-icon,
|
|
.moon-icon {
|
|
display: none;
|
|
}
|
|
|
|
body.light-mode .sun-icon {
|
|
display: inline;
|
|
}
|
|
|
|
body.dark-mode .moon-icon {
|
|
display: inline;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.theme-toggle {
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
}
|
|
}
|
|
|
|
main {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
article {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Dropdown navigation styles */
|
|
.nav-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0.5rem;
|
|
margin: -0.5rem;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.nav-dropdown .dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 999999;
|
|
min-width: 280px;
|
|
padding: 0.5rem 0;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.nav-dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.nav-dropdown .dropdown-content a {
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
font-size: 0.9rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.nav-dropdown .dropdown-content a:hover {
|
|
background-color: var(--line-soft);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.nav-dropdown .dropdown-content a .index-description {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--ink-faint);
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.nav-dropdown > a::after {
|
|
content: "\00a0\25BC";
|
|
font-size: 0.7rem;
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* =========================================
|
|
Footer
|
|
========================================= */
|
|
|
|
.footer-map {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0 0.45rem;
|
|
margin-top: 2.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 0.95rem;
|
|
line-height: 2;
|
|
}
|
|
.footer-content {
|
|
width: 65%;
|
|
margin-top: 3rem;
|
|
}
|
|
.footer-map a { color: var(--ink-faint); text-decoration: none; }
|
|
.footer-map a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
|
|
.footer-map .sep { color: var(--line); }
|
|
|
|
.footer-note p {
|
|
width: 100% !important;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.95rem !important;
|
|
line-height: 1.45;
|
|
text-align: left !important;
|
|
}
|
|
|
|
@media (max-width: 1400px) {
|
|
.footer-content {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.footer-content {
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.footer-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-map {
|
|
gap: 0.15rem 0.7rem;
|
|
}
|
|
|
|
.footer-map .sep {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* =========================================
|
|
Keep Reading (related essays)
|
|
========================================= */
|
|
|
|
.related-essays {
|
|
margin-top: 3.5rem;
|
|
padding-top: 1.25rem;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.related-essays h2 {
|
|
font-size: 1.3rem;
|
|
font-style: italic;
|
|
margin-top: 0;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.related-essays ul { list-style: none; padding-left: 0; margin-top: 0; }
|
|
.related-essays li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
margin: 0.5rem 0;
|
|
font-size: 1.15rem;
|
|
}
|
|
.related-essays li::marker { content: none; }
|
|
.related-icon {
|
|
width: 18px; height: 18px;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* =========================================
|
|
Shared page surfaces
|
|
========================================= */
|
|
|
|
main > h1,
|
|
main article > header h1 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--ink-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.page-kicker,
|
|
.browse-by-type strong,
|
|
.section-label {
|
|
color: var(--ink-faint);
|
|
font-size: 0.82rem;
|
|
font-variant: small-caps;
|
|
font-weight: 400;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.archive-toolbar,
|
|
.year-picker,
|
|
.search-container,
|
|
.alphabet-nav {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.year-picker,
|
|
.archive-toolbar {
|
|
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.type-links a,
|
|
.year-links a,
|
|
.sort-toggle,
|
|
.badge,
|
|
.reading-time,
|
|
.search-result-type {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sort-toggle,
|
|
.graph-controls button {
|
|
min-height: 2.1rem;
|
|
padding: 0.42rem 0.78rem;
|
|
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
color: var(--ink-muted);
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
font-family: et-book, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
|
|
font-size: 0.9rem;
|
|
line-height: 1;
|
|
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.sort-toggle:hover,
|
|
.graph-controls button:hover,
|
|
.graph-controls button.active {
|
|
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
|
|
color: var(--ink);
|
|
}
|
|
|
|
.archive-filter,
|
|
.search-input,
|
|
input[type="search"],
|
|
input[type="text"] {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* =========================================
|
|
Archive filter + year counts
|
|
========================================= */
|
|
|
|
.archive-filter {
|
|
flex: 1;
|
|
min-width: 220px;
|
|
max-width: 24rem;
|
|
font-family: inherit;
|
|
font-size: 0.95rem;
|
|
padding: 0.45rem 0.8rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
color: inherit;
|
|
outline: none;
|
|
}
|
|
.archive-filter:focus { border-color: var(--accent); }
|
|
.filter-count { color: var(--ink-faint); font-size: 0.9rem; white-space: nowrap; }
|
|
.year-count {
|
|
font-size: 0.5em;
|
|
font-weight: normal;
|
|
color: var(--ink-faint);
|
|
vertical-align: middle;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 0.1em 0.7em;
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
/* =========================================
|
|
Homepage
|
|
========================================= */
|
|
|
|
.muted { color: var(--ink-faint); font-size: 0.95rem; }
|
|
.muted a { color: var(--ink-faint); }
|
|
|
|
.home-masthead {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.home-masthead h1 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.7rem;
|
|
}
|
|
|
|
.home-page .subtitle,
|
|
.home-lede,
|
|
.home-actions,
|
|
.home-link-list,
|
|
.home-thread-list,
|
|
.home-next-links {
|
|
width: 65% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.home-page .subtitle {
|
|
margin-top: 0;
|
|
margin-bottom: 2.1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.home-lede {
|
|
margin-bottom: 0;
|
|
line-height: 1.58 !important;
|
|
}
|
|
|
|
.home-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.55rem;
|
|
margin-top: 1.8rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.home-actions a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 2rem;
|
|
padding: 0.28rem 0.75rem;
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 999px;
|
|
color: var(--ink-muted);
|
|
background: color-mix(in srgb, var(--surface) 74%, transparent);
|
|
font-size: 0.92rem;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
|
|
}
|
|
|
|
.home-actions a:hover {
|
|
color: var(--ink);
|
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
|
background: color-mix(in srgb, var(--accent) 7%, transparent);
|
|
}
|
|
|
|
.home-page section {
|
|
padding-top: 0;
|
|
margin-top: 4.2rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.home-page h2 {
|
|
width: 65%;
|
|
max-width: 65%;
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.25rem !important;
|
|
padding-bottom: 0.45rem;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.home-link-list,
|
|
.home-thread-list {
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.home-link-list p,
|
|
.home-thread-list p {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0.78rem 0;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
color: var(--ink-muted);
|
|
font-size: 1.08rem !important;
|
|
line-height: 1.45;
|
|
text-align: left !important;
|
|
hyphens: none;
|
|
-webkit-hyphens: none;
|
|
}
|
|
|
|
.home-link-list p:last-child,
|
|
.home-thread-list p:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.home-link-list strong,
|
|
.home-thread-list strong {
|
|
color: var(--ink);
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
.recent-post {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.85rem;
|
|
width: 65%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 0;
|
|
padding: 0.9rem 0;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
transition: background-color 0.18s ease, border-color 0.18s ease;
|
|
}
|
|
|
|
.recent-post:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.recent-post:hover {
|
|
background: color-mix(in srgb, var(--surface) 62%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 18%, var(--line-soft));
|
|
}
|
|
|
|
.recent-post-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.recent-post-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.recent-post-title {
|
|
font-size: 1.08rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.recent-post-title a {
|
|
text-decoration-thickness: 0.05em;
|
|
}
|
|
|
|
.recent-post-date {
|
|
color: var(--ink-faint);
|
|
font-size: 0.85rem;
|
|
margin-left: 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.recent-post p {
|
|
width: 100% !important;
|
|
margin: 0.35rem 0 0 !important;
|
|
color: var(--ink-muted);
|
|
font-size: 1.02rem !important;
|
|
line-height: 1.38;
|
|
text-align: left !important;
|
|
hyphens: none;
|
|
-webkit-hyphens: none;
|
|
}
|
|
|
|
.home-next-links {
|
|
margin-top: 1.8rem;
|
|
padding-left: 1rem;
|
|
line-height: 1.55;
|
|
border-left: 2px solid color-mix(in srgb, var(--accent) 25%, var(--line-soft));
|
|
}
|
|
|
|
.home-closing {
|
|
width: 65%;
|
|
margin-top: 3.2rem !important;
|
|
padding-top: 1.1rem !important;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.home-closing p {
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
text-align: left !important;
|
|
}
|
|
|
|
@media (max-width: 1400px) {
|
|
.home-page .subtitle,
|
|
.home-lede,
|
|
.home-actions,
|
|
.home-link-list,
|
|
.home-thread-list,
|
|
.home-next-links,
|
|
.home-page h2,
|
|
.home-closing,
|
|
.recent-post {
|
|
width: 80% !important;
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.home-page .subtitle,
|
|
.home-lede,
|
|
.home-actions,
|
|
.home-link-list,
|
|
.home-thread-list,
|
|
.home-next-links,
|
|
.home-page h2,
|
|
.home-closing,
|
|
.recent-post {
|
|
width: 90% !important;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.home-page .subtitle {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.home-masthead {
|
|
margin-top: 3.2rem;
|
|
margin-bottom: 3.2rem;
|
|
}
|
|
|
|
.home-page section {
|
|
margin-top: 3.4rem;
|
|
}
|
|
|
|
.home-page p:not(.sidenote):not(.marginnote) {
|
|
text-align: left !important;
|
|
hyphens: none;
|
|
-webkit-hyphens: none;
|
|
}
|
|
|
|
.home-page h2 {
|
|
flex-wrap: wrap;
|
|
gap: 0.2rem 0.45rem;
|
|
}
|
|
|
|
.home-page .subtitle,
|
|
.home-lede,
|
|
.home-actions,
|
|
.home-link-list,
|
|
.home-thread-list,
|
|
.home-next-links,
|
|
.home-page h2,
|
|
.home-closing,
|
|
.recent-post {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.home-link-list p,
|
|
.home-thread-list p {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.recent-post-date {
|
|
display: block;
|
|
margin-left: 0;
|
|
margin-top: 0.15rem;
|
|
}
|
|
}
|
|
|
|
.h2-note { font-size: 0.6em; font-weight: normal; }
|
|
|
|
/* =========================================
|
|
Quiet badges (essay metadata, shared)
|
|
========================================= */
|
|
|
|
.badge {
|
|
font-variant: normal;
|
|
font-size: 0.85rem;
|
|
letter-spacing: normal;
|
|
font-weight: 400;
|
|
font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
|
|
color: var(--ink-muted);
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 0.15rem 0.7rem;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease, border-color 0.2s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
.badge:hover {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* =========================================
|
|
Bookish refinements
|
|
========================================= */
|
|
|
|
/* Motion: smooth where welcome, still where not. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar keeps to the palette. */
|
|
html {
|
|
scrollbar-color: var(--line) transparent;
|
|
}
|
|
|
|
/* Underlines: quiet by default, accent on hover (hover rule above). */
|
|
a:link,
|
|
a:visited {
|
|
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
|
|
transition: text-decoration-color 0.15s ease;
|
|
}
|
|
|
|
/* Navigation as running heads: small caps, airy tracking. */
|
|
header nav a,
|
|
header nav .nav-dropdown-trigger {
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.footer-map a {
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Sidenote numbers carry the accent into the margin. */
|
|
.sidenote-number::after,
|
|
.sidenote::before {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* The asterism leans toward the accent. */
|
|
hr::before {
|
|
color: color-mix(in srgb, var(--accent) 60%, var(--ink-faint));
|
|
}
|
|
|
|
/* Old-style figures for dates and counts, as a book would set them. */
|
|
.recent-post-date,
|
|
.post-date,
|
|
.item-date,
|
|
.filter-count,
|
|
.year-count {
|
|
font-family: et-book-roman-old-style, et-book, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
/* List markers recede. */
|
|
main li::marker {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* Tables: hairline book rules, small-caps headers. */
|
|
main table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
main th {
|
|
font-weight: 400;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.04em;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 0.4rem 1rem 0.4rem 0;
|
|
}
|
|
|
|
main td {
|
|
border-bottom: 1px solid var(--line-soft);
|
|
padding: 0.4rem 1rem 0.4rem 0;
|
|
}
|
|
|
|
/* Figure captions read as marginalia. */
|
|
figcaption {
|
|
color: var(--ink-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Footer note recedes politely. */
|
|
.footer-note {
|
|
color: var(--ink-faint);
|
|
font-size: 0.9rem;
|
|
}
|
|
.footer-note a {
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* Anchored headings land clear of the viewport edge. */
|
|
h2[id],
|
|
h3[id],
|
|
h4[id] {
|
|
scroll-margin-top: 2rem;
|
|
}
|
|
|
|
/* Paragraphs avoid lonely last words where the browser can help. */
|
|
main p,
|
|
main li,
|
|
main blockquote {
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* =========================================
|
|
Page-to-page view transitions
|
|
========================================= */
|
|
|
|
/* A brief cross-fade between pages, like turning a leaf. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.18s;
|
|
}
|
|
}
|
|
|
|
/* =========================================
|
|
Heading anchor links
|
|
========================================= */
|
|
|
|
/* A quiet section mark surfaces on hover, for sharing deep links. */
|
|
.heading-anchor {
|
|
margin-left: 0.45rem;
|
|
font-size: 0.7em;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
color: var(--ink-faint);
|
|
text-decoration: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
h2:hover .heading-anchor,
|
|
h3:hover .heading-anchor,
|
|
h4:hover .heading-anchor,
|
|
.heading-anchor:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.heading-anchor:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.heading-anchor {
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
|
|
/* =========================================
|
|
Internal link hover previews
|
|
========================================= */
|
|
|
|
/* A small card of what waits on the other side of a link. */
|
|
.link-preview {
|
|
position: absolute;
|
|
z-index: 10001;
|
|
width: min(21.5rem, calc(100vw - 2rem));
|
|
box-sizing: border-box;
|
|
padding: 0.9rem 1rem 0.8rem;
|
|
background: var(--surface-raised);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow-soft);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(3px);
|
|
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.link-preview.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.link-preview-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.link-preview-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.link-preview-title {
|
|
font-size: 1.02rem;
|
|
font-style: italic;
|
|
line-height: 1.3;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.link-preview-excerpt {
|
|
width: 100% !important;
|
|
margin: 0.5rem 0 0 !important;
|
|
color: var(--ink-muted);
|
|
font-size: 0.9rem !important;
|
|
line-height: 1.45;
|
|
text-align: left !important;
|
|
hyphens: none;
|
|
-webkit-hyphens: none;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.link-preview-meta {
|
|
margin-top: 0.55rem;
|
|
color: var(--ink-faint);
|
|
font-size: 0.78rem;
|
|
font-variant: small-caps;
|
|
letter-spacing: 0.06em;
|
|
font-family: et-book-roman-old-style, et-book, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.link-preview {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Knowledge: concept crosslinks, related notes, site-wide mentions. */
|
|
a.concept-link {
|
|
text-decoration-style: dotted;
|
|
text-decoration-thickness: 0.06em;
|
|
}
|
|
|
|
.knowledge-connections {
|
|
margin-top: 2.5rem;
|
|
padding-top: 1.25rem;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.knowledge-connections h2 {
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.knowledge-connections ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.knowledge-connections .knowledge-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem 1.25rem;
|
|
}
|
|
|
|
.knowledge-connections li { margin: 0.2rem 0; }
|
|
.knowledge-connections li::marker { content: none; }
|
|
.knowledge-connections .recent-post-date { margin-left: 0.5rem; opacity: 0.6; }
|
|
|
|
.mermaid { margin: 1.5rem 0; text-align: center; }
|