rework the site: gruvbox editorial default with a desktop-mode toggle; drop the terminal layout and phone desktop
This commit is contained in:
parent
976fc362ff
commit
86692637de
19 changed files with 1350 additions and 1664 deletions
|
|
@ -1,26 +1,298 @@
|
|||
@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 {
|
||||
--background: #1d2021;
|
||||
--foreground: #ebdbb2;
|
||||
/* 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-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--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);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #1d2021;
|
||||
--foreground: #ebdbb2;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue