claude again
This commit is contained in:
parent
df2267a968
commit
f3fc893675
81 changed files with 945 additions and 2813 deletions
|
|
@ -25,27 +25,30 @@
|
|||
========================================================================= */
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-sans:
|
||||
'Source Sans 3', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
||||
|
||||
/* Light palette */
|
||||
--color-bg: #fbfaf7;
|
||||
--color-fg: #181817;
|
||||
--color-muted: #5f5c54;
|
||||
--color-link: #285f74;
|
||||
--color-link-hover: #8a4b2f;
|
||||
--color-link-visited: #3c5a7a;
|
||||
--color-accent: oklch(55% 0.13 15);
|
||||
--color-rule: #d9d5ca;
|
||||
--color-rule-medium: #a8a294;
|
||||
--color-rule-strong: #4a4340;
|
||||
--color-code-bg: #efede6;
|
||||
--color-callout-bg: #f4f1e8;
|
||||
--color-selection-bg: #ecddd0;
|
||||
/* Palette — light-dark() pairs each token (light, dark) */
|
||||
--color-bg: light-dark(#fbfaf7, #151514);
|
||||
--color-fg: light-dark(#181817, #f1eee7);
|
||||
--color-muted: light-dark(#4d4b44, #b7afa3);
|
||||
--color-link: light-dark(#285f74, #8ab8c8);
|
||||
--color-link-hover: light-dark(
|
||||
color-mix(in oklch, #285f74 70%, black 30%),
|
||||
color-mix(in oklch, #8ab8c8 70%, black 30%)
|
||||
);
|
||||
--color-link-visited: var(--color-link);
|
||||
--color-accent: light-dark(oklch(55% 0.13 15), oklch(72% 0.13 15));
|
||||
--color-rule: light-dark(#d9d5ca, #39352f);
|
||||
--color-rule-medium: light-dark(#7a7466, #6c655c);
|
||||
--color-rule-strong: light-dark(#4a4340, #d0c5b7);
|
||||
--color-code-bg: light-dark(#efede6, #24221f);
|
||||
--color-callout-bg: light-dark(#f4f1e8, #211f1c);
|
||||
--color-selection-bg: light-dark(#ecddd0, #4a3a2e);
|
||||
|
||||
--theme-switcher-track: var(--color-rule-medium);
|
||||
--theme-switcher-icon-light: #f0e2b6;
|
||||
|
|
@ -56,16 +59,16 @@
|
|||
--fs-sm: 0.8125rem;
|
||||
--fs-caption: 0.875rem;
|
||||
--fs-base: 1rem;
|
||||
--fs-body: 1.125rem;
|
||||
--fs-body: 1.1875rem;
|
||||
--fs-lg: 1.25rem;
|
||||
--fs-xl: 1.6rem;
|
||||
--fs-xl: 1.75rem;
|
||||
--fs-2xl: 2.1rem;
|
||||
--fs-3xl: clamp(2rem, 1.4rem + 2.2vw, 3.85rem);
|
||||
--fs-3xl: clamp(2rem, 1.5rem + 1.8vw, 3rem);
|
||||
--fs-dek: clamp(1.08rem, 0.95rem + 0.6vw, 1.25rem);
|
||||
|
||||
--leading-tight: 1.18;
|
||||
--leading-snug: 1.35;
|
||||
--leading-prose: 1.65;
|
||||
--leading-prose: 1.6;
|
||||
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
|
|
@ -97,53 +100,12 @@
|
|||
--gutter: clamp(20px, 4vw, 32px);
|
||||
}
|
||||
|
||||
/* Dark palette — applied when explicit data-theme='dark' OR
|
||||
when system prefers dark and no explicit light override is set. */
|
||||
:root[data-theme='dark'],
|
||||
:root:where(:not([data-theme='light'])) {
|
||||
/* Default branch only takes effect under the media query below. */
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
--color-bg: #151514;
|
||||
--color-fg: #f1eee7;
|
||||
--color-muted: #b7afa3;
|
||||
--color-link: #8ab8c8;
|
||||
--color-link-hover: #d6a17f;
|
||||
--color-link-visited: #a3b7d2;
|
||||
--color-accent: oklch(72% 0.13 15);
|
||||
--color-rule: #39352f;
|
||||
--color-rule-medium: #6c655c;
|
||||
--color-rule-strong: #d0c5b7;
|
||||
--color-code-bg: #24221f;
|
||||
--color-callout-bg: #211f1c;
|
||||
--color-selection-bg: #4a3a2e;
|
||||
--theme-switcher-track: var(--color-rule-medium);
|
||||
}
|
||||
|
||||
:root[data-theme='light'] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
color-scheme: dark;
|
||||
--color-bg: #151514;
|
||||
--color-fg: #f1eee7;
|
||||
--color-muted: #b7afa3;
|
||||
--color-link: #8ab8c8;
|
||||
--color-link-hover: #d6a17f;
|
||||
--color-link-visited: #a3b7d2;
|
||||
--color-accent: oklch(72% 0.13 15);
|
||||
--color-rule: #39352f;
|
||||
--color-rule-medium: #6c655c;
|
||||
--color-rule-strong: #d0c5b7;
|
||||
--color-code-bg: #24221f;
|
||||
--color-callout-bg: #211f1c;
|
||||
--color-selection-bg: #4a3a2e;
|
||||
--theme-switcher-track: var(--color-rule-medium);
|
||||
}
|
||||
:root[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
|
|
@ -211,7 +173,6 @@
|
|||
color: var(--color-fg);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-body);
|
||||
line-height: var(--leading-prose);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -227,10 +188,6 @@
|
|||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
|
@ -289,26 +246,27 @@
|
|||
========================================================================= */
|
||||
|
||||
@layer layout {
|
||||
.site-header,
|
||||
.site-footer,
|
||||
.home-intro,
|
||||
.home-section,
|
||||
.page-shell,
|
||||
.post,
|
||||
.post-footer-shell {
|
||||
:where(
|
||||
.site-header,
|
||||
.site-footer,
|
||||
.home-intro,
|
||||
.home-section,
|
||||
.page-shell,
|
||||
.post,
|
||||
.post-footer-shell
|
||||
) {
|
||||
width: min(100% - 2 * var(--gutter), var(--page));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.post,
|
||||
.post-footer-shell {
|
||||
:where(.post, .post-footer-shell) {
|
||||
width: min(100% - 2 * var(--gutter), var(--measure-wide));
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
left: var(--gutter);
|
||||
top: var(--space-3);
|
||||
left: calc(var(--gutter) + env(safe-area-inset-left));
|
||||
top: calc(var(--space-3) + env(safe-area-inset-top));
|
||||
z-index: 10;
|
||||
transform: translateY(-150%);
|
||||
background: var(--color-fg);
|
||||
|
|
@ -435,13 +393,6 @@
|
|||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.home-name-accent {
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.93em;
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.home-intro p:not(.eyebrow),
|
||||
.page-header p,
|
||||
.dek {
|
||||
|
|
@ -500,15 +451,10 @@
|
|||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-4);
|
||||
border-top: 1px solid var(--color-rule);
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.archive-year h2,
|
||||
.project-section h2,
|
||||
.facts h2,
|
||||
.at-a-glance h2 {
|
||||
:where(.section-heading, .archive-year, .project-section, .facts, .at-a-glance) h2 {
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--weight-semibold);
|
||||
line-height: var(--leading-snug);
|
||||
|
|
@ -638,7 +584,7 @@
|
|||
|
||||
.article-list > li {
|
||||
display: grid;
|
||||
grid-template-columns: 6rem minmax(0, 1fr) 8rem;
|
||||
grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) minmax(6rem, 8rem);
|
||||
grid-template-areas: 'date content thumb';
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
|
|
@ -654,6 +600,7 @@
|
|||
grid-area: date;
|
||||
color: var(--color-muted);
|
||||
font-size: var(--fs-caption);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.article-list > li > div {
|
||||
|
|
@ -732,6 +679,7 @@
|
|||
grid-template-areas: 'thumb summary';
|
||||
min-height: var(--project-thumb-size);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg);
|
||||
|
|
@ -909,12 +857,17 @@
|
|||
|
||||
.prose {
|
||||
max-inline-size: var(--measure);
|
||||
line-height: var(--leading-prose);
|
||||
}
|
||||
|
||||
.prose > * + * {
|
||||
margin-top: 1.05em;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.prose h2,
|
||||
.prose h3 {
|
||||
position: relative;
|
||||
|
|
@ -1039,7 +992,7 @@
|
|||
.prose pre {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-gutter: stable;
|
||||
padding: var(--space-4);
|
||||
background: var(--color-code-bg);
|
||||
border: 1px solid var(--color-rule);
|
||||
|
|
@ -1068,28 +1021,16 @@
|
|||
}
|
||||
|
||||
/* Shiki dual-theme: defaultColor: false emits --shiki-light / --shiki-dark
|
||||
vars on every token; one selector list picks the active variant. */
|
||||
vars on every token; light-dark() picks the active variant from
|
||||
color-scheme on :root. */
|
||||
.prose pre.astro-code,
|
||||
.prose pre.astro-code code,
|
||||
.prose pre.astro-code span {
|
||||
color: var(--shiki-light);
|
||||
background-color: var(--shiki-light-bg, var(--color-code-bg));
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .prose pre.astro-code,
|
||||
:root[data-theme='dark'] .prose pre.astro-code code,
|
||||
:root[data-theme='dark'] .prose pre.astro-code span {
|
||||
color: var(--shiki-dark);
|
||||
background-color: var(--shiki-dark-bg, var(--color-code-bg));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) .prose pre.astro-code,
|
||||
:root:not([data-theme='light']) .prose pre.astro-code code,
|
||||
:root:not([data-theme='light']) .prose pre.astro-code span {
|
||||
color: var(--shiki-dark);
|
||||
background-color: var(--shiki-dark-bg, var(--color-code-bg));
|
||||
}
|
||||
color: light-dark(var(--shiki-light), var(--shiki-dark));
|
||||
background-color: light-dark(
|
||||
var(--shiki-light-bg, var(--color-code-bg)),
|
||||
var(--shiki-dark-bg, var(--color-code-bg))
|
||||
);
|
||||
}
|
||||
|
||||
/* -- At-a-glance + facts --------------------------------------------- */
|
||||
|
|
@ -1388,7 +1329,6 @@
|
|||
padding-block: var(--space-8) var(--space-6);
|
||||
}
|
||||
|
||||
.article-list > li,
|
||||
.at-a-glance dl,
|
||||
.facts dl {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -1416,6 +1356,10 @@
|
|||
--project-thumb-size: 7rem;
|
||||
}
|
||||
|
||||
.project-card .project-meta {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.project-card__summary {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
|
@ -1458,18 +1402,10 @@
|
|||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) {
|
||||
animation: none !important;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1481,7 +1417,6 @@
|
|||
--color-muted: #333;
|
||||
--color-link: #000;
|
||||
--color-link-hover: #000;
|
||||
--color-link-visited: #000;
|
||||
--color-accent: #000;
|
||||
--color-rule: #999;
|
||||
--color-rule-medium: #777;
|
||||
|
|
@ -1503,7 +1438,7 @@
|
|||
.post-nav,
|
||||
.related-posts,
|
||||
.heading-anchor {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -1512,14 +1447,14 @@
|
|||
|
||||
a,
|
||||
a:visited {
|
||||
color: #000;
|
||||
color: var(--color-fg);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose a[href]::after {
|
||||
content: ' (' attr(href) ')';
|
||||
font-size: 0.85em;
|
||||
color: #555;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.prose a[href^='#']::after,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue