Fix text-paper (and all utility colours) being overridden on <a> tags
Global resets (a, button, body, img) were outside any @layer, so they beat Tailwind's @layer utilities in the cascade. Wrapping them in @layer base restores the expected order: base < utilities. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+18
-16
@@ -39,25 +39,27 @@
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
@layer base {
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
img { display: block; max-width: 100%; }
|
||||
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
::selection { background: var(--ink); color: var(--paper); }
|
||||
}
|
||||
|
||||
img { display: block; max-width: 100%; }
|
||||
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
::selection { background: var(--ink); color: var(--paper); }
|
||||
|
||||
/* ── paper grain overlay ── */
|
||||
body::before {
|
||||
content: "";
|
||||
|
||||
Reference in New Issue
Block a user