marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css: remap blog tokens to blacksite, style footnotes+callouts

Browse Source
This commit is contained in:
kbot
2026-07-06 22:03:04 -05:00
parent 99619c4e9f
commit 2c4e7a6649
1 changed files with 59 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/globals.css
View File

@@ -86,6 +86,7 @@
--color-signal-cyan: #00f0ff;
--color-signal-orange: #ff5a1f;
--color-signal-green: #b6ff00;
--color-signal-red: #ff3b30;
--color-signal-violet: #805dff;
}
@@ -102,7 +103,7 @@
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-family: var(--font-display);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
@@ -130,25 +131,25 @@
/* === Dark mode token overrides === */
.dark {
--color-canvas: oklch(0 0 0);
--color-surface: oklch(0.07 0 0);
--color-ink: oklch(1 0 0);
--color-ink-soft: oklch(0.72 0 0);
--color-border: oklch(0.17 0 0);
--color-accent: oklch(0.68 0.20 250);
--color-canvas: #030506;
--color-surface: #101517;
--color-ink: #f4f7f8;
--color-ink-soft: #8b949a;
--color-border: #2c353a;
--color-accent: #00f0ff;
/* Code blocks — Dark mode */
--color-code-block: oklch(0.04 0 0);
--color-code-block-hover: oklch(0.06 0 0);
--color-code-gutter: oklch(0.30 0 0);
--color-code-gutter-border: oklch(0.14 0 0);
--color-code-title-bg: oklch(0.03 0 0);
--color-code-title-text: oklch(0.55 0 0);
--color-code-block: #07090a;
--color-code-block-hover: #101517;
--color-code-gutter: #8b949a;
--color-code-gutter-border: #2c353a;
--color-code-title-bg: #07090a;
--color-code-title-text: #8b949a;
--color-code-line-highlight: oklch(0.12 0.02 250 / 0.3);
--color-code-line-highlight-border: oklch(0.68 0.20 250);
--color-code-line-highlight-border: #00f0ff;
--color-code-mark-bg: oklch(0.10 0.03 250 / 0.4);
--color-code-copy: oklch(0.60 0 0);
--color-code-copy-hover: oklch(0.85 0 0);
--color-code-copy: #8b949a;
--color-code-copy-hover: #f4f7f8;
--shadow-card: 0 1px 4px oklch(1 0 0 / 0.06);
--shadow-card-hover: 0 22px 50px -34px oklch(1 0 0 / 0.22), 0 1px 4px oklch(1 0 0 / 0.08);
@@ -198,7 +199,7 @@
display: grid;
gap: 0.75rem;
border: 1px dashed color-mix(in oklch, var(--color-border) 78%, var(--color-ink) 22%);
border-radius: 1.25rem;
border-radius: 0.5rem;
background: color-mix(in oklch, var(--color-surface) 55%, transparent);
padding: 2rem;
}
@@ -228,7 +229,7 @@
}
.article-prose :where(p, ul, ol, blockquote, details, .callout, [data-callout]) {
max-width: 72ch;
max-width: 68ch;
}
.prose :where(a) {
@@ -236,6 +237,30 @@
text-decoration-thickness: 1px;
}
.prose [data-footnote-ref] {
color: var(--color-signal-cyan);
font-family: var(--font-mono);
font-size: 0.8em;
}
.prose .footnotes {
margin-top: 3rem;
border-top: 1px solid var(--color-border);
padding-top: 1rem;
color: var(--color-ink-soft);
font-size: 0.875rem;
line-height: 1.5;
}
.prose .footnotes ol {
margin: 0.75rem 0 0;
padding-left: 1.25rem;
}
.prose .footnotes li {
margin: 0.25rem 0;
}
.prose :where(ul, ol) {
margin: 1.5rem 0;
padding-left: 1.5rem;
@@ -569,7 +594,7 @@ html.dark code[data-theme*=" "] span {
left: 0;
height: 2px;
width: 0%;
background: var(--color-ink);
background: var(--color-signal-cyan);
z-index: 9999;
will-change: width;
}
@@ -610,7 +635,8 @@ html.dark code[data-theme*=" "] span {
pointer-events: auto;
}
.scroll-to-top:hover {
border-color: var(--color-ink);
border-color: var(--color-accent);
color: var(--color-accent);
}
/* === Reading progress vertical bar === */
@@ -626,7 +652,7 @@ html.dark code[data-theme*=" "] span {
.reading-progress-fill {
width: 100%;
height: 0%;
background: var(--color-ink);
background: var(--color-signal-cyan);
border-radius: 2px;
}
@keyframes reading-progress { from { height: 0%; } to { height: 100%; } }
@@ -677,29 +703,33 @@ body, body *, [class*="bg-"], [class*="border-"], [class*="text-"] {
/* Type variants */
.callout-note {
@apply border-accent/30 bg-accent/[0.06];
border-color: color-mix(in oklch, var(--color-signal-cyan) 30%, var(--color-border));
background: color-mix(in oklch, var(--color-signal-cyan) 8%, var(--color-surface));
}
.callout-note .callout-title {
@apply text-accent;
color: var(--color-signal-cyan);
}
.callout-tip {
@apply border-emerald-500/30 bg-emerald-500/[0.06];
border-color: color-mix(in oklch, var(--color-signal-green) 30%, var(--color-border));
background: color-mix(in oklch, var(--color-signal-green) 8%, var(--color-surface));
}
.callout-tip .callout-title {
@apply text-emerald-600 dark:text-emerald-400;
color: var(--color-signal-green);
}
.callout-warning {
@apply border-amber-500/30 bg-amber-500/[0.06];
border-color: color-mix(in oklch, var(--color-signal-orange) 30%, var(--color-border));
background: color-mix(in oklch, var(--color-signal-orange) 8%, var(--color-surface));
}
.callout-warning .callout-title {
@apply text-amber-600 dark:text-amber-400;
color: var(--color-signal-orange);
}
.callout-danger {
@apply border-red-500/30 bg-red-500/[0.06];
border-color: color-mix(in oklch, var(--color-signal-red) 30%, var(--color-border));
background: color-mix(in oklch, var(--color-signal-red) 8%, var(--color-surface));
}
.callout-danger .callout-title {
@apply text-red-600 dark:text-red-400;
color: var(--color-signal-red);
}