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

featured: declutter labels, open spacing

Browse Source
This commit is contained in:
kbot
2026-07-06 21:52:23 -05:00
parent 57431f91c2
commit 14b9274c47
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/portfolio/FeaturedDossier.tsx
View File

@@ -20,15 +20,15 @@ export function FeaturedDossier() {
whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }} whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }} transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
viewport={{ once: true, amount: 0.18 }} viewport={{ once: true, amount: 0.18 }}
className="mx-auto max-w-7xl px-4 py-20 text-blacksite-text sm:px-6 lg:px-8" className="mx-auto max-w-7xl px-6 py-28 text-blacksite-text sm:px-8 sm:py-36 lg:px-12"
> >
<article className="overflow-hidden border border-blacksite-line bg-blacksite-surface shadow-[0_32px_120px_rgba(0,0,0,0.42)]"> <div className="mb-12 flex items-center justify-between gap-4">
<div className="flex items-center justify-between gap-4 border-b border-blacksite-line px-5 py-4 sm:px-7"> <p className="section-label">FEATURED /.01</p>
<p className="section-label">FEATURED DOSSIER /.00</p>
<span aria-hidden="true" className="size-2 rounded-full bg-signal-cyan shadow-[0_0_22px_rgba(0,240,255,0.62)]" /> <span aria-hidden="true" className="size-2 rounded-full bg-signal-cyan shadow-[0_0_22px_rgba(0,240,255,0.62)]" />
</div> </div>
<div className="relative overflow-hidden border-b border-blacksite-line px-5 pt-8 sm:px-7 lg:px-10"> <article className="overflow-hidden border border-blacksite-line bg-blacksite-surface shadow-[0_32px_120px_rgba(0,0,0,0.42)]">
<div className="relative overflow-hidden border-b border-blacksite-line p-6 pb-0 sm:p-8 sm:pb-0">
<div aria-hidden="true" className="absolute inset-x-0 top-0 h-px bg-signal-cyan/50" /> <div aria-hidden="true" className="absolute inset-x-0 top-0 h-px bg-signal-cyan/50" />
<h2 <h2
id="featured-dossier-title" id="featured-dossier-title"
@@ -41,16 +41,15 @@ export function FeaturedDossier() {
<div className="grid gap-0 lg:grid-cols-[minmax(0,1fr)_22rem]"> <div className="grid gap-0 lg:grid-cols-[minmax(0,1fr)_22rem]">
<div className="divide-y divide-blacksite-line border-b border-blacksite-line lg:border-b-0 lg:border-r"> <div className="divide-y divide-blacksite-line border-b border-blacksite-line lg:border-b-0 lg:border-r">
{fieldRows.map((row) => ( {fieldRows.map((row) => (
<div key={row.label} className="grid gap-3 px-5 py-6 sm:px-7 md:grid-cols-[9rem_minmax(0,1fr)] lg:px-10"> <div key={row.label} className="grid gap-3 p-6 sm:p-8 md:grid-cols-[9rem_minmax(0,1fr)]">
<p className="section-label text-signal-cyan">{row.label}</p> <p className="section-label text-signal-cyan">{row.label}</p>
<p className="text-sm leading-7 text-blacksite-muted sm:text-base">{row.value}</p> <p className="text-sm leading-7 text-blacksite-muted sm:text-base">{row.value}</p>
</div> </div>
))} ))}
</div> </div>
<aside className="bg-blacksite-surface2/45 px-5 py-6 sm:px-7 lg:px-8" aria-label="Featured dossier metadata and proof links"> <aside className="bg-blacksite-surface2/45 p-6 sm:p-8" aria-label="Featured dossier metadata and proof links">
<div className="border-b border-blacksite-line pb-6"> <div className="border-b border-blacksite-line pb-6">
<p className="section-label mb-3">METADATA</p>
<p className="font-mono text-xs uppercase tracking-[0.14em] text-blacksite-text"> <p className="font-mono text-xs uppercase tracking-[0.14em] text-blacksite-text">
{featuredDossier.role} <span className="text-signal-cyan">·</span> {featuredDossier.year} {featuredDossier.role} <span className="text-signal-cyan">·</span> {featuredDossier.year}
</p> </p>
@@ -67,7 +66,7 @@ export function FeaturedDossier() {
</div> </div>
<div className="pt-6"> <div className="pt-6">
<p className="section-label mb-3">PROOF LINKS</p> <p className="section-label mb-3">LINKS</p>
<div className="grid gap-3"> <div className="grid gap-3">
{featuredDossier.links.map((link) => ( {featuredDossier.links.map((link) => (
<a <a