dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rename the editorial theme to "web" and make it the landing view (stop persisting the theme, so a reload never opens the desktop)

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 08:20:50 +00:00
commit 40824dbcb1
10 changed files with 70 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/app/globals.css
View file

@ -1,13 +1,13 @@
@import "tailwindcss";
/* ============================================================
GRUVBOX EDITORIAL THEME (default)
WEB 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.
A "technical print" layout painted in the gruvbox dark-hard
palette. Tokens live here; the page markup uses Tailwind
utilities plus the @utility classes below. Everything visual
is scoped to html[data-theme="web"] so the skeuo desktop
(which reads its own vars from skeuo.css) is never affected.
============================================================ */
:root {
@ -38,7 +38,7 @@
}
/* Beats page.css's :root when the editorial theme is active. */
html[data-theme="gruvbox"] {
html[data-theme="web"] {
color-scheme: dark;
--accent: #fe8019;
--accent2: #d65d0e;
@ -64,13 +64,13 @@ html[data-theme="gruvbox"] {
--font-display: var(--font-news);
}
html[data-theme="gruvbox"] {
html[data-theme="web"] {
scroll-behavior: smooth;
scroll-padding-top: 5.5rem;
background-color: var(--bg);
}
html[data-theme="gruvbox"] body {
html[data-theme="web"] 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;
@ -82,29 +82,29 @@ html[data-theme="gruvbox"] body {
-webkit-font-smoothing: antialiased;
}
html[data-theme="gruvbox"] ::selection {
html[data-theme="web"] ::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 {
html[data-theme="web"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
html[data-theme="gruvbox"] ::-webkit-scrollbar {
html[data-theme="web"] ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
html[data-theme="gruvbox"] ::-webkit-scrollbar-track {
html[data-theme="web"] ::-webkit-scrollbar-track {
background: var(--bg-well);
}
html[data-theme="gruvbox"] ::-webkit-scrollbar-thumb {
html[data-theme="web"] ::-webkit-scrollbar-thumb {
background: #3c3836;
border: 3px solid var(--bg-well);
border-radius: 99px;
}
html[data-theme="gruvbox"] ::-webkit-scrollbar-thumb:hover {
html[data-theme="web"] ::-webkit-scrollbar-thumb:hover {
background: #504945;
}
@ -264,7 +264,7 @@ html[data-device="phone"] .desktop-toggle {
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="gruvbox"] {
html[data-theme="web"] {
scroll-behavior: auto;
}
.reveal {
@ -284,7 +284,7 @@ html[data-device="phone"] .desktop-toggle {
Helpers
------------------------------------------------------------------ */
html[data-theme="gruvbox"] .link {
html[data-theme="web"] .link {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
@ -292,13 +292,13 @@ html[data-theme="gruvbox"] .link {
text-decoration-color: rgba(254, 128, 25, 0.4);
transition: text-decoration-color 150ms ease-out;
}
html[data-theme="gruvbox"] .link:hover {
html[data-theme="web"] .link:hover {
text-decoration-color: var(--accent);
}
html[data-theme="gruvbox"] .hide-scrollbar {
html[data-theme="web"] .hide-scrollbar {
scrollbar-width: none;
}
html[data-theme="gruvbox"] .hide-scrollbar::-webkit-scrollbar {
html[data-theme="web"] .hide-scrollbar::-webkit-scrollbar {
display: none;
}