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";
|
@import "tailwindcss";
|
||||||
|
|
||||||
/* Dark mode: class-based (for @wrksz/themes) */
|
/* Dark mode: class-based (for @wrksz/themes) */
|
||||||
@custom-variant dark (&:where(.dark, .dark *));
|
@custom-variant dark (&:is(.dark));
|
||||||
|
|
||||||
/* === Design Tokens === */
|
/* === Design Tokens === */
|
||||||
@theme {
|
@theme {
|
||||||
@@ -248,19 +248,6 @@ html.dark code[data-theme*=" "] span {
|
|||||||
color: var(--shiki-dark);
|
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 === */
|
/* === KaTeX dark mode overrides === */
|
||||||
.dark .katex,
|
.dark .katex,
|
||||||
.dark .katex * {
|
.dark .katex * {
|
||||||
@@ -352,16 +339,13 @@ html.dark code[data-theme*=" "] span {
|
|||||||
will-change: width;
|
will-change: width;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes scroll-progress { from { width: 0%; } to { width: 100%; } }
|
||||||
@supports (animation-timeline: scroll()) {
|
@supports (animation-timeline: scroll()) {
|
||||||
.scroll-progress {
|
.scroll-progress {
|
||||||
width: 0%;
|
width: 0%;
|
||||||
animation: scroll-progress linear forwards;
|
animation: scroll-progress linear forwards;
|
||||||
animation-timeline: scroll(root block);
|
animation-timeline: scroll(root block);
|
||||||
}
|
}
|
||||||
@keyframes scroll-progress {
|
|
||||||
from { width: 0%; }
|
|
||||||
to { width: 100%; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === Scroll-to-top button === */
|
/* === Scroll-to-top button === */
|
||||||
@@ -410,19 +394,16 @@ html.dark code[data-theme*=" "] span {
|
|||||||
background: var(--color-ink);
|
background: var(--color-ink);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
@keyframes reading-progress { from { height: 0%; } to { height: 100%; } }
|
||||||
@supports (animation-timeline: scroll()) {
|
@supports (animation-timeline: scroll()) {
|
||||||
.reading-progress-fill {
|
.reading-progress-fill {
|
||||||
animation: reading-progress linear forwards;
|
animation: reading-progress linear forwards;
|
||||||
animation-timeline: scroll(root block);
|
animation-timeline: scroll(root block);
|
||||||
}
|
}
|
||||||
@keyframes reading-progress {
|
|
||||||
from { height: 0%; }
|
|
||||||
to { height: 100%; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* === Global transition for theme switch === */
|
/* === 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;
|
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-behavior: auto !important;
|
||||||
}
|
}
|
||||||
.scroll-progress { display: none; }
|
.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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -30,7 +30,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@tailwindcss/typography": "^0.5.19",
|
|
||||||
"@types/mdx": "^2.0.13",
|
"@types/mdx": "^2.0.13",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
|
|||||||
Reference in New Issue
Block a user