feat(design): bento featured grid, theme-aware cards, mono tag chips
Deploy / build (push) Successful in 44s
Deploy / build (push) Successful in 44s
- Homepage (EN + ZH) featured section becomes a 2x2 Cyber-Bento grid: OG thumbnail at 65%/140px behind a scrim, category badge + metric pill, 3-line-clamped description, arrow CTA; 1 column under 680px. - Bento scrim/pill/dot now use theme tokens (--card-veil, --pill-bg, --bento-visual-opacity). The original hardcoded dark blend measured 1.96:1 pill contrast on the light theme; now 6.56 dark / 6.10 light. - Add the missing @keyframes bento-pulse (the doc claimed a pulsing dot, none existed), disabled under prefers-reduced-motion. - Tag chips: mono face, hairline border, 4px radius; dashed border for non-link tags. - ZH pages: brand links /zh/, in-post category tag links /zh/categories/<cat>/ instead of the EN route. - project-state: B6 shipped note with measured readings; correct the prompts-catalog path claim (file is outside the repo). Measured in headless Chrome at 1280px and 390px, EN + ZH: 4 cards, 2 cols / 1 col, scrollWidth-clientWidth 0, no card overflow, all four -800.webp thumbs loaded at 800x420.
This commit is contained in:
hoelee committed
1 parent
3f63150d51
commit
6e9d58b8cc
6 files changed
+279
-40
No files matched your search
+171
-24
@@ -32,6 +32,13 @@
|
||||
--measure: 70rem; /* global container width (nav, footer, all pages) */
|
||||
--radius: 8px;
|
||||
|
||||
/* Bento cards — RGB triplet of the surface colour, so the thumbnail scrim
|
||||
fades into the card in BOTH themes (a hardcoded dark blend turned muddy
|
||||
grey on the light theme: measured pill contrast 1.96:1). */
|
||||
--card-veil: 246, 248, 251;
|
||||
--pill-bg: rgba(15, 20, 28, 0.05);
|
||||
--bento-visual-opacity: 0.3;
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
@@ -50,6 +57,10 @@ html[data-theme='dark'] {
|
||||
--good: #4ade80;
|
||||
--warn: #fbbf24;
|
||||
--bad: #f87171;
|
||||
|
||||
--card-veil: 31, 41, 55;
|
||||
--pill-bg: rgba(15, 20, 28, 0.5);
|
||||
--bento-visual-opacity: 0.35;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -219,16 +230,28 @@ time { color: var(--faint); font-size: 0.88rem; }
|
||||
/* ---------- Tags & categories ---------- */
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
padding: 0.1em 0.6em;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
padding: 0.12em 0.55em;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.76rem;
|
||||
margin: 0 0.35rem 0.35rem 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
a.tag:hover { color: var(--brand); }
|
||||
a.tag {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--brand);
|
||||
}
|
||||
a.tag:hover {
|
||||
border-color: var(--brand);
|
||||
background: rgba(109, 141, 255, 0.12);
|
||||
color: var(--brand-soft);
|
||||
}
|
||||
span.tag {
|
||||
color: var(--faint);
|
||||
background: transparent;
|
||||
border: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
/* ---------- Code ---------- */
|
||||
code {
|
||||
@@ -447,34 +470,158 @@ pre code {
|
||||
.btn-primary { border-color: var(--brand); color: var(--brand); }
|
||||
.hero-note { font-size: 0.82rem; color: var(--faint); margin: 0; }
|
||||
|
||||
/* ---------- Featured ---------- */
|
||||
.featured-grid {
|
||||
/* ---------- Featured 2x2 Cyber-Bento Grid ---------- */
|
||||
.featured-bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.15rem;
|
||||
margin: 1rem 0 2.5rem;
|
||||
}
|
||||
.featured-card {
|
||||
display: block;
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.featured-bento-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.bento-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: 12px;
|
||||
padding: 1.3rem;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
isolation: isolate;
|
||||
}
|
||||
.featured-card:hover { border-color: var(--brand); }
|
||||
.featured-card h3 { margin: 0.5rem 0 0.4rem; font-size: 1.02rem; line-height: 1.35; }
|
||||
.featured-card p { margin: 0; font-size: 0.88rem; color: var(--muted); }
|
||||
|
||||
.bento-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--brand);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4), 0 0 20px -5px rgba(109, 141, 255, 0.25);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.bento-visual {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 65%;
|
||||
height: 140px;
|
||||
z-index: -1;
|
||||
opacity: var(--bento-visual-opacity);
|
||||
transition: opacity 0.25s ease, transform 0.35s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bento-card:hover .bento-visual {
|
||||
opacity: 0.55;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.bento-visual img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: right center;
|
||||
}
|
||||
|
||||
.bento-visual-scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, var(--surface) 0%, rgba(var(--card-veil), 0.6) 45%, transparent 100%),
|
||||
linear-gradient(0deg, var(--surface) 0%, rgba(var(--card-veil), 0.4) 55%, transparent 100%);
|
||||
}
|
||||
|
||||
.bento-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.bento-top-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.06em;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--brand);
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(109, 141, 255, 0.12);
|
||||
border: 1px solid rgba(109, 141, 255, 0.3);
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
padding: 0.1em 0.6em;
|
||||
}
|
||||
|
||||
.bento-metric-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
background: var(--pill-bg);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.pulse-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--good);
|
||||
box-shadow: 0 0 6px var(--good);
|
||||
animation: bento-pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes bento-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.55; transform: scale(0.82); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pulse-dot { animation: none; }
|
||||
}
|
||||
|
||||
.bento-card h3 {
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.38;
|
||||
color: var(--ink);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.bento-card p {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
color: var(--muted);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bento-cta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--brand);
|
||||
margin-top: 0.35rem;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.bento-card:hover .bento-cta {
|
||||
color: var(--brand-soft);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
/* ---------- Collapsible long code blocks ---------- */
|
||||
@@ -720,7 +867,7 @@ a.category-card:hover { border-color: var(--brand); }
|
||||
h1 { font-size: 1.7rem; }
|
||||
h2 { font-size: 1.25rem; }
|
||||
.related-grid { grid-template-columns: 1fr; }
|
||||
.featured-grid { grid-template-columns: 1fr; }
|
||||
.featured-bento-grid { grid-template-columns: 1fr; }
|
||||
.proof-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.stack-grid, .contact-split { grid-template-columns: 1fr; }
|
||||
.about-hero { flex-direction: column; gap: 1rem; }
|
||||
|
||||
Reference in new issue
Block a user