298 lines
7 KiB
CSS
298 lines
7 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
GRUVBOX EDITORIAL THEME (default)
|
|
------------------------------------------------------------
|
|
A "technical print" layout in gruvbox dark-hard. Tokens live
|
|
here; the page markup uses Tailwind utilities plus the
|
|
@utility classes below. Everything visual is scoped to
|
|
html[data-theme="gruvbox"] so the skeuo desktop (which reads
|
|
its own vars from skeuo.css) is never affected.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* gruvbox dark-hard */
|
|
--bg: #1d2021;
|
|
--bg-raised: #282828;
|
|
--bg-well: #161819;
|
|
|
|
--ink: #fbf1c7;
|
|
--body: #d5c4a1;
|
|
--muted: #a89984;
|
|
--faint: #928374;
|
|
|
|
/* one accent (orange); other gruvbox hues are for status only */
|
|
--accent: #fe8019;
|
|
--accent-strong: #d65d0e;
|
|
--negative: #fb4934;
|
|
--positive: #b8bb26;
|
|
|
|
--rule: rgba(235, 219, 178, 0.16);
|
|
--rule-soft: rgba(235, 219, 178, 0.09);
|
|
--rule-strong: rgba(235, 219, 178, 0.3);
|
|
|
|
--fill: rgba(235, 219, 178, 0.035);
|
|
--fill-strong: rgba(235, 219, 178, 0.07);
|
|
}
|
|
|
|
/* Beats page.css's :root when the editorial theme is active. */
|
|
html[data-theme="gruvbox"] {
|
|
color-scheme: dark;
|
|
--accent: #fe8019;
|
|
--accent2: #d65d0e;
|
|
--accent3: #fabd2f;
|
|
--green: #b8bb26;
|
|
--red: #fb4934;
|
|
--gray: #a89984;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-ink: var(--ink);
|
|
--color-body: var(--body);
|
|
--color-muted: var(--muted);
|
|
--color-faint: var(--faint);
|
|
--color-accent: var(--accent);
|
|
--color-accent-strong: var(--accent-strong);
|
|
--color-positive: var(--positive);
|
|
--color-negative: var(--negative);
|
|
--color-bg: var(--bg);
|
|
|
|
--font-sans: var(--font-plex);
|
|
--font-mono: var(--font-plexmono);
|
|
--font-display: var(--font-news);
|
|
}
|
|
|
|
html[data-theme="gruvbox"] {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 5.5rem;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
html[data-theme="gruvbox"] body {
|
|
background-color: var(--bg);
|
|
background-image: radial-gradient(120% 60% at 50% -10%, rgba(254, 128, 25, 0.05), transparent 70%);
|
|
background-repeat: no-repeat;
|
|
color: var(--body);
|
|
font-family: var(--font-plex), ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.65;
|
|
overflow-x: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
html[data-theme="gruvbox"] ::selection {
|
|
background: rgba(254, 128, 25, 0.28);
|
|
color: var(--ink);
|
|
}
|
|
|
|
html[data-theme="gruvbox"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
html[data-theme="gruvbox"] ::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
html[data-theme="gruvbox"] ::-webkit-scrollbar-track {
|
|
background: var(--bg-well);
|
|
}
|
|
html[data-theme="gruvbox"] ::-webkit-scrollbar-thumb {
|
|
background: #3c3836;
|
|
border: 3px solid var(--bg-well);
|
|
border-radius: 99px;
|
|
}
|
|
html[data-theme="gruvbox"] ::-webkit-scrollbar-thumb:hover {
|
|
background: #504945;
|
|
}
|
|
|
|
/* Phones never get the desktop-mode button. */
|
|
html[data-device="phone"] .desktop-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Type
|
|
------------------------------------------------------------------ */
|
|
|
|
@utility display {
|
|
font-family: var(--font-news), Georgia, "Times New Roman", serif;
|
|
font-weight: 500;
|
|
letter-spacing: -0.012em;
|
|
line-height: 1.12;
|
|
color: var(--ink);
|
|
}
|
|
|
|
@utility serif-num {
|
|
font-family: var(--font-news), Georgia, serif;
|
|
font-weight: 500;
|
|
font-variant-numeric: lining-nums tabular-nums;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* run-in metadata label: mono, sentence case — deliberately not all-caps */
|
|
@utility label {
|
|
font-family: var(--font-plexmono), ui-monospace, monospace;
|
|
font-size: 0.78rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0.01em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
@utility lede {
|
|
font-size: 1.0625rem;
|
|
line-height: 1.7;
|
|
color: var(--body);
|
|
}
|
|
|
|
@utility measure {
|
|
max-width: 34rem;
|
|
}
|
|
|
|
@utility measure-wide {
|
|
max-width: 46rem;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Surfaces — restrained translucency, hairline rules
|
|
------------------------------------------------------------------ */
|
|
|
|
@utility shell {
|
|
width: 100%;
|
|
max-width: 1840px;
|
|
margin-inline: auto;
|
|
padding-inline: clamp(1.25rem, 3.5vw, 5rem);
|
|
}
|
|
|
|
@utility glass {
|
|
background-color: var(--fill);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
@utility glass-soft {
|
|
background-color: transparent;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
@utility glass-sunken {
|
|
background-color: var(--bg-well);
|
|
border: 1px solid var(--rule-soft);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
@utility glass-bar {
|
|
background-color: rgba(29, 32, 33, 0.94);
|
|
border-bottom: 1px solid rgba(235, 219, 178, 0.22);
|
|
backdrop-filter: blur(12px) saturate(120%);
|
|
}
|
|
|
|
@utility glass-press-sm {
|
|
background-color: transparent;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 8px;
|
|
transition-property: background-color, border-color, color;
|
|
transition-duration: 160ms;
|
|
transition-timing-function: ease-out;
|
|
|
|
&:hover {
|
|
background-color: var(--fill-strong);
|
|
border-color: var(--rule-strong);
|
|
color: var(--ink);
|
|
}
|
|
&:active {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
@utility rule {
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
@utility rule-strong {
|
|
border-top: 1px solid var(--rule-strong);
|
|
}
|
|
|
|
@utility rule-soft {
|
|
border-top: 1px solid var(--rule-soft);
|
|
}
|
|
|
|
@utility index-num {
|
|
font-family: var(--font-plexmono), ui-monospace, monospace;
|
|
font-size: 0.78rem;
|
|
color: var(--faint);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Motion — scroll reveals only
|
|
------------------------------------------------------------------ */
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translate3d(0, 14px, 0);
|
|
transition:
|
|
opacity 0.55s ease-out,
|
|
transform 0.55s ease-out;
|
|
transition-delay: var(--delay, 0ms);
|
|
}
|
|
.reveal.is-in {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
49% {
|
|
opacity: 1;
|
|
}
|
|
50%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.animate-blink {
|
|
animation: blink 1.05s step-end infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html[data-theme="gruvbox"] {
|
|
scroll-behavior: auto;
|
|
}
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
.animate-blink {
|
|
animation: none !important;
|
|
}
|
|
* {
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Helpers
|
|
------------------------------------------------------------------ */
|
|
|
|
html[data-theme="gruvbox"] .link {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: rgba(254, 128, 25, 0.4);
|
|
transition: text-decoration-color 150ms ease-out;
|
|
}
|
|
html[data-theme="gruvbox"] .link:hover {
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
|
|
html[data-theme="gruvbox"] .hide-scrollbar {
|
|
scrollbar-width: none;
|
|
}
|
|
html[data-theme="gruvbox"] .hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|