git-market/vinta-awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-04-11 14:21:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(css): extract inline OKLCH values into CSS custom properties

Browse Source 
Add 23 design tokens to :root for colors previously hardcoded inline:
hero text (kicker, proof), hero background gradient, hero button gradient,
accent underline (shared across 3 rules), page background gradient,
table row states (hover, focus, open), sticky header bg, search shadows
and focus ring, tag states, and CTA background.

Decorative one-off values (hero noise, sheen, grid overlay) left inline
since they are tightly coupled to their visual effects.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vinta Chen 2026-03-24 12:30:22 +08:00
parent 8861bcc05d
commit 60836d00a1
No known key found for this signature in database
GPG Key ID: B93DE4F003C33630
1 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
website/static/style.css
View File

@ -13,6 +13,8 @@
--shell-pad: clamp(1.25rem, 3vw, 2.5rem);
--bg-page: oklch(96.8% 0.018 80);
--bg-page-top: oklch(95.2% 0.018 78);
--bg-page-end: oklch(98.4% 0.01 80);
--bg-paper: oklch(98.6% 0.01 80);
--bg-paper-strong: oklch(95.7% 0.016 76);
--ink: oklch(22% 0.02 55);
@ -23,11 +25,37 @@
--accent: oklch(58% 0.16 45);
--accent-deep: oklch(44% 0.15 42);
--accent-soft: oklch(92% 0.045 55);
--accent-underline: oklch(58% 0.16 45 / 0.4);
--highlight: oklch(87% 0.08 78);
--hero-ink: oklch(15% 0.02 40);
--hero-text: oklch(97% 0.012 85);
--hero-muted: oklch(88% 0.02 82);
--hero-line: oklch(100% 0 0 / 0.16);
--hero-kicker: oklch(82% 0.04 72);
--hero-proof: oklch(68% 0.02 72);
--hero-bg-start: oklch(14% 0.03 32);
--hero-bg-mid: oklch(19% 0.035 35);
--hero-bg-end: oklch(28% 0.05 42);
--hero-btn-start: oklch(83% 0.08 72);
--hero-btn-end: oklch(73% 0.14 58);
--row-hover: oklch(96.2% 0.02 76);
--row-focus: oklch(95.7% 0.026 68);
--row-open-start: oklch(96.2% 0.03 76);
--row-open-end: oklch(95.4% 0.026 74);
--thead-bg: oklch(98.2% 0.012 80 / 0.97);
--search-inset: oklch(100% 0 0 / 0.75);
--search-shadow: oklch(18% 0.03 45 / 0.24);
--search-focus-ring: oklch(61% 0.14 48 / 0.45);
--search-focus-shadow: oklch(34% 0.08 42 / 0.28);
--tag-hover-border: oklch(71% 0.09 62 / 0.45);
--tag-active-start: oklch(82% 0.08 75);
--tag-active-end: oklch(74% 0.11 58);
--cta-bg: oklch(94% 0.025 72);
--text-xs: 0.8rem;
--text-sm: 0.95rem;
@ -56,7 +84,7 @@ body {
color: var(--ink);
background:
radial-gradient(circle at top left, oklch(100% 0 0 / 0.72), transparent 28rem),
linear-gradient(180deg, oklch(95.2% 0.018 78), var(--bg-page) 24rem, oklch(98.4% 0.01 80));
linear-gradient(180deg, var(--bg-page-top), var(--bg-page) 24rem, var(--bg-page-end));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@ -127,7 +155,7 @@ kbd {
background:
radial-gradient(circle at 18% 18%, oklch(55% 0.14 45 / 0.34), transparent 22rem),
radial-gradient(circle at 78% 32%, oklch(62% 0.17 70 / 0.17), transparent 24rem),
linear-gradient(140deg, oklch(14% 0.03 32) 0%, oklch(19% 0.035 35) 52%, oklch(28% 0.05 42) 100%);
linear-gradient(140deg, var(--hero-bg-start) 0%, var(--hero-bg-mid) 52%, var(--hero-bg-end) 100%);
color: var(--hero-text);
}
@ -263,7 +291,7 @@ kbd {
}
.hero-kicker {
color: oklch(82% 0.04 72);
color: var(--hero-kicker);
}
.section-label {
@ -306,7 +334,7 @@ kbd {
.hero-proof {
margin-top: 1.5rem;
color: oklch(68% 0.02 72);
color: var(--hero-proof);
font-size: var(--text-sm);
letter-spacing: 0.02em;
}
@ -332,7 +360,7 @@ kbd {
.hero-action-primary {
color: var(--hero-ink);
background: linear-gradient(135deg, oklch(83% 0.08 72), oklch(73% 0.14 58));
background: linear-gradient(135deg, var(--hero-btn-start), var(--hero-btn-end));
box-shadow: 0 1.2rem 2.5rem -1.5rem oklch(0% 0 0 / 0.65);
}
@ -417,12 +445,12 @@ kbd {
padding: 1rem 1.15rem 1rem 3.2rem;
border: 1px solid transparent;
border-radius: 999px;
background: linear-gradient(180deg, oklch(100% 0 0 / 0.82), oklch(98.6% 0.01 80));
background: linear-gradient(180deg, oklch(100% 0 0 / 0.82), var(--bg-paper));
color: var(--ink);
font-size: clamp(1rem, 1.4vw, 1.06rem);
box-shadow:
inset 0 1px 0 oklch(100% 0 0 / 0.75),
0 1.4rem 2.6rem -2.1rem oklch(18% 0.03 45 / 0.24);
inset 0 1px 0 var(--search-inset),
0 1.4rem 2.6rem -2.1rem var(--search-shadow);
transition:
border-color 180ms ease,
box-shadow 180ms ease,
@ -434,10 +462,10 @@ kbd {
}
.search:focus {
border-color: oklch(61% 0.14 48 / 0.45);
border-color: var(--search-focus-ring);
box-shadow:
inset 0 1px 0 oklch(100% 0 0 / 0.75),
0 1.6rem 3rem -2rem oklch(34% 0.08 42 / 0.28);
inset 0 1px 0 var(--search-inset),
0 1.6rem 3rem -2rem var(--search-focus-shadow);
}
.filter-bar {
@ -532,7 +560,7 @@ kbd {
letter-spacing: 0.03em;
white-space: nowrap;
border-bottom: 1px solid var(--line);
background: oklch(98.2% 0.012 80 / 0.97);
background: var(--thead-bg);
}
.table tbody td {
@ -554,16 +582,16 @@ kbd {
}
.row:not(.open):hover td {
background: oklch(96.2% 0.02 76);
background: var(--row-hover);
}
.row:focus-visible td {
background: oklch(95.7% 0.026 68);
background: var(--row-focus);
box-shadow: inset 3px 0 0 var(--accent);
}
.row.open td {
background: linear-gradient(180deg, oklch(96.2% 0.03 76), oklch(95.4% 0.026 74));
background: linear-gradient(180deg, var(--row-open-start), var(--row-open-end));
border-bottom-color: transparent;
}
@ -592,7 +620,7 @@ kbd {
.col-name > a:hover {
color: var(--accent-deep);
text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4);
text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em;
}
@ -695,7 +723,7 @@ th[data-sort].sort-asc::after {
.expand-row td {
padding-top: 0.1rem;
padding-bottom: 1.15rem;
background: linear-gradient(180deg, oklch(96.2% 0.03 76), oklch(95.4% 0.026 74));
background: linear-gradient(180deg, var(--row-open-start), var(--row-open-end));
border-bottom: 1px solid var(--line);
}
@ -722,7 +750,7 @@ th[data-sort].sort-asc::after {
.expand-meta a:hover {
color: var(--accent);
text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4);
text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em;
}
@ -777,12 +805,12 @@ th[data-sort].sort-asc::after {
.tag:hover {
background: var(--highlight);
border-color: oklch(71% 0.09 62 / 0.45);
border-color: var(--tag-hover-border);
color: var(--ink);
}
.tag.active {
background: linear-gradient(135deg, oklch(82% 0.08 75), oklch(74% 0.11 58));
background: linear-gradient(135deg, var(--tag-active-start), var(--tag-active-end));
color: var(--hero-ink);
}
@ -829,7 +857,7 @@ th[data-sort].sort-asc::after {
font: inherit;
cursor: pointer;
text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4);
text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em;
}
@ -839,7 +867,7 @@ th[data-sort].sort-asc::after {
.final-cta {
padding-block: clamp(3rem, 7vw, 5.5rem);
background: oklch(94% 0.025 72);
background: var(--cta-bg);
}
.final-cta > .section-shell {