diff options
| -rw-r--r-- | themes/everforest.css | 634 | ||||
| -rw-r--r-- | themes/modern-dark-2.css | 547 | ||||
| -rw-r--r-- | themes/modern-dark-catppuccin.css | 679 | ||||
| -rw-r--r-- | themes/rose-pine.css | 1438 | ||||
| -rw-r--r-- | themes/terminal-gruvbox.css | 744 | ||||
| -rw-r--r-- | themes/tufte.css | 133 |
6 files changed, 0 insertions, 4175 deletions
diff --git a/themes/everforest.css b/themes/everforest.css deleted file mode 100644 index d4cbc12..0000000 --- a/themes/everforest.css +++ /dev/null @@ -1,634 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Familjen+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap"); - -/* ─── Everforest Dark Tokens ────────────────────────────── */ -:root { - /* Backgrounds — from the Everforest palette */ - --bg0: #2d3130; /* hard bg */ - --bg1: #343f3e; /* main bg */ - --bg2: #3a4845; /* soft bg */ - --bg3: #445055; /* visual select */ - --bg4: #4c5a5a; /* grey-0 */ - --bg5: #596461; /* grey-1 */ - - /* Foreground */ - --fg: #d3c6aa; /* main text */ - --fg-dim: #9da9a0; /* dimmed */ - --fg-muted: #5a6f68; /* muted */ - - /* Everforest accent spectrum */ - --red: #e67e80; - --orange: #e69875; - --yellow: #dbbc7f; - --green: #a7c080; /* primary accent */ - --aqua: #83c092; - --blue: #7fbbb3; - --purple: #d699b6; - - /* Semantic aliases */ - --accent: var(--green); - --accent-2: var(--aqua); - --accent-dim: rgba(167, 192, 128, 0.1); - --accent-glow: rgba(167, 192, 128, 0.06); - --warn: var(--yellow); - --error: var(--red); - - /* Borders */ - --border: #404d49; - --border-soft: rgba(167, 192, 128, 0.08); - - /* Typography */ - --serif: "Crimson Pro", Georgia, serif; - --sans: "Familjen Grotesk", system-ui, sans-serif; - --mono: "JetBrains Mono", ui-monospace, monospace; - - --radius: 4px; - --max-w: 720px; - --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1); -} - -/* ─── Reset ─────────────────────────────────────────────── */ -*, -*::before, -*::after { - box-sizing: border-box; -} -html { - scroll-behavior: smooth; -} - -/* ─── Body ──────────────────────────────────────────────── */ -body { - margin: 0; - padding: 3.5rem 2rem 6rem; - background-color: var(--bg1); - background-image: - radial-gradient( - ellipse 90% 40% at 50% -10%, - rgba(83, 192, 146, 0.04) 0%, - transparent 65% - ), - url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a7c080' fill-opacity='0.018'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E"); - color: var(--fg); - font-family: var(--serif); - line-height: 1.82; - font-size: 19px; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -body > * { - max-width: var(--max-w); - margin-left: auto; - margin-right: auto; -} - -/* ─── Headings ──────────────────────────────────────────── */ -h1, -h2, -h3, -h4 { - font-family: var(--sans); - line-height: 1.18; - letter-spacing: -0.02em; - scroll-margin-top: 1.5rem; -} - -h1 { - font-size: clamp(2.1rem, 5vw, 2.8rem); - font-weight: 700; - margin-bottom: 0.5rem; - color: var(--fg); - /* Subtle green shimmer on the heading */ - text-shadow: 0 0 40px rgba(167, 192, 128, 0.18); -} - -h2 { - font-size: 1.4rem; - font-weight: 600; - margin-top: 3.5rem; - color: var(--aqua); - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--border); -} - -h3 { - font-size: 1.1rem; - font-weight: 600; - margin-top: 2.2rem; - color: var(--yellow); -} - -h4 { - font-size: 0.95rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.06em; - color: var(--fg-dim); - margin-top: 1.8rem; -} - -/* ─── Paragraphs ────────────────────────────────────────── */ -p { - margin: 1.35rem 0; - color: var(--fg); -} - -h1 + p { - font-size: 1.06rem; - color: #bfb99f; - line-height: 1.88; -} - -/* Drop cap */ -h1 + p::first-letter { - font-size: 3.4rem; - font-style: italic; - float: left; - line-height: 0.82; - margin: 0.1em 0.1em 0 0; - color: var(--green); -} - -/* ─── Meta / Byline ─────────────────────────────────────── */ -.meta, -time, -.byline { - display: block; - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--fg-muted); - margin-bottom: 2.6rem; -} - -/* ─── Links ─────────────────────────────────────────────── */ -a { - color: var(--aqua); - text-decoration-line: underline; - text-decoration-color: rgba(131, 192, 146, 0.35); - text-underline-offset: 3px; - text-decoration-thickness: 1px; - transition: - color var(--transition), - text-decoration-color var(--transition); -} - -a:hover { - color: var(--green); - text-decoration-color: var(--green); -} - -/* ─── Lists ─────────────────────────────────────────────── */ -ul, -ol { - margin: 1.3rem 0; - padding-left: 0; - list-style: none; -} - -ul li, -ol li { - position: relative; - padding-left: 1.6rem; - margin: 0.5rem 0; - color: var(--fg); -} - -ul li::before { - content: "◆"; - position: absolute; - left: 0; - font-size: 0.45rem; - top: 0.6em; - color: var(--green); -} - -ol { - counter-reset: ol-counter; -} -ol li { - counter-increment: ol-counter; -} -ol li::before { - content: counter(ol-counter, decimal-leading-zero); - position: absolute; - left: 0; - font-family: var(--mono); - font-size: 0.68rem; - color: var(--fg-muted); - top: 0.28em; -} - -/* ─── Horizontal Rule ───────────────────────────────────── */ -hr { - border: none; - margin: 3.5rem auto; - height: 1px; - background: linear-gradient( - 90deg, - transparent, - var(--border) 25%, - var(--border) 75%, - transparent - ); - position: relative; -} - -hr::after { - content: "❧"; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-size: 0.8rem; - color: var(--fg-muted); - background: var(--bg1); - padding: 0 0.6rem; -} - -/* ─── Blockquote ────────────────────────────────────────── */ -blockquote { - margin: 2.5rem 0; - padding: 1.2rem 1.6rem; - background: var(--bg2); - border-left: 3px solid var(--green); - border-radius: 0 var(--radius) var(--radius) 0; - position: relative; -} - -blockquote::before { - content: "\201C"; - font-family: var(--serif); - font-size: 4rem; - line-height: 1; - color: var(--green); - opacity: 0.25; - position: absolute; - top: 0.1rem; - left: 1rem; - pointer-events: none; -} - -blockquote p { - margin: 0; - font-style: italic; - font-size: 1.08rem; - color: #c4bb9e; - position: relative; - z-index: 1; -} - -blockquote cite { - display: block; - margin-top: 0.75rem; - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.05em; - color: var(--fg-muted); - font-style: normal; -} - -/* ─── Tables ────────────────────────────────────────────── */ -table { - width: 100%; - border-collapse: collapse; - margin: 2rem 0; - font-size: 0.88rem; - font-family: var(--mono); - background: var(--bg2); - border-radius: var(--radius); - overflow: hidden; - border: 1px solid var(--border); -} - -thead { - background: var(--bg3); -} - -th { - text-align: left; - padding: 0.7rem 1rem; - font-size: 0.67rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--aqua); - border-bottom: 1px solid var(--border); - font-weight: 500; -} - -td { - padding: 0.6rem 1rem; - border-bottom: 1px solid var(--border-soft); - color: var(--fg-dim); -} - -tr:last-child td { - border-bottom: none; -} -tbody tr:hover td { - background: rgba(167, 192, 128, 0.04); -} - -/* ─── Inline Code ───────────────────────────────────────── */ -code { - font-family: var(--mono); - font-size: 0.82rem; - background: var(--bg0); - color: var(--orange); - padding: 0.18rem 0.4rem; - border-radius: var(--radius); - border: 1px solid var(--border); - word-break: break-word; -} - -/* ─── Code Blocks ───────────────────────────────────────── */ -pre { - background: var(--bg0); - border: 1px solid var(--border); - border-left: 3px solid var(--green); - padding: 1.4rem 1.6rem; - overflow-x: auto; - border-radius: var(--radius); - margin: 2rem 0; - position: relative; -} - -pre::before { - content: attr(data-lang); - position: absolute; - top: 0.55rem; - right: 0.85rem; - font-family: var(--mono); - font-size: 0.62rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--fg-muted); -} - -pre code { - background: none; - border: none; - padding: 0; - color: var(--fg); - font-size: 0.87rem; - line-height: 1.7; -} - -/* Everforest syntax-flavoured spans (optional, use with a highlighter) */ -pre .kw { - color: var(--red); -} -pre .fn { - color: var(--yellow); -} -pre .str { - color: var(--green); -} -pre .num { - color: var(--purple); -} -pre .cm { - color: var(--fg-muted); - font-style: italic; -} -pre .kv { - color: var(--aqua); -} - -/* ─── Images ────────────────────────────────────────────── */ -img { - max-width: 100%; - height: auto; - display: block; - border-radius: var(--radius); - border: 1px solid var(--border); - margin: 2.5rem auto; -} - -figure { - margin: 2.5rem 0; -} - -figcaption { - font-family: var(--mono); - font-size: 0.7rem; - color: var(--fg-muted); - text-align: center; - margin-top: 0.7rem; - letter-spacing: 0.04em; -} - -/* ─── Aside / Callout ───────────────────────────────────── */ -aside, -.note, -.callout { - background: var(--accent-dim); - border: 1px solid rgba(167, 192, 128, 0.22); - border-radius: var(--radius); - padding: 1rem 1.25rem; - margin: 2rem 0; - font-size: 0.9rem; - color: var(--fg-dim); -} - -aside strong, -.callout strong { - font-family: var(--mono); - font-size: 0.67rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--green); - display: block; - margin-bottom: 0.35rem; -} - -/* Variant callout types */ -.callout.warn { - background: rgba(219, 188, 127, 0.08); - border-color: rgba(219, 188, 127, 0.25); -} -.callout.warn strong { - color: var(--yellow); -} -.callout.error { - background: rgba(230, 126, 128, 0.08); - border-color: rgba(230, 126, 128, 0.25); -} -.callout.error strong { - color: var(--red); -} -.callout.info { - background: rgba(127, 187, 179, 0.08); - border-color: rgba(127, 187, 179, 0.25); -} -.callout.info strong { - color: var(--blue); -} - -/* ─── Tags ───────────────────────────────────────────────── */ -.tag { - display: inline-block; - font-family: var(--mono); - font-size: 0.64rem; - letter-spacing: 0.09em; - text-transform: uppercase; - padding: 0.22rem 0.6rem; - border: 1px solid var(--border); - border-radius: 2px; - color: var(--fg-muted); - margin-right: 0.4rem; - text-decoration: none; - transition: all var(--transition); -} - -.tag:hover { - border-color: var(--green); - color: var(--green); - background: var(--accent-dim); - text-decoration: none; -} - -/* ─── Navigation ─────────────────────────────────────────── */ -nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 0 3rem; - border-bottom: 1px solid var(--border); - margin-bottom: 3.5rem; -} - -nav .logo { - font-family: var(--sans); - font-weight: 700; - font-size: 1.05rem; - letter-spacing: -0.02em; - color: var(--fg); - text-decoration: none; -} - -nav .logo span { - color: var(--green); -} - -nav ul { - display: flex; - gap: 2rem; - margin: 0; - padding: 0; - list-style: none; -} - -nav ul li { - padding: 0; - margin: 0; -} -nav ul li::before { - display: none; -} - -nav a { - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--fg-muted); - text-decoration: none; - transition: color var(--transition); -} - -nav a:hover { - color: var(--aqua); - text-decoration: none; -} - -/* ─── Footer ─────────────────────────────────────────────── */ -footer { - margin-top: 5rem; - padding-top: 2rem; - border-top: 1px solid var(--border); - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.04em; - color: var(--fg-muted); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; -} - -/* ─── Reading Progress ───────────────────────────────────── */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - height: 2px; - background: linear-gradient(90deg, var(--green), var(--aqua)); - z-index: 999; - width: 0%; - box-shadow: 0 0 10px var(--accent-glow); - transition: width 0.1s linear; -} - -/* ─── Selection ──────────────────────────────────────────── */ -::selection { - background: rgba(167, 192, 128, 0.22); - color: var(--fg); -} - -/* ─── Scrollbar ──────────────────────────────────────────── */ -::-webkit-scrollbar { - width: 6px; - height: 6px; -} -::-webkit-scrollbar-track { - background: var(--bg0); -} -::-webkit-scrollbar-thumb { - background: var(--bg4); - border-radius: 3px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--fg-muted); -} - -/* ─── Abbr ───────────────────────────────────────────────── */ -abbr[title] { - border-bottom: 1px dotted var(--fg-muted); - cursor: help; - text-decoration: none; -} - -/* ─── Responsive ─────────────────────────────────────────── */ -@media (max-width: 700px) { - body { - padding: 2rem 1.3rem 4rem; - font-size: 17px; - } - h1 { - font-size: 1.9rem; - } - h2 { - font-size: 1.25rem; - } - nav ul { - gap: 1.2rem; - } - nav { - flex-wrap: wrap; - gap: 0.8rem; - } - footer { - flex-direction: column; - text-align: center; - } -} - -/* ─── Focus Accessibility ─────────────────────────────────── */ -:focus-visible { - outline: 2px solid var(--green); - outline-offset: 3px; - border-radius: var(--radius); -} diff --git a/themes/modern-dark-2.css b/themes/modern-dark-2.css deleted file mode 100644 index e71d96f..0000000 --- a/themes/modern-dark-2.css +++ /dev/null @@ -1,547 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap"); - -/* ─── Design Tokens ─────────────────────────────────────── */ -:root { - --bg: #060d1a; - --surface: #0b1525; - --surface-2: #101e30; - --border: #172540; - --border-soft: rgba(96, 165, 250, 0.07); - --text: #dde8f7; - --text-dim: #6b88ad; - --text-muted: #2e4460; - --accent: #60a5fa; /* electric blue */ - --accent-2: #93c5fd; /* soft sky */ - --accent-dim: rgba(96, 165, 250, 0.1); - --accent-glow: rgba(96, 165, 250, 0.12); - --serif: "Instrument Serif", Georgia, serif; - --sans: "Syne", system-ui, sans-serif; - --mono: "DM Mono", ui-monospace, monospace; - --radius: 4px; - --max-w: 740px; - --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); -} - -/* ─── Reset & Base ──────────────────────────────────────── */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - padding: 4rem 2rem 6rem; - background-color: var(--bg); - background-image: - radial-gradient( - ellipse 80% 50% at 50% -20%, - rgba(96, 165, 250, 0.07) 0%, - transparent 60% - ), - url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2360a5fa' fill-opacity='0.018'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E"); - color: var(--text); - font-family: var(--serif); - line-height: 1.8; - font-size: 19px; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -body > * { - max-width: var(--max-w); - margin-left: auto; - margin-right: auto; -} - -/* ─── Headings ──────────────────────────────────────────── */ -h1, -h2, -h3, -h4 { - font-family: var(--sans); - font-weight: 700; - line-height: 1.15; - letter-spacing: -0.02em; - scroll-margin-top: 1.5rem; - color: #e8f0fc; -} - -h1 { - font-size: clamp(2.2rem, 5vw, 3rem); - font-weight: 800; - margin-bottom: 1.2rem; - background: linear-gradient(135deg, #e8f0fc 55%, var(--accent) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -h2 { - font-size: 1.5rem; - margin-top: 3.5rem; - padding-top: 2rem; - border-top: 1px solid var(--border); - color: var(--text); -} - -h3 { - font-size: 1.15rem; - font-weight: 600; - margin-top: 2.2rem; - color: var(--text); -} - -/* ─── Paragraphs ────────────────────────────────────────── */ -p { - margin: 1.4rem 0; - color: #b8cce4; - font-size: 1.2rem; -} - -/* Drop cap */ -h1 + p::first-letter { - font-family: var(--serif); - font-size: 3.6rem; - font-style: italic; - float: left; - line-height: 0.82; - margin: 0.08em 0.1em 0 0; - color: var(--accent); -} - -/* ─── Article Meta / Byline ─────────────────────────────── */ -.meta, -time, -.byline { - display: block; - font-family: var(--mono); - font-size: 0.75rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-dim); - margin-bottom: 2.5rem; -} - -/* ─── Links ─────────────────────────────────────────────── */ -a { - color: var(--accent-2); - text-decoration: none; - border-bottom: 1px solid var(--border); - transition: - color var(--transition), - border-color var(--transition); -} - -a:hover { - color: #bfdbfe; - border-bottom-color: var(--accent); -} - -/* ─── Lists ─────────────────────────────────────────────── */ -ul, -ol { - margin: 1.4rem 0 1.4rem 0; - padding-left: 0; - list-style: none; -} - -ul li, -ol li { - position: relative; - padding-left: 1.5rem; - margin: 0.55rem 0; - color: #b8cce4; -} - -ul li::before { - content: "–"; - position: absolute; - left: 0; - color: var(--accent); - font-family: var(--mono); -} - -ol { - counter-reset: ol-counter; -} - -ol li { - counter-increment: ol-counter; -} - -ol li::before { - content: counter(ol-counter, decimal-leading-zero); - position: absolute; - left: 0; - font-family: var(--mono); - font-size: 0.72rem; - color: var(--text-dim); - top: 0.22em; -} - -/* ─── Horizontal Rule ───────────────────────────────────── */ -hr { - border: none; - margin: 3.5rem auto; - height: 1px; - background: linear-gradient( - 90deg, - transparent, - var(--border) 20%, - var(--border) 80%, - transparent - ); - position: relative; -} - -hr::after { - content: "✦"; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-size: 0.65rem; - color: var(--text-muted); - background: var(--bg); - padding: 0 0.5rem; -} - -/* ─── Blockquote ────────────────────────────────────────── */ -blockquote { - margin: 2.5rem 0; - padding: 1.5rem 1.8rem; - background: var(--surface); - border-left: 2px solid var(--accent); - border-radius: 0 var(--radius) var(--radius) 0; - position: relative; -} - -blockquote p { - margin: 0; - font-style: italic; - font-size: 1.1rem; - color: #ccddf0; -} - -blockquote cite { - display: block; - margin-top: 0.8rem; - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.06em; - color: var(--text-dim); - font-style: normal; -} - -/* ─── Tables ────────────────────────────────────────────── */ -table { - width: 100%; - border-collapse: collapse; - margin: 2rem 0; - font-size: 0.9rem; - font-family: var(--mono); - background: var(--surface); - border-radius: var(--radius); - overflow: hidden; - border: 1px solid var(--border); -} - -thead { - background: var(--surface-2); -} - -th { - text-align: left; - padding: 0.75rem 1rem; - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--accent-2); - border-bottom: 1px solid var(--border); - font-weight: 500; -} - -td { - padding: 0.65rem 1rem; - border-bottom: 1px solid var(--border-soft); - color: #a8bdd8; -} - -tr:last-child td { - border-bottom: none; -} - -tr:hover td { - background: var(--border-soft); -} - -/* ─── Inline Code ───────────────────────────────────────── */ -code { - font-family: var(--mono); - font-size: 0.83rem; - background: var(--surface-2); - color: var(--accent); - padding: 0.18rem 0.4rem; - border-radius: var(--radius); - border: 1px solid var(--border); - word-break: break-word; -} - -/* ─── Code Blocks ───────────────────────────────────────── */ -pre { - background: var(--surface); - border: 1px solid var(--border); - border-left: 2px solid var(--accent); - padding: 1.4rem 1.6rem; - overflow-x: auto; - border-radius: var(--radius); - margin: 2rem 0; - position: relative; -} - -pre::before { - content: attr(data-lang); - position: absolute; - top: 0.6rem; - right: 0.8rem; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-muted); -} - -pre code { - background: none; - border: none; - padding: 0; - color: #c4d8ee; - font-size: 0.87rem; - line-height: 1.65; -} - -/* ─── Images ────────────────────────────────────────────── */ -img { - max-width: 100%; - height: auto; - display: block; - border-radius: var(--radius); - border: 1px solid var(--border); - margin: 2rem auto; -} - -figure { - margin: 2.5rem 0; -} - -figcaption { - font-family: var(--mono); - font-size: 0.72rem; - color: var(--text-dim); - text-align: center; - margin-top: 0.75rem; - letter-spacing: 0.04em; -} - -/* ─── Aside / Callout ───────────────────────────────────── */ -aside, -.note, -.callout { - background: var(--accent-dim); - border: 1px solid rgba(96, 165, 250, 0.2); - border-radius: var(--radius); - padding: 1rem 1.2rem; - margin: 2rem 0; - font-size: 0.88rem; - color: #a8bdd8; -} - -aside strong, -.callout strong { - color: var(--accent); - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - display: block; - margin-left: 3px; - margin-bottom: 0.4rem; -} - -/* ─── Tags / Badges ─────────────────────────────────────── */ -.tag { - display: inline-block; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.25rem 0.6rem; - border: 1px solid var(--border); - border-radius: 2px; - color: var(--text-dim); - margin-right: 0.4rem; - text-decoration: none; - border-bottom: none; - transition: all var(--transition); -} - -.tag:hover { - border-color: var(--accent); - color: var(--accent); - background: var(--accent-dim); -} - -/* ─── Navigation ───────────────────────────────────────── */ -nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.2rem 0 3rem; - border-bottom: 1px solid var(--border); - margin-bottom: 3.5rem; -} - -nav .logo { - font-family: var(--sans); - font-weight: 800; - font-size: 1.1rem; - letter-spacing: -0.02em; - color: var(--text); - border-bottom: none; -} - -nav .logo span { - color: var(--accent); -} - -nav ul { - display: flex; - gap: 2rem; - margin: 0; - padding: 0; - list-style: none; -} - -nav ul li { - padding: 0; - margin: 0; -} - -nav ul li::before { - display: none; -} - -nav a { - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-dim); - border-bottom: none; - transition: color var(--transition); -} - -nav a:hover { - color: var(--accent); - border-bottom: none; -} - -/* ─── Footer ───────────────────────────────────────────── */ -footer { - margin-top: 5rem; - padding-top: 2rem; - border-top: 1px solid var(--border); - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.05em; - color: var(--text-muted); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; -} - -/* ─── Reading Progress Bar ─────────────────────────────── */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - height: 2px; - background: linear-gradient(90deg, var(--accent), var(--accent-2)); - z-index: 999; - transform-origin: left; - width: 0%; - box-shadow: 0 0 10px var(--accent-glow); - transition: width 0.1s linear; -} - -/* ─── Selection ────────────────────────────────────────── */ -::selection { - background: rgba(96, 165, 250, 0.2); - color: var(--text); -} - -/* ─── Scrollbar ────────────────────────────────────────── */ -::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -::-webkit-scrollbar-track { - background: var(--bg); -} - -::-webkit-scrollbar-thumb { - background: var(--border); - border-radius: 3px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--text-muted); -} - -/* ─── Abbr ─────────────────────────────────────────────── */ -abbr[title] { - border-bottom: 1px dotted var(--text-dim); - cursor: help; - text-decoration: none; -} - -/* ─── Responsive ───────────────────────────────────────── */ -@media (max-width: 700px) { - body { - padding: 2rem 1.2rem 4rem; - font-size: 17px; - } - - h1 { - font-size: 2rem; - } - h2 { - font-size: 1.35rem; - } - nav ul { - gap: 1.2rem; - } - nav { - flex-wrap: wrap; - gap: 1rem; - } - footer { - flex-direction: column; - text-align: center; - } -} - -/* ─── Focus Accessibility ──────────────────────────────── */ -:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 3px; - border-radius: var(--radius); -} diff --git a/themes/modern-dark-catppuccin.css b/themes/modern-dark-catppuccin.css deleted file mode 100644 index afd7f59..0000000 --- a/themes/modern-dark-catppuccin.css +++ /dev/null @@ -1,679 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap"); - -/* ─── Catppuccin Mocha Palette ──────────────────────────── */ -:root { - /* Base layers */ - --crust: #11111b; - --mantle: #181825; - --base: #1e1e2e; - --surface-0: #313244; - --surface-1: #45475a; - --surface-2: #585b70; - - /* Overlays */ - --overlay-0: #6c7086; - --overlay-1: #7f849c; - --overlay-2: #9399b2; - - /* Text */ - --subtext-0: #a6adc8; - --subtext-1: #bac2de; - --text-full: #cdd6f4; - - /* Accent spectrum — USE ALL OF THEM */ - --rosewater: #f5e0dc; - --flamingo: #f2cdcd; - --pink: #f5c2e7; - --mauve: #cba6f7; /* h1 gradient anchor */ - --red: #f38ba8; - --maroon: #eba0ac; - --peach: #fab387; /* inline code */ - --yellow: #f9e2af; /* h3 */ - --green: #a6e3a1; /* success / ul bullets */ - --teal: #94e2d5; /* h2 */ - --sky: #89dceb; /* links */ - --sapphire: #74c7ec; /* primary accent */ - --blue: #89b4fa; /* accent-2, progress */ - --lavender: #b4befe; /* h1 gradient end */ - - /* Semantic mappings */ - --bg: var(--base); - --surface: var(--mantle); - --surface-2: var(--crust); - --border: var(--surface-0); - --border-soft: rgba(180, 190, 254, 0.07); - --text: var(--text-full); - --text-dim: var(--overlay-1); - --text-muted: var(--overlay-0); - --accent: var(--sapphire); - --accent-2: var(--blue); - --accent-dim: rgba(116, 199, 236, 0.1); - --accent-glow: rgba(116, 199, 236, 0.12); - - --serif: "Instrument Serif", Georgia, serif; - --sans: "Syne", system-ui, sans-serif; - --mono: "DM Mono", ui-monospace, monospace; - --radius: 4px; - --max-w: 720px; - --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); -} - -/* ─── Reset & Base ──────────────────────────────────────── */ -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - padding: 4rem 2rem 6rem; - background-color: var(--base); - background-image: - radial-gradient( - ellipse 80% 50% at 50% -20%, - rgba(203, 166, 247, 0.07) 0%, - transparent 60% - ), - url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cba6f7' fill-opacity='0.018'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E"); - color: var(--text-full); - font-family: var(--serif); - line-height: 1.8; - font-size: 19px; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -body > * { - max-width: var(--max-w); - margin-left: auto; - margin-right: auto; -} - -/* ─── Headings ──────────────────────────────────────────── */ -h1, -h2, -h3, -h4 { - font-family: var(--sans); - font-weight: 700; - line-height: 1.15; - letter-spacing: -0.02em; - scroll-margin-top: 1.5rem; -} - -/* h1 — mauve → lavender gradient */ -h1 { - font-size: clamp(2.2rem, 5vw, 3rem); - font-weight: 800; - margin-bottom: 1.2rem; - background: linear-gradient( - 135deg, - var(--text-full) 30%, - var(--mauve) 65%, - var(--lavender) 100% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -/* h2 — teal */ -h2 { - font-size: 1.5rem; - margin-top: 3.5rem; - padding-top: 2rem; - border-top: 1px solid var(--surface-0); - color: var(--teal); -} - -/* h3 — yellow */ -h3 { - font-size: 1.15rem; - font-weight: 600; - margin-top: 2.2rem; - color: var(--yellow); -} - -/* h4 — peach */ -h4 { - font-size: 1rem; - font-weight: 600; - margin-top: 1.8rem; - color: var(--peach); -} - -/* ─── Paragraphs ────────────────────────────────────────── */ -p { - margin: 1.4rem 0; - color: var(--subtext-1); - font-size: 1.2rem; -} - -/* Drop cap — mauve */ -h1 + p::first-letter { - font-family: var(--serif); - font-size: 3.6rem; - font-style: italic; - float: left; - line-height: 0.82; - margin: 0.08em 0.1em 0 0; - color: var(--mauve); -} - -/* ─── Article Meta / Byline ─────────────────────────────── */ -.meta, -time, -.byline { - display: block; - font-family: var(--mono); - font-size: 0.75rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--overlay-1); - margin-bottom: 2.5rem; -} - -/* ─── Links — sky ───────────────────────────────────────── */ -a { - color: var(--sky); - text-decoration: none; - border-bottom: 1px solid var(--surface-0); - transition: - color var(--transition), - border-color var(--transition); -} - -a:hover { - color: var(--sapphire); - border-bottom-color: var(--sapphire); -} - -/* ─── Lists ─────────────────────────────────────────────── */ -ul, -ol { - margin: 1.4rem 0; - padding-left: 0; - list-style: none; -} - -ul li, -ol li { - position: relative; - padding-left: 1.5rem; - margin: 0.55rem 0; - color: var(--subtext-1); -} - -/* ul bullets — green */ -ul li::before { - content: "–"; - position: absolute; - left: 0; - color: var(--green); - font-family: var(--mono); -} - -ol { - counter-reset: ol-counter; -} - -ol li { - counter-increment: ol-counter; -} - -/* ol numbers — blue */ -ol li::before { - content: counter(ol-counter, decimal-leading-zero); - position: absolute; - left: 0; - font-family: var(--mono); - font-size: 0.72rem; - color: var(--blue); - top: 0.22em; -} - -/* ─── Horizontal Rule ───────────────────────────────────── */ -hr { - border: none; - margin: 3.5rem auto; - height: 1px; - background: linear-gradient( - 90deg, - transparent, - var(--surface-0) 20%, - var(--surface-0) 80%, - transparent - ); - position: relative; -} - -hr::after { - content: "✦"; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - font-size: 0.65rem; - color: var(--surface-2); - background: var(--base); - padding: 0 0.5rem; -} - -/* ─── Blockquote — flamingo / pink ──────────────────────── */ -blockquote { - margin: 2.5rem 0; - padding: 1.5rem 1.8rem; - background: var(--mantle); - border-left: 2px solid var(--pink); - border-radius: 0 var(--radius) var(--radius) 0; - position: relative; -} - -blockquote p { - margin: 0; - font-style: italic; - font-size: 1.1rem; - color: var(--flamingo); -} - -blockquote cite { - display: block; - margin-top: 0.8rem; - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.06em; - color: var(--overlay-0); - font-style: normal; -} - -/* ─── Tables ───────────────────────────────────────────── */ -table { - width: 100%; - border-collapse: collapse; - margin: 2rem 0; - font-size: 0.9rem; - font-family: var(--mono); - background: var(--mantle); - border-radius: var(--radius); - overflow: hidden; - border: 1px solid var(--surface-0); -} - -thead { - background: var(--crust); -} - -/* th — lavender */ -th { - text-align: left; - padding: 0.75rem 1rem; - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--lavender); - border-bottom: 1px solid var(--surface-0); - font-weight: 500; -} - -td { - padding: 0.65rem 1rem; - border-bottom: 1px solid var(--border-soft); - color: var(--subtext-0); -} - -tr:last-child td { - border-bottom: none; -} - -tr:hover td { - background: rgba(180, 190, 254, 0.04); -} - -/* ─── Inline Code — peach ───────────────────────────────── */ -code { - font-family: var(--mono); - font-size: 0.83rem; - background: var(--crust); - color: var(--peach); - padding: 0.18rem 0.4rem; - border-radius: var(--radius); - border: 1px solid var(--surface-0); - word-break: break-word; -} - -/* ─── Code Blocks — green left border ──────────────────── */ -pre { - background: var(--mantle); - border: 1px solid var(--surface-0); - border-left: 2px solid var(--green); - padding: 1.4rem 1.6rem; - overflow-x: auto; - border-radius: var(--radius); - margin: 2rem 0; - position: relative; -} - -pre::before { - content: attr(data-lang); - position: absolute; - top: 0.6rem; - right: 0.8rem; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--overlay-0); -} - -pre code { - background: none; - border: none; - padding: 0; - color: var(--text-full); - font-size: 0.87rem; - line-height: 1.65; -} - -/* Optional: mocha syntax classes */ -pre .kw { - color: var(--mauve); -} -pre .fn { - color: var(--blue); -} -pre .str { - color: var(--green); -} -pre .num { - color: var(--peach); -} -pre .cm { - color: var(--overlay-0); - font-style: italic; -} -pre .kv { - color: var(--teal); -} -pre .type { - color: var(--yellow); -} -pre .err { - color: var(--red); -} - -/* ─── Images ───────────────────────────────────────────── */ -img { - max-width: 100%; - height: auto; - display: block; - border-radius: var(--radius); - border: 1px solid var(--surface-0); - margin: 2rem auto; -} - -figure { - margin: 2.5rem 0; -} - -figcaption { - font-family: var(--mono); - font-size: 0.72rem; - color: var(--overlay-1); - text-align: center; - margin-top: 0.75rem; - letter-spacing: 0.04em; -} - -/* ─── Callout variants — full palette ───────────────────── */ -aside, -.note, -.callout { - background: rgba(116, 199, 236, 0.07); - border: 1px solid rgba(116, 199, 236, 0.2); - border-radius: var(--radius); - padding: 1rem 1.2rem; - margin: 2rem 0; - font-size: 0.88rem; - color: var(--subtext-0); -} - -aside strong, -.callout strong { - color: var(--sapphire); - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - display: block; - margin-bottom: 0.4rem; -} - -/* mauve — hint */ -.callout.hint { - background: rgba(203, 166, 247, 0.07); - border-color: rgba(203, 166, 247, 0.25); -} -.callout.hint strong { - color: var(--mauve); -} - -/* yellow — warning */ -.callout.warn { - background: rgba(249, 226, 175, 0.07); - border-color: rgba(249, 226, 175, 0.25); -} -.callout.warn strong { - color: var(--yellow); -} - -/* red — error */ -.callout.error { - background: rgba(243, 139, 168, 0.07); - border-color: rgba(243, 139, 168, 0.25); -} -.callout.error strong { - color: var(--red); -} - -/* green — success */ -.callout.success { - background: rgba(166, 227, 161, 0.07); - border-color: rgba(166, 227, 161, 0.25); -} -.callout.success strong { - color: var(--green); -} - -/* peach — tip */ -.callout.tip { - background: rgba(250, 179, 135, 0.07); - border-color: rgba(250, 179, 135, 0.25); -} -.callout.tip strong { - color: var(--peach); -} - -/* ─── Tags — rosewater / flamingo on hover ─────────────── */ -.tag { - display: inline-block; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.25rem 0.6rem; - border: 1px solid var(--surface-0); - border-radius: 2px; - color: var(--overlay-2); - margin-right: 0.4rem; - text-decoration: none; - border-bottom: none; - transition: all var(--transition); -} - -.tag:hover { - border-color: var(--rosewater); - color: var(--rosewater); - background: rgba(245, 224, 220, 0.07); - border-bottom: none; -} - -/* ─── Navigation ───────────────────────────────────────── */ -nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.2rem 0 3rem; - border-bottom: 1px solid var(--surface-0); - margin-bottom: 3.5rem; -} - -nav .logo { - font-family: var(--sans); - font-weight: 800; - font-size: 1.1rem; - letter-spacing: -0.02em; - color: var(--text-full); - border-bottom: none; -} - -/* logo accent — mauve */ -nav .logo span { - color: var(--mauve); -} - -nav ul { - display: flex; - gap: 2rem; - margin: 0; - padding: 0; - list-style: none; -} - -nav ul li { - padding: 0; - margin: 0; -} - -nav ul li::before { - display: none; -} - -nav a { - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--overlay-1); - border-bottom: none; - transition: color var(--transition); -} - -nav a:hover { - color: var(--lavender); - border-bottom: none; -} - -/* ─── Footer ───────────────────────────────────────────── */ -footer { - margin-top: 5rem; - padding-top: 2rem; - border-top: 1px solid var(--surface-0); - font-family: var(--mono); - font-size: 0.72rem; - letter-spacing: 0.05em; - color: var(--overlay-0); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; -} - -/* ─── Reading Progress — mauve → lavender ──────────────── */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - height: 2px; - background: linear-gradient( - 90deg, - var(--mauve), - var(--blue), - var(--lavender) - ); - z-index: 999; - transform-origin: left; - width: 0%; - box-shadow: 0 0 10px rgba(203, 166, 247, 0.2); - transition: width 0.1s linear; -} - -/* ─── Selection — mauve ────────────────────────────────── */ -::selection { - background: rgba(203, 166, 247, 0.25); - color: var(--text-full); -} - -/* ─── Scrollbar ────────────────────────────────────────── */ -::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -::-webkit-scrollbar-track { - background: var(--crust); -} - -::-webkit-scrollbar-thumb { - background: var(--surface-0); - border-radius: 3px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--surface-1); -} - -/* ─── Abbr ─────────────────────────────────────────────── */ -abbr[title] { - border-bottom: 1px dotted var(--overlay-0); - cursor: help; - text-decoration: none; -} - -/* ─── Responsive ───────────────────────────────────────── */ -@media (max-width: 700px) { - body { - padding: 2rem 1.2rem 4rem; - font-size: 17px; - } - - h1 { - font-size: 2rem; - } - h2 { - font-size: 1.35rem; - } - nav ul { - gap: 1.2rem; - } - nav { - flex-wrap: wrap; - gap: 1rem; - } - footer { - flex-direction: column; - text-align: center; - } -} - -/* ─── Focus Accessibility ──────────────────────────────── */ -:focus-visible { - outline: 2px solid var(--lavender); - outline-offset: 3px; - border-radius: var(--radius); -} diff --git a/themes/rose-pine.css b/themes/rose-pine.css deleted file mode 100644 index 83b1214..0000000 --- a/themes/rose-pine.css +++ /dev/null @@ -1,1438 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Zodiak:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Cabinet+Grotesk:wght@400;500;700;800&family=Commit+Mono:ital,wght@0,400;0,700;1,400&display=swap"); -/* Fallback if variable fonts aren't available via Google */ -@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Outfit:wght@400;500;700;800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap"); - -/* ═══════════════════════════════════════════════════════════ - ROSÉ PINE — Full Palette - ═══════════════════════════════════════════════════════════ */ -:root { - /* Base */ - --rp-base: #191724; - --rp-surface: #1f1d2e; - --rp-overlay: #26233a; - - /* Muted / subtle */ - --rp-muted: #6e6a86; - --rp-subtle: #908caa; - --rp-text: #e0def4; - - /* Accent spectrum */ - --rp-love: #eb6f92; /* pink-red */ - --rp-gold: #f6c177; /* warm gold */ - --rp-rose: #ebbcba; /* soft rose */ - --rp-pine: #31748f; /* teal-blue */ - --rp-foam: #9ccfd8; /* pale cyan */ - --rp-iris: #c4a7e7; /* lavender */ - --rp-highlight-low: #21202e; - --rp-highlight-med: #403d52; - --rp-highlight-high: #524f67; - - /* Semantic */ - --bg: var(--rp-base); - --surface: var(--rp-surface); - --surface-2: var(--rp-overlay); - --border: var(--rp-highlight-med); - --border-soft: rgba(196, 167, 231, 0.08); - --text: var(--rp-text); - --text-dim: var(--rp-subtle); - --text-muted: var(--rp-muted); - --accent: var(--rp-iris); - --accent-2: var(--rp-foam); - - /* Fonts */ - --serif: "Zodiak", "Playfair Display", Georgia, serif; - --sans: "Cabinet Grotesk", "Outfit", system-ui, sans-serif; - --mono: "Commit Mono", "JetBrains Mono", ui-monospace, monospace; - - --radius: 6px; - --max-w: 740px; - --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); - --spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); -} - -/* ═══════════════════════════════════════════════════════════ - RESET - ═══════════════════════════════════════════════════════════ */ -*, -*::before, -*::after { - box-sizing: border-box; -} -html { - scroll-behavior: smooth; -} - -/* ═══════════════════════════════════════════════════════════ - PAGE LOAD — staggered fade-up animation - ═══════════════════════════════════════════════════════════ */ -@keyframes fadeUp { - from { - opacity: 0; - transform: translateY(18px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes shimmer { - 0% { - background-position: -200% center; - } - 100% { - background-position: 200% center; - } -} - -@keyframes blink { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0; - } -} - -@keyframes progressPulse { - 0% { - box-shadow: 0 0 6px rgba(196, 167, 231, 0.4); - } - 50% { - box-shadow: 0 0 14px rgba(235, 111, 146, 0.6); - } - 100% { - box-shadow: 0 0 6px rgba(196, 167, 231, 0.4); - } -} - -@keyframes borderGlow { - 0% { - border-color: var(--rp-iris); - } - 33% { - border-color: var(--rp-foam); - } - 66% { - border-color: var(--rp-rose); - } - 100% { - border-color: var(--rp-iris); - } -} - -nav { - animation: fadeIn 0.5s ease both; -} -header { - animation: fadeUp 0.55s ease 0.1s both; -} -article > *:nth-child(1) { - animation: fadeUp 0.5s ease 0.15s both; -} -article > *:nth-child(2) { - animation: fadeUp 0.5s ease 0.2s both; -} -article > *:nth-child(3) { - animation: fadeUp 0.5s ease 0.25s both; -} -article > *:nth-child(4) { - animation: fadeUp 0.5s ease 0.3s both; -} -article > *:nth-child(5) { - animation: fadeUp 0.5s ease 0.32s both; -} -article > *:nth-child(n + 6) { - animation: fadeUp 0.5s ease 0.34s both; -} - -/* ═══════════════════════════════════════════════════════════ - BODY - ═══════════════════════════════════════════════════════════ */ -body { - margin: 0; - padding: 3.5rem 2rem 7rem; - background-color: var(--rp-base); - background-image: - /* Soft iris radial bloom at top */ - radial-gradient( - ellipse 70% 45% at 50% -10%, - rgba(196, 167, 231, 0.09) 0%, - transparent 65% - ), - /* Love pink whisper bottom-right */ - radial-gradient( - ellipse 50% 40% at 90% 110%, - rgba(235, 111, 146, 0.05) 0%, - transparent 55% - ), - /* Grain texture */ - url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); - color: var(--rp-text); - font-family: var(--serif); - line-height: 1.85; - font-size: 18.5px; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -body > * { - max-width: var(--max-w); - margin-left: auto; - margin-right: auto; -} - -/* ═══════════════════════════════════════════════════════════ - HEADINGS - ═══════════════════════════════════════════════════════════ */ -h1, -h2, -h3, -h4, -h5 { - font-family: var(--sans); - line-height: 1.18; - letter-spacing: -0.022em; - scroll-margin-top: 2rem; -} - -/* h1 — iris → love shimmer gradient */ -h1 { - font-size: clamp(2rem, 5.5vw, 3.1rem); - font-weight: 800; - margin-bottom: 0.4rem; - background: linear-gradient( - 120deg, - var(--rp-text) 0%, - var(--rp-iris) 40%, - var(--rp-love) 70%, - var(--rp-rose) 100% - ); - background-size: 200% auto; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: shimmer 6s linear infinite; -} - -/* h2 — foam */ -h2 { - font-size: 1.45rem; - font-weight: 700; - margin-top: 3.5rem; - color: var(--rp-foam); - padding-bottom: 0.55rem; - border-bottom: 1px solid var(--rp-highlight-med); - position: relative; -} - -/* h2 left indicator dot */ -h2::before { - content: ""; - position: absolute; - left: -1.1rem; - top: 50%; - transform: translateY(-60%); - width: 5px; - height: 5px; - border-radius: 50%; - background: var(--rp-foam); - opacity: 0.7; -} - -/* h3 — gold */ -h3 { - font-size: 1.15rem; - font-weight: 700; - margin-top: 2.2rem; - color: var(--rp-gold); -} - -/* h4 — rose */ -h4 { - font-size: 1rem; - font-weight: 700; - margin-top: 1.8rem; - color: var(--rp-rose); -} - -/* h5 — love, uppercase label */ -h5 { - font-size: 0.72rem; - font-weight: 700; - margin-top: 1.5rem; - color: var(--rp-love); - text-transform: uppercase; - letter-spacing: 0.12em; - font-family: var(--mono); -} - -/* ═══════════════════════════════════════════════════════════ - PARAGRAPHS & DROP CAPS - ═══════════════════════════════════════════════════════════ */ -p { - margin: 1.4rem 0; - color: #cac9e0; - font-size: 1rem; - line-height: 1.88; -} - -/* Drop cap — first paragraph after h1 */ -h1 + p::first-letter, -header + article > p:first-child::first-letter, -.drop-cap::first-letter { - font-family: var(--serif); - font-size: 4.2rem; - font-weight: 700; - font-style: italic; - float: left; - line-height: 0.78; - margin: 0.1em 0.12em -0.05em 0; - color: var(--rp-iris); - /* Faint text shadow bloom */ - text-shadow: 0 0 30px rgba(196, 167, 231, 0.35); - /* Animated colour cycle */ - animation: borderGlow 8s ease infinite; - -webkit-text-fill-color: var(--rp-iris); -} - -/* Drop cap after every major h2 section (opt-in) */ -h2 + p::first-letter { - font-family: var(--serif); - font-size: 2.6rem; - font-weight: 700; - font-style: italic; - float: left; - line-height: 0.82; - margin: 0.08em 0.1em 0 0; - color: var(--rp-foam); - -webkit-text-fill-color: var(--rp-foam); -} - -/* Lead paragraph */ -h1 + p { - font-size: 1.08rem; - color: var(--rp-subtle); - line-height: 1.92; -} - -/* ═══════════════════════════════════════════════════════════ - META / BYLINE - ═══════════════════════════════════════════════════════════ */ -.meta, -time, -.byline { - display: flex; - align-items: center; - gap: 0.8rem; - flex-wrap: wrap; - font-family: var(--mono); - font-size: 0.73rem; - letter-spacing: 0.06em; - color: var(--rp-muted); - margin-bottom: 2.8rem; - margin-top: 0.3rem; -} - -.meta::before, -time::before { - content: "◆"; - color: var(--rp-love); - font-size: 0.45rem; - animation: blink 3s ease-in-out infinite; -} - -/* ═══════════════════════════════════════════════════════════ - LINKS - ═══════════════════════════════════════════════════════════ */ -a { - color: var(--rp-foam); - text-decoration: none; - border-bottom: 1px solid rgba(156, 207, 216, 0.3); - transition: - color var(--transition), - border-color var(--transition); - position: relative; -} - -a:hover { - color: var(--rp-iris); - border-bottom-color: var(--rp-iris); -} - -/* ═══════════════════════════════════════════════════════════ - LISTS - ═══════════════════════════════════════════════════════════ */ -ul, -ol { - margin: 1.4rem 0; - padding-left: 0; - list-style: none; -} - -ul li, -ol li { - position: relative; - padding-left: 1.7rem; - margin: 0.55rem 0; - color: #cac9e0; - line-height: 1.78; -} - -/* ul — iris diamond */ -ul li::before { - content: "◇"; - position: absolute; - left: 0; - top: 0.05em; - color: var(--rp-iris); - font-size: 0.8rem; - transition: - color var(--transition), - transform var(--spring); -} - -ul li:hover::before { - color: var(--rp-love); - transform: rotate(45deg) scale(1.2); -} - -/* ol — love numbered */ -ol { - counter-reset: ol-counter; -} -ol li { - counter-increment: ol-counter; -} - -ol li::before { - content: counter(ol-counter, decimal-leading-zero); - position: absolute; - left: 0; - font-family: var(--mono); - font-size: 0.7rem; - color: var(--rp-love); - top: 0.3em; - transition: color var(--transition); -} - -ol li:hover::before { - color: var(--rp-gold); -} - -/* Nested lists */ -ul ul li::before { - color: var(--rp-foam); - content: "–"; - top: 0; -} -ol ol li::before { - color: var(--rp-rose); -} - -/* ═══════════════════════════════════════════════════════════ - HORIZONTAL RULE - ═══════════════════════════════════════════════════════════ */ -hr { - border: none; - margin: 4rem auto; - display: flex; - align-items: center; - justify-content: center; - gap: 0.6rem; - position: relative; - height: 1rem; -} - -hr::before, -hr::after { - content: ""; - flex: 1; - height: 1px; - background: linear-gradient(90deg, transparent, var(--rp-highlight-med)); -} - -hr::after { - background: linear-gradient(90deg, var(--rp-highlight-med), transparent); -} - -/* Centre ornament via a wrapping trick using outline */ -hr + * { - /* nothing needed — ornament is in pseudo */ -} - -/* We use a data attribute for ornament text, fallback to ✦ */ -hr[data-ornament]::before { - display: none; -} -hr[data-ornament]::after { - display: none; -} - -/* Default ornament via box-shadow outline */ -.ornament { - display: flex; - align-items: center; - justify-content: center; - gap: 0.6rem; - margin: 4rem 0; - color: var(--rp-muted); - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.3em; -} - -.ornament::before, -.ornament::after { - content: ""; - flex: 1; - height: 1px; - background: linear-gradient( - 90deg, - transparent, - var(--rp-highlight-med) 50%, - transparent - ); -} - -/* ═══════════════════════════════════════════════════════════ - BLOCKQUOTE — love/rose palette - ═══════════════════════════════════════════════════════════ */ -blockquote { - margin: 2.8rem 0; - padding: 1.6rem 1.8rem 1.6rem 2rem; - background: var(--rp-surface); - border-left: 2px solid var(--rp-love); - border-radius: 0 var(--radius) var(--radius) 0; - position: relative; - transition: border-color var(--transition); -} - -blockquote::before { - content: "\201C"; - font-family: var(--serif); - font-size: 5rem; - line-height: 1; - color: var(--rp-love); - opacity: 0.15; - position: absolute; - top: -0.5rem; - left: 1.2rem; - pointer-events: none; - transition: opacity var(--transition); -} - -blockquote:hover::before { - opacity: 0.28; -} -blockquote:hover { - border-color: var(--rp-rose); -} - -blockquote p { - margin: 0; - font-style: italic; - font-size: 1.08rem; - color: var(--rp-rose); - line-height: 1.78; - position: relative; - z-index: 1; -} - -blockquote cite { - display: block; - margin-top: 0.9rem; - font-family: var(--mono); - font-size: 0.71rem; - letter-spacing: 0.05em; - color: var(--rp-muted); - font-style: normal; -} - -blockquote cite::before { - content: "— "; - color: var(--rp-love); -} - -/* Pull quote variant */ -.pullquote { - margin: 3rem -2rem; - padding: 2rem 3rem; - background: var(--rp-overlay); - border: none; - border-top: 1px solid var(--rp-highlight-med); - border-bottom: 1px solid var(--rp-highlight-med); - text-align: center; - border-radius: 0; -} - -.pullquote::before { - display: none; -} - -.pullquote p { - font-size: 1.3rem; - color: var(--rp-iris); - font-style: italic; -} - -/* ═══════════════════════════════════════════════════════════ - TABLES - ═══════════════════════════════════════════════════════════ */ -table { - width: 100%; - border-collapse: collapse; - margin: 2.2rem 0; - font-size: 0.88rem; - font-family: var(--mono); - background: var(--rp-surface); - border-radius: var(--radius); - overflow: hidden; - border: 1px solid var(--rp-highlight-med); -} - -thead { - background: var(--rp-overlay); -} - -th { - text-align: left; - padding: 0.75rem 1.1rem; - font-size: 0.68rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--rp-iris); - border-bottom: 1px solid var(--rp-highlight-med); - font-weight: 600; -} - -td { - padding: 0.65rem 1.1rem; - border-bottom: 1px solid rgba(64, 61, 82, 0.5); - color: var(--rp-subtle); - transition: - color var(--transition), - background var(--transition); - vertical-align: top; -} - -tr:last-child td { - border-bottom: none; -} - -tbody tr { - transition: background var(--transition); -} - -tbody tr:hover td { - background: rgba(196, 167, 231, 0.05); - color: var(--rp-text); -} - -/* ═══════════════════════════════════════════════════════════ - INLINE CODE - ═══════════════════════════════════════════════════════════ */ -code { - font-family: var(--mono); - font-size: 0.82rem; - background: var(--rp-overlay); - color: var(--rp-gold); - padding: 0.16rem 0.42rem; - border-radius: 4px; - border: 1px solid var(--rp-highlight-med); - word-break: break-word; - transition: - background var(--transition), - color var(--transition); -} - -code:hover { - background: var(--rp-highlight-med); - color: var(--rp-iris); -} - -/* ═══════════════════════════════════════════════════════════ - CODE BLOCKS — terminal styled - ═══════════════════════════════════════════════════════════ */ -.code-wrap { - margin: 2.2rem 0; - border-radius: var(--radius); - overflow: hidden; - border: 1px solid var(--rp-highlight-med); - transition: - border-color var(--transition), - box-shadow var(--transition); -} - -.code-wrap:hover { - border-color: var(--rp-iris); - box-shadow: - 0 0 0 1px rgba(196, 167, 231, 0.12), - 0 8px 32px rgba(25, 23, 36, 0.5); -} - -/* Terminal titlebar */ -.code-wrap .titlebar { - display: flex; - align-items: center; - justify-content: space-between; - background: var(--rp-overlay); - padding: 0.55rem 1rem; - border-bottom: 1px solid var(--rp-highlight-med); -} - -.code-wrap .titlebar .dots { - display: flex; - gap: 6px; - align-items: center; -} - -.code-wrap .titlebar .dot { - width: 11px; - height: 11px; - border-radius: 50%; - transition: opacity var(--transition); -} - -.code-wrap .titlebar .dot-close { - background: var(--rp-love); -} -.code-wrap .titlebar .dot-min { - background: var(--rp-gold); -} -.code-wrap .titlebar .dot-max { - background: var(--rp-foam); -} - -.code-wrap:not(:hover) .titlebar .dot { - opacity: 0.5; -} - -.code-wrap .titlebar .lang-label { - font-family: var(--mono); - font-size: 0.67rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--rp-muted); -} - -.code-wrap .titlebar .copy-btn { - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--rp-muted); - background: none; - border: 1px solid var(--rp-highlight-med); - border-radius: 3px; - padding: 0.15rem 0.5rem; - cursor: pointer; - transition: all var(--transition); -} - -.code-wrap .titlebar .copy-btn:hover { - color: var(--rp-iris); - border-color: var(--rp-iris); - background: rgba(196, 167, 231, 0.08); -} - -.code-wrap .titlebar .copy-btn.copied { - color: var(--rp-foam); - border-color: var(--rp-foam); -} - -/* Prompt bar */ -.code-wrap .prompt-bar { - display: flex; - align-items: center; - gap: 0.5rem; - background: var(--rp-surface); - padding: 0.4rem 1rem; - border-bottom: 1px solid var(--rp-highlight-low); - font-family: var(--mono); - font-size: 0.72rem; -} - -.prompt-bar .ps-user { - color: var(--rp-foam); -} -.prompt-bar .ps-at { - color: var(--rp-muted); -} -.prompt-bar .ps-host { - color: var(--rp-iris); -} -.prompt-bar .ps-colon { - color: var(--rp-muted); -} -.prompt-bar .ps-path { - color: var(--rp-gold); -} -.prompt-bar .ps-sign { - color: var(--rp-love); - margin-left: 2px; -} -.prompt-bar .ps-cmd { - color: var(--rp-text); - margin-left: 4px; -} - -.code-wrap pre { - margin: 0; - border: none; - border-radius: 0; - background: var(--rp-base); - padding: 1.2rem 1.4rem; - overflow-x: auto; - position: relative; -} - -.code-wrap pre::before { - display: none; -} /* override any global pre::before */ - -.code-wrap pre code { - background: none; - border: none; - padding: 0; - color: var(--rp-text); - font-size: 0.86rem; - line-height: 1.7; - font-family: var(--mono); -} - -.code-wrap pre code:hover { - background: none; - color: var(--rp-text); -} - -/* Rosé Pine syntax classes */ -.code-wrap .kw { - color: var(--rp-love); -} -.code-wrap .fn { - color: var(--rp-gold); -} -.code-wrap .str { - color: var(--rp-foam); -} -.code-wrap .num { - color: var(--rp-iris); -} -.code-wrap .cm { - color: var(--rp-muted); - font-style: italic; -} -.code-wrap .kv { - color: var(--rp-rose); -} -.code-wrap .type { - color: var(--rp-gold); -} -.code-wrap .op { - color: var(--rp-subtle); -} - -/* Fallback bare pre (without .code-wrap) */ -pre { - background: var(--rp-surface); - border: 1px solid var(--rp-highlight-med); - border-left: 2px solid var(--rp-iris); - padding: 1.3rem 1.5rem; - overflow-x: auto; - border-radius: var(--radius); - margin: 2rem 0; - position: relative; -} - -pre::before { - content: attr(data-lang); - position: absolute; - top: 0.6rem; - right: 0.9rem; - font-family: var(--mono); - font-size: 0.62rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--rp-muted); -} - -pre code { - background: none; - border: none; - padding: 0; - color: var(--rp-text); - font-size: 0.87rem; - line-height: 1.68; -} - -pre code:hover { - background: none; - color: var(--rp-text); -} - -/* ═══════════════════════════════════════════════════════════ - IMAGES & FIGURES - ═══════════════════════════════════════════════════════════ */ -img { - max-width: 100%; - height: auto; - display: block; - border-radius: var(--radius); - border: 1px solid var(--rp-highlight-med); - margin: 2.5rem auto; - transition: - border-color var(--transition), - box-shadow var(--transition); -} - -img:hover { - border-color: var(--rp-iris); - box-shadow: - 0 0 0 2px rgba(196, 167, 231, 0.1), - 0 12px 40px rgba(25, 23, 36, 0.6); -} - -figure { - margin: 2.8rem 0; -} - -figcaption { - font-family: var(--mono); - font-size: 0.71rem; - color: var(--rp-muted); - text-align: center; - margin-top: 0.75rem; - letter-spacing: 0.04em; -} - -figcaption::before { - content: "fig. "; - color: var(--rp-love); - font-style: italic; -} - -/* ═══════════════════════════════════════════════════════════ - CALLOUTS — full palette coverage - ═══════════════════════════════════════════════════════════ */ -.callout { - background: var(--rp-surface); - border: 1px solid var(--rp-highlight-med); - border-left: 3px solid var(--rp-iris); - border-radius: 0 var(--radius) var(--radius) 0; - padding: 1.1rem 1.3rem; - margin: 2rem 0; - font-size: 0.9rem; - color: var(--rp-subtle); - transition: - border-color var(--transition), - background var(--transition); - position: relative; -} - -.callout:hover { - background: var(--rp-overlay); -} - -.callout strong { - display: flex; - align-items: center; - gap: 0.4rem; - font-family: var(--mono); - font-size: 0.68rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--rp-iris); - margin-bottom: 0.45rem; -} - -/* Variants */ -.callout.love { - border-left-color: var(--rp-love); -} -.callout.love strong { - color: var(--rp-love); -} -.callout.love strong::before { - content: "✕"; -} - -.callout.gold { - border-left-color: var(--rp-gold); -} -.callout.gold strong { - color: var(--rp-gold); -} -.callout.gold strong::before { - content: "⚠"; - font-style: normal; -} - -.callout.pine { - border-left-color: var(--rp-pine); -} -.callout.pine strong { - color: var(--rp-pine); -} -.callout.pine strong::before { - content: "→"; -} - -.callout.foam { - border-left-color: var(--rp-foam); -} -.callout.foam strong { - color: var(--rp-foam); -} -.callout.foam strong::before { - content: "ℹ"; -} - -.callout.rose { - border-left-color: var(--rp-rose); -} -.callout.rose strong { - color: var(--rp-rose); -} -.callout.rose strong::before { - content: "◆"; - font-size: 0.5em; -} - -.callout strong::before { - content: "◆"; - font-size: 0.5em; - opacity: 0.7; -} - -/* ═══════════════════════════════════════════════════════════ - TAGS / BADGES - ═══════════════════════════════════════════════════════════ */ -.tag { - display: inline-block; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.09em; - text-transform: uppercase; - padding: 0.22rem 0.62rem; - border: 1px solid var(--rp-highlight-med); - border-radius: 100px; - color: var(--rp-muted); - margin-right: 0.4rem; - text-decoration: none; - border-bottom: 1px solid var(--rp-highlight-med); - transition: all var(--transition); - position: relative; - overflow: hidden; -} - -.tag::before { - content: ""; - position: absolute; - inset: 0; - background: var(--rp-iris); - opacity: 0; - transition: opacity var(--transition); - border-radius: inherit; -} - -.tag:hover { - border-color: var(--rp-iris); - color: var(--rp-iris); - transform: translateY(-1px); - box-shadow: 0 3px 10px rgba(196, 167, 231, 0.15); -} - -/* ═══════════════════════════════════════════════════════════ - KEYBOARD SHORTCUT / KBD - ═══════════════════════════════════════════════════════════ */ -kbd { - display: inline-block; - font-family: var(--mono); - font-size: 0.78rem; - background: var(--rp-overlay); - color: var(--rp-text); - padding: 0.15rem 0.5rem; - border-radius: 4px; - border: 1px solid var(--rp-highlight-high); - border-bottom-width: 2px; - line-height: 1.5; -} - -/* ═══════════════════════════════════════════════════════════ - DEFINITION LIST - ═══════════════════════════════════════════════════════════ */ -dl { - margin: 1.6rem 0; -} - -dt { - font-family: var(--sans); - font-weight: 700; - color: var(--rp-gold); - margin-top: 1rem; - font-size: 0.95rem; -} - -dt::after { - content: ":"; - color: var(--rp-muted); -} - -dd { - margin: 0.3rem 0 0 1.4rem; - color: var(--rp-subtle); - font-size: 0.93rem; - border-left: 2px solid var(--rp-highlight-med); - padding-left: 0.9rem; -} - -/* ═══════════════════════════════════════════════════════════ - FOOTNOTES - ═══════════════════════════════════════════════════════════ */ -.footnotes { - margin-top: 4rem; - padding-top: 1.5rem; - border-top: 1px solid var(--rp-highlight-med); - font-family: var(--mono); - font-size: 0.78rem; - color: var(--rp-muted); - counter-reset: fn; -} - -.footnotes p { - font-size: 0.78rem; - color: var(--rp-muted); - margin: 0.4rem 0; - padding-left: 1.6rem; - position: relative; -} - -sup { - font-family: var(--mono); - font-size: 0.65rem; - color: var(--rp-love); - margin-left: 1px; - vertical-align: super; - line-height: 0; -} - -a[id^="fn-"] { - color: var(--rp-love); - border-bottom: none; - font-family: var(--mono); - font-size: 0.7rem; -} - -/* ═══════════════════════════════════════════════════════════ - NAVIGATION — pine/iris - ═══════════════════════════════════════════════════════════ */ -nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1rem 0 3rem; - border-bottom: 1px solid var(--rp-highlight-med); - margin-bottom: 3.5rem; - flex-wrap: wrap; - gap: 1rem; -} - -nav .logo { - font-family: var(--sans); - font-weight: 800; - font-size: 1.05rem; - letter-spacing: -0.025em; - color: var(--rp-text); - text-decoration: none; - border-bottom: none; - display: flex; - align-items: center; - gap: 0.4rem; - transition: color var(--transition); -} - -nav .logo::before { - content: "✿"; - color: var(--rp-love); - font-size: 0.9rem; - animation: blink 4s ease-in-out infinite; -} - -nav .logo:hover { - color: var(--rp-iris); -} -nav .logo:hover::before { - color: var(--rp-rose); -} - -nav ul { - display: flex; - gap: 0.3rem; - margin: 0; - padding: 0; - list-style: none; -} - -nav ul li { - padding: 0; - margin: 0; -} -nav ul li::before { - display: none; -} - -nav a { - font-family: var(--mono); - font-size: 0.71rem; - letter-spacing: 0.07em; - text-transform: uppercase; - color: var(--rp-muted); - text-decoration: none; - border-bottom: none; - padding: 0.3rem 0.7rem; - border-radius: var(--radius); - transition: all var(--transition); -} - -nav a:hover { - color: var(--rp-iris); - background: rgba(196, 167, 231, 0.08); - border-bottom: none; -} - -nav a.active { - color: var(--rp-iris); - background: rgba(196, 167, 231, 0.1); -} - -/* ═══════════════════════════════════════════════════════════ - ARTICLE HEADER DECORATION - ═══════════════════════════════════════════════════════════ */ -header { - position: relative; - padding-bottom: 2.5rem; - border-bottom: 1px solid var(--rp-highlight-med); - margin-bottom: 3rem; -} - -/* ═══════════════════════════════════════════════════════════ - FOOTER - ═══════════════════════════════════════════════════════════ */ -footer { - margin-top: 6rem; - padding: 2rem 0 1rem; - border-top: 1px solid var(--rp-highlight-med); - font-family: var(--mono); - font-size: 0.71rem; - letter-spacing: 0.04em; - color: var(--rp-muted); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; -} - -footer a { - color: var(--rp-muted); - border-bottom: none; - transition: color var(--transition); -} - -footer a:hover { - color: var(--rp-iris); -} - -.footer-left::before { - content: "✿ "; - color: var(--rp-love); -} - -/* ═══════════════════════════════════════════════════════════ - READING PROGRESS — iris → love → gold - ═══════════════════════════════════════════════════════════ */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - height: 2px; - background: linear-gradient( - 90deg, - var(--rp-iris), - var(--rp-love), - var(--rp-gold) - ); - z-index: 999; - width: 0%; - animation: progressPulse 3s ease infinite; - transition: width 0.08s linear; -} - -/* ═══════════════════════════════════════════════════════════ - BLINKING CURSOR - ═══════════════════════════════════════════════════════════ */ -.cursor::after { - content: "▍"; - color: var(--rp-iris); - animation: blink 1.1s step-end infinite; - margin-left: 2px; - font-size: 0.85em; -} - -/* ═══════════════════════════════════════════════════════════ - TABLE OF CONTENTS - ═══════════════════════════════════════════════════════════ */ -.toc { - background: var(--rp-surface); - border: 1px solid var(--rp-highlight-med); - border-left: 3px solid var(--rp-pine); - border-radius: 0 var(--radius) var(--radius) 0; - padding: 1.2rem 1.4rem; - margin: 2.5rem 0; - font-size: 0.88rem; -} - -.toc-title { - font-family: var(--mono); - font-size: 0.68rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--rp-pine); - margin-bottom: 0.9rem; - display: flex; - align-items: center; - gap: 0.4rem; -} - -.toc-title::before { - content: "≡"; - font-size: 1rem; - line-height: 1; -} - -.toc ol { - margin: 0; - counter-reset: toc-counter; -} - -.toc ol li { - counter-increment: toc-counter; - padding-left: 1.4rem; - margin: 0.3rem 0; - color: var(--rp-subtle); - font-size: 0.88rem; -} - -.toc ol li::before { - content: counter(toc-counter) "."; - color: var(--rp-pine); - font-size: 0.75rem; - top: 0.2em; -} - -.toc a { - color: var(--rp-subtle); - border-bottom: none; - transition: color var(--transition); -} - -.toc a:hover { - color: var(--rp-foam); -} - -/* ═══════════════════════════════════════════════════════════ - SELECTION & SCROLLBAR - ═══════════════════════════════════════════════════════════ */ -::selection { - background: rgba(196, 167, 231, 0.22); - color: var(--rp-text); -} - -::-webkit-scrollbar { - width: 6px; - height: 6px; -} -::-webkit-scrollbar-track { - background: var(--rp-base); -} -::-webkit-scrollbar-thumb { - background: var(--rp-highlight-med); - border-radius: 3px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--rp-highlight-high); -} - -/* ═══════════════════════════════════════════════════════════ - ABBR - ═══════════════════════════════════════════════════════════ */ -abbr[title] { - border-bottom: 1px dotted var(--rp-muted); - cursor: help; - text-decoration: none; - color: var(--rp-rose); -} - -/* ═══════════════════════════════════════════════════════════ - MARK / HIGHLIGHT - ═══════════════════════════════════════════════════════════ */ -mark { - background: rgba(246, 193, 119, 0.2); - color: var(--rp-gold); - border-radius: 2px; - padding: 0.05em 0.2em; -} - -/* ═══════════════════════════════════════════════════════════ - RESPONSIVE - ═══════════════════════════════════════════════════════════ */ -@media (max-width: 700px) { - body { - padding: 2rem 1.3rem 5rem; - font-size: 17px; - } - h1 { - font-size: 1.9rem; - } - h2 { - font-size: 1.25rem; - } - h2::before { - display: none; - } - nav { - flex-wrap: wrap; - gap: 0.8rem; - } - nav ul { - gap: 0; - } - footer { - flex-direction: column; - text-align: center; - } - .pullquote { - margin: 2rem -1.3rem; - padding: 1.5rem; - } -} - -/* ═══════════════════════════════════════════════════════════ - FOCUS ACCESSIBILITY - ═══════════════════════════════════════════════════════════ */ -:focus-visible { - outline: 2px solid var(--rp-iris); - outline-offset: 3px; - border-radius: var(--radius); -} diff --git a/themes/terminal-gruvbox.css b/themes/terminal-gruvbox.css deleted file mode 100644 index ab67058..0000000 --- a/themes/terminal-gruvbox.css +++ /dev/null @@ -1,744 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Fira+Code:wght@300;400;500;600;700&display=swap"); - -/* ─── Gruvbox Dark Palette ──────────────────────────────── */ -:root { - /* Gruvbox backgrounds */ - --gb-bg-hard: #1d2021; - --gb-bg: #282828; - --gb-bg-soft: #32302f; - --gb-bg-1: #3c3836; - --gb-bg-2: #504945; - --gb-bg-3: #665c54; - --gb-bg-4: #7c6f64; - - /* Gruvbox foregrounds */ - --gb-fg: #ebdbb2; - --gb-fg-1: #d5c4a1; - --gb-fg-2: #bdae93; - --gb-fg-3: #a89984; - - /* Gruvbox accent colors — bright variants */ - --gb-red: #fb4934; - --gb-green: #b8bb26; - --gb-yellow: #fabd2f; - --gb-blue: #83a598; - --gb-purple: #d3869b; - --gb-aqua: #8ec07c; - --gb-orange: #fe8019; - - /* Gruvbox accent colors — normal variants */ - --gb-red-n: #cc241d; - --gb-green-n: #98971a; - --gb-yellow-n: #d79921; - --gb-blue-n: #458588; - --gb-purple-n: #b16286; - --gb-aqua-n: #689d6a; - --gb-orange-n: #d65d0e; - - /* Semantic */ - --bg: var(--gb-bg-hard); - --surface: var(--gb-bg); - --surface-2: var(--gb-bg-soft); - --surface-3: var(--gb-bg-1); - --border: var(--gb-bg-2); - --text: var(--gb-fg); - --text-dim: var(--gb-fg-2); - --text-muted: var(--gb-bg-4); - --accent: var(--gb-yellow); - --accent-2: var(--gb-orange); - - /* All mono — terminal commitment */ - --mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; - - --radius: 2px; - --max-w: 740px; - --transition: 120ms ease; -} - -/* ─── Reset ─────────────────────────────────────────────── */ -*, -*::before, -*::after { - box-sizing: border-box; -} -html { - scroll-behavior: smooth; -} - -/* ─── Body ──────────────────────────────────────────────── */ -body { - margin: 0; - padding: 3rem 2rem 6rem; - background-color: var(--gb-bg-hard); - /* Subtle scanline texture */ - background-image: repeating-linear-gradient( - 0deg, - transparent, - transparent 2px, - rgba(0, 0, 0, 0.08) 2px, - rgba(0, 0, 0, 0.08) 4px - ); - color: var(--gb-fg); - font-family: var(--mono); - font-size: 15px; - line-height: 1.75; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - font-feature-settings: - "liga" 1, - "calt" 1; - cursor: default; -} - -body > * { - max-width: var(--max-w); - margin-left: auto; - margin-right: auto; -} - -/* ─── Headings ──────────────────────────────────────────── */ -h1, -h2, -h3, -h4 { - font-family: var(--mono); - font-weight: 700; - line-height: 1.2; - letter-spacing: 0; -} - -/* h1 — prompt style: yellow with # sigil */ -h1 { - font-size: clamp(1.4rem, 3.5vw, 1.9rem); - font-weight: 700; - color: var(--gb-yellow); - margin-bottom: 0.5rem; - position: relative; - padding-left: 1.6rem; -} - -h1::before { - content: "#"; - position: absolute; - left: 0; - color: var(--gb-orange); - font-weight: 700; -} - -/* h2 — ## green */ -h2 { - font-size: 1.2rem; - font-weight: 600; - margin-top: 3rem; - color: var(--gb-green); - padding-left: 1.6rem; - position: relative; - border: none; -} - -h2::before { - content: "##"; - position: absolute; - left: 0; - color: var(--gb-bg-4); - font-weight: 400; - font-size: 0.9em; -} - -/* h3 — ### aqua */ -h3 { - font-size: 1.05rem; - font-weight: 600; - margin-top: 2rem; - color: var(--gb-aqua); - padding-left: 2.1rem; - position: relative; -} - -h3::before { - content: "###"; - position: absolute; - left: 0; - color: var(--gb-bg-4); - font-weight: 400; - font-size: 0.85em; -} - -/* h4 — #### blue */ -h4 { - font-size: 0.95rem; - font-weight: 600; - margin-top: 1.6rem; - color: var(--gb-blue); - padding-left: 2.7rem; - position: relative; -} - -h4::before { - content: "####"; - position: absolute; - left: 0; - color: var(--gb-bg-4); - font-weight: 400; - font-size: 0.85em; -} - -/* ─── Paragraphs ────────────────────────────────────────── */ -p { - margin: 1.2rem 0; - color: var(--gb-fg-1); - font-size: 0.95rem; -} - -/* ─── Meta / Byline ─────────────────────────────────────── */ -.meta, -time, -.byline { - display: block; - font-size: 0.78rem; - color: var(--gb-bg-4); - margin-bottom: 2rem; - letter-spacing: 0.02em; -} - -/* Fake prompt prefix on time/meta */ -.meta::before, -time::before { - content: "$ date --iso "; - color: var(--gb-green); -} - -/* ─── Links ─────────────────────────────────────────────── */ -a { - color: var(--gb-blue); - text-decoration: none; - border-bottom: 1px solid var(--gb-blue-n); - transition: - color var(--transition), - border-color var(--transition); -} - -a:hover { - color: var(--gb-aqua); - border-bottom-color: var(--gb-aqua); -} - -/* ─── Lists ─────────────────────────────────────────────── */ -ul, -ol { - margin: 1.2rem 0; - padding-left: 0; - list-style: none; -} - -ul li, -ol li { - position: relative; - padding-left: 2rem; - margin: 0.4rem 0; - color: var(--gb-fg-1); - font-size: 0.95rem; -} - -/* ul — orange arrow */ -ul li::before { - content: "->"; - position: absolute; - left: 0; - color: var(--gb-orange); - font-weight: 500; -} - -ol { - counter-reset: ol-counter; -} -ol li { - counter-increment: ol-counter; -} - -/* ol — yellow brackets */ -ol li::before { - content: "[" counter(ol-counter) "]"; - position: absolute; - left: 0; - color: var(--gb-yellow); - font-size: 0.8rem; - top: 0.08em; -} - -/* ─── Horizontal Rule ───────────────────────────────────── */ -hr { - border: none; - margin: 2.5rem 0; - height: 1px; - background: none; - position: relative; - overflow: visible; - display: flex; - align-items: center; -} - -hr::before { - content: "# ────────────────────────────────────────────────────────"; - color: var(--gb-bg-3); - font-family: var(--mono); - font-size: 0.82rem; - white-space: nowrap; - overflow: hidden; - max-width: 100%; -} - -/* ─── Blockquote — purple, indented comment style ──────── */ -blockquote { - margin: 2rem 0; - padding: 0; - border: none; - background: none; - position: relative; -} - -blockquote p { - margin: 0.3rem 0; - color: var(--gb-purple); - font-style: italic; - padding-left: 2rem; - position: relative; - font-size: 0.93rem; -} - -blockquote p::before { - content: "//"; - position: absolute; - left: 0; - color: var(--gb-bg-3); - font-style: normal; - font-weight: 500; -} - -blockquote cite { - display: block; - margin-top: 0.5rem; - padding-left: 2rem; - font-size: 0.75rem; - color: var(--gb-bg-4); - font-style: normal; - position: relative; -} - -blockquote cite::before { - content: "-- "; - color: var(--gb-bg-3); -} - -/* ─── Tables ───────────────────────────────────────────── */ -table { - width: 100%; - border-collapse: collapse; - margin: 1.8rem 0; - font-size: 0.85rem; - font-family: var(--mono); - background: var(--gb-bg); - border: 1px solid var(--gb-bg-2); - border-radius: var(--radius); - overflow: hidden; -} - -thead { - background: var(--gb-bg-1); -} - -th { - text-align: left; - padding: 0.55rem 1rem; - font-size: 0.75rem; - letter-spacing: 0.06em; - color: var(--gb-yellow); - border-bottom: 1px solid var(--gb-bg-2); - font-weight: 600; - text-transform: uppercase; -} - -td { - padding: 0.5rem 1rem; - border-bottom: 1px solid var(--gb-bg-1); - color: var(--gb-fg-2); - vertical-align: top; -} - -tr:last-child td { - border-bottom: none; -} -tbody tr:hover td { - background: var(--gb-bg-1); - color: var(--gb-fg); -} - -/* ─── Inline Code ───────────────────────────────────────── */ -code { - font-family: var(--mono); - font-size: 0.88rem; - background: var(--gb-bg-1); - color: var(--gb-aqua); - padding: 0.12rem 0.38rem; - border-radius: var(--radius); - border: 1px solid var(--gb-bg-3); -} - -/* ─── Code Blocks ───────────────────────────────────────── */ -pre { - background: var(--gb-bg); - border: 1px solid var(--gb-bg-2); - padding: 0; - overflow: hidden; - border-radius: var(--radius); - margin: 1.8rem 0; - position: relative; -} - -/* Fake terminal titlebar */ -pre::before { - content: " ● ● ● " attr(data-lang); - display: block; - background: var(--gb-bg-2); - padding: 0.4rem 0.9rem; - font-family: var(--mono); - font-size: 0.7rem; - color: var(--gb-bg-4); - letter-spacing: 0.06em; - border-bottom: 1px solid var(--gb-bg-3); -} - -/* Prompt before first line of code */ -pre code { - display: block; - background: none; - border: none; - padding: 1rem 1.2rem 1.1rem; - color: var(--gb-fg); - font-size: 0.87rem; - line-height: 1.65; - overflow-x: auto; -} - -/* Syntax color classes */ -pre .kw { - color: var(--gb-red); - font-weight: 500; -} -pre .fn { - color: var(--gb-green); -} -pre .str { - color: var(--gb-yellow); -} -pre .num { - color: var(--gb-purple); -} -pre .cm { - color: var(--gb-bg-4); - font-style: italic; -} -pre .kv { - color: var(--gb-aqua); -} -pre .op { - color: var(--gb-orange); -} -pre .type { - color: var(--gb-blue); -} - -/* ─── Images ───────────────────────────────────────────── */ -img { - max-width: 100%; - height: auto; - display: block; - border-radius: var(--radius); - border: 1px solid var(--gb-bg-2); - margin: 2rem auto; - filter: sepia(8%) saturate(90%); -} - -figure { - margin: 2rem 0; -} - -figcaption { - font-size: 0.75rem; - color: var(--gb-bg-4); - text-align: center; - margin-top: 0.6rem; -} - -figcaption::before { - content: "# "; - color: var(--gb-bg-3); -} - -/* ─── Callouts — comment-block style ────────────────────── */ -aside, -.note, -.callout { - background: var(--gb-bg); - border: 1px solid var(--gb-bg-3); - border-left: 3px solid var(--gb-yellow); - border-radius: 0 var(--radius) var(--radius) 0; - padding: 0.9rem 1.1rem; - margin: 1.8rem 0; - font-size: 0.875rem; - color: var(--gb-fg-2); - position: relative; -} - -aside strong, -.callout strong { - font-size: 0.72rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--gb-yellow); - display: block; - margin-bottom: 0.3rem; -} - -.callout.warn { - border-left-color: var(--gb-orange); -} -.callout.warn strong { - color: var(--gb-orange); -} -.callout.error { - border-left-color: var(--gb-red); -} -.callout.error strong { - color: var(--gb-red); -} -.callout.ok { - border-left-color: var(--gb-green); -} -.callout.ok strong { - color: var(--gb-green); -} -.callout.info { - border-left-color: var(--gb-blue); -} -.callout.info strong { - color: var(--gb-blue); -} - -/* ─── Tags ─────────────────────────────────────────────── */ -.tag { - display: inline-block; - font-family: var(--mono); - font-size: 0.7rem; - padding: 0.18rem 0.5rem; - background: var(--gb-bg-1); - border: 1px solid var(--gb-bg-3); - border-radius: var(--radius); - color: var(--gb-fg-3); - margin-right: 0.35rem; - text-decoration: none; - border-bottom: none; - transition: all var(--transition); -} - -.tag::before { - content: "#"; - color: var(--gb-bg-4); - margin-right: 1px; -} - -.tag:hover { - background: var(--gb-bg-2); - color: var(--gb-yellow); - border-color: var(--gb-yellow); - border-bottom: none; -} - -/* ─── Navigation — shell PS1 style ──────────────────────── */ -nav { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.8rem 0 2.5rem; - border-bottom: 1px solid var(--gb-bg-2); - margin-bottom: 3rem; - flex-wrap: wrap; - gap: 1rem; -} - -nav .logo { - font-family: var(--mono); - font-weight: 700; - font-size: 0.95rem; - color: var(--gb-fg); - text-decoration: none; - border-bottom: none; - display: flex; - align-items: center; - gap: 0; -} - -/* PS1 prompt segments */ -nav .logo .prompt-user { - color: var(--gb-green); -} -nav .logo .prompt-at { - color: var(--gb-fg-3); -} -nav .logo .prompt-host { - color: var(--gb-blue); -} -nav .logo .prompt-colon { - color: var(--gb-fg-3); -} -nav .logo .prompt-path { - color: var(--gb-yellow); -} -nav .logo .prompt-sign { - color: var(--gb-orange); - margin-left: 4px; -} - -nav ul { - display: flex; - gap: 0.2rem; - margin: 0; - padding: 0; - list-style: none; -} - -nav ul li { - padding: 0; - margin: 0; -} -nav ul li::before { - display: none; -} - -nav a { - font-family: var(--mono); - font-size: 0.75rem; - color: var(--gb-fg-3); - text-decoration: none; - border-bottom: none; - padding: 0.2rem 0.6rem; - border-radius: var(--radius); - transition: all var(--transition); -} - -nav a:hover { - color: var(--gb-fg); - background: var(--gb-bg-1); - border-bottom: none; -} - -/* ─── Footer ───────────────────────────────────────────── */ -footer { - margin-top: 4rem; - padding-top: 1.5rem; - border-top: 1px solid var(--gb-bg-2); - font-size: 0.75rem; - color: var(--gb-bg-4); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 1rem; -} - -footer::before { - content: none; -} - -.footer-prompt::before { - content: "$ exit # "; - color: var(--gb-green); -} - -/* ─── Reading Progress — yellow ────────────────────────── */ -.progress-bar { - position: fixed; - top: 0; - left: 0; - height: 2px; - background: linear-gradient(90deg, var(--gb-yellow), var(--gb-orange)); - z-index: 999; - width: 0%; - box-shadow: 0 0 8px rgba(250, 189, 47, 0.3); - transition: width 0.1s linear; -} - -/* ─── Blinking cursor decoration ────────────────────────── */ -.cursor::after { - content: "█"; - color: var(--gb-yellow); - animation: blink 1.1s step-end infinite; - margin-left: 2px; - font-weight: 400; -} - -@keyframes blink { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0; - } -} - -/* ─── Selection ────────────────────────────────────────── */ -::selection { - background: var(--gb-bg-3); - color: var(--gb-yellow); -} - -/* ─── Scrollbar ────────────────────────────────────────── */ -::-webkit-scrollbar { - width: 6px; - height: 6px; -} -::-webkit-scrollbar-track { - background: var(--gb-bg-hard); -} -::-webkit-scrollbar-thumb { - background: var(--gb-bg-2); - border-radius: 1px; -} -::-webkit-scrollbar-thumb:hover { - background: var(--gb-bg-3); -} - -/* ─── Abbr ─────────────────────────────────────────────── */ -abbr[title] { - border-bottom: 1px dashed var(--gb-bg-4); - cursor: help; - text-decoration: none; -} - -/* ─── Responsive ───────────────────────────────────────── */ -@media (max-width: 700px) { - body { - padding: 2rem 1rem 4rem; - font-size: 13.5px; - } - h1 { - font-size: 1.2rem; - } - h2 { - font-size: 1.05rem; - } - nav ul { - gap: 0; - } - footer { - flex-direction: column; - } -} - -/* ─── Focus Accessibility ──────────────────────────────── */ -:focus-visible { - outline: 1px solid var(--gb-yellow); - outline-offset: 2px; - border-radius: var(--radius); -} diff --git a/themes/tufte.css b/themes/tufte.css deleted file mode 100644 index cc5e91d..0000000 --- a/themes/tufte.css +++ /dev/null @@ -1,133 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap"); - -body { - margin: 0; - padding: 3rem 2rem; - background: #fffff8; - color: #111; - - font-family: Georgia, "Libre Baskerville", serif; - line-height: 1.75; - font-size: 19px; - - /* Improve text rendering for Lighthouse */ - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; -} - -body > * { - max-width: 720px; - margin-left: auto; - margin-right: auto; -} - -/* Headings */ -h1, -h2, -h3 { - text-align: left; - font-weight: 700; - line-height: 1.25; - scroll-margin-top: 1rem; /* anchors don't get hidden by fixed headers */ -} - -h1 { - font-size: 2.4rem; - margin-bottom: 1rem; -} -h2 { - font-size: 1.6rem; - margin-top: 3rem; -} -h3 { - font-size: 1.3rem; - margin-top: 2rem; -} - -/* Paragraphs */ -p { - margin: 1.3rem 0; -} - -/* Lists */ -ul, -ol { - margin: 1.2rem 0 1.2rem 1.6rem; -} -li { - margin: 0.4rem 0; -} - -/* Horizontal rules */ -hr { - border: none; - border-top: 1px solid #ddd; - margin: 3rem auto; -} - -/* Tables */ -table { - border-collapse: collapse; - margin: 1.5rem 0; - font-size: 0.95rem; -} -th, -td { - padding: 0.5rem 0.8rem; - border-bottom: 1px solid #ddd; -} -th { - text-align: left; -} - -/* Inline code */ -code { - font-family: ui-monospace, SFMono-Regular, Consolas, monospace; - background: #f5f5f5; - padding: 0.15rem 0.3rem; - border-radius: 3px; - font-size: 0.9rem; - word-break: break-word; -} - -/* Code blocks */ -pre { - background: #f7f7f7; - padding: 1rem 1.2rem; - overflow-x: auto; - border-left: 3px solid #ccc; - margin: 1.5rem 0; -} - -pre code { - background: none; - padding: 0; -} - -/* Links */ -a { - color: #222; - text-decoration: underline; -} -a:hover { - color: black; -} - -/* Responsive */ -@media (max-width: 700px) { - body { - padding: 2rem 1.2rem; - font-size: 17px; - } -} - -/* Accessibility / Lighthouse improvements */ -img { - max-width: 100%; - height: auto; - display: block; -} -abbr[title] { - border-bottom: 1px dotted; - cursor: help; -} |