fix: remove @tailwindcss/typography + fix CSS architecture
- Remove @tailwindcss/typography from package.json devDependencies - Remove @plugin and @utility prose from globals.css - Fix @custom-variant dark to use &:is(.dark) - Extract @keyframes outside @supports blocks - Scope * transition to body/body*/[class*=bg-]/[class*=border-]/[class*=text-] - Add prefers-reduced-motion rules for scroll-to-top + reading progress - Add :focus-visible outline on scroll-to-top
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Dark mode: class-based (for @wrksz/themes) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
@custom-variant dark (&:is(.dark));
|
||||
|
||||
/* === Design Tokens === */
|
||||
@theme {
|
||||
@@ -248,19 +248,6 @@ html.dark code[data-theme*=" "] span {
|
||||
color: var(--shiki-dark);
|
||||
}
|
||||
|
||||
/* === Blog typography === */
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@utility prose {
|
||||
--tw-prose-body: var(--color-ink-soft);
|
||||
--tw-prose-headings: var(--color-ink);
|
||||
--tw-prose-links: var(--color-accent);
|
||||
--tw-prose-bold: var(--color-ink);
|
||||
--tw-prose-quote-borders: var(--color-border);
|
||||
--tw-prose-code: var(--color-accent);
|
||||
--tw-prose-pre-bg: var(--color-surface);
|
||||
}
|
||||
|
||||
/* === KaTeX dark mode overrides === */
|
||||
.dark .katex,
|
||||
.dark .katex * {
|
||||
@@ -352,16 +339,13 @@ html.dark code[data-theme*=" "] span {
|
||||
will-change: width;
|
||||
}
|
||||
|
||||
@keyframes scroll-progress { from { width: 0%; } to { width: 100%; } }
|
||||
@supports (animation-timeline: scroll()) {
|
||||
.scroll-progress {
|
||||
width: 0%;
|
||||
animation: scroll-progress linear forwards;
|
||||
animation-timeline: scroll(root block);
|
||||
}
|
||||
@keyframes scroll-progress {
|
||||
from { width: 0%; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
/* === Scroll-to-top button === */
|
||||
@@ -410,19 +394,16 @@ html.dark code[data-theme*=" "] span {
|
||||
background: var(--color-ink);
|
||||
border-radius: 2px;
|
||||
}
|
||||
@keyframes reading-progress { from { height: 0%; } to { height: 100%; } }
|
||||
@supports (animation-timeline: scroll()) {
|
||||
.reading-progress-fill {
|
||||
animation: reading-progress linear forwards;
|
||||
animation-timeline: scroll(root block);
|
||||
}
|
||||
@keyframes reading-progress {
|
||||
from { height: 0%; }
|
||||
to { height: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
/* === Global transition for theme switch === */
|
||||
* {
|
||||
body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -435,4 +416,12 @@ html.dark code[data-theme*=" "] span {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.scroll-progress { display: none; }
|
||||
.scroll-to-top { opacity: 0 !important; pointer-events: none !important; }
|
||||
.reading-progress { display: none !important; }
|
||||
}
|
||||
|
||||
/* === Focus visible for scroll-to-top === */
|
||||
.scroll-to-top:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user