jwright
8d955aa802
02 Capabilities becomes a 4-col bento (Edge AI 2x2 flagship w/ magenta corner radial, Platform wide, magenta-flavoured security tile, Observability row-completer) driven by span/flavor fields in skills.ts. 03 Selected Work becomes dossier cards: house-style SVG thumbnails (per-project motif via DossierThumb), DOSSIER/00N corner tags, 'the argument' line from the outcome field, chip tags, mono meta footer. 04 Writing cards gain the security-series badge (data/series.ts) and sit three across. Section numbers glow cyan; a circuit divider (gradient hairlines + two diamonds) closes the hero. Footer opens with the GitOps receipt - git sha + build date baked at build time via lib/build-info.ts, zero runtime calls.
56 lines
1.3 KiB
Plaintext
56 lines
1.3 KiB
Plaintext
---
|
|
interface Props {
|
|
id: string;
|
|
eyebrow: string;
|
|
title: string;
|
|
/** Monospace index like "01" shown beside the eyebrow. */
|
|
index?: string;
|
|
}
|
|
const { id, eyebrow, title, index } = Astro.props;
|
|
---
|
|
|
|
<section id={id} class="section">
|
|
<div class="container">
|
|
<header class="section__head" data-reveal>
|
|
<p class="eyebrow">
|
|
{index && <span class="section__index">{index}</span>}{eyebrow}
|
|
</p>
|
|
<h2 class="section__title">{title}</h2>
|
|
</header>
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.section__head {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
/* A short cyan→magenta tick leads each section eyebrow — board palette. */
|
|
.section__head .eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
.section__head .eyebrow::before {
|
|
content: "";
|
|
width: 1.7rem;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
|
box-shadow: 0 0 8px var(--accent-glow);
|
|
}
|
|
.section__index {
|
|
color: var(--accent);
|
|
text-shadow: var(--glow-num);
|
|
font-size: 1.05em;
|
|
margin-right: 0.6rem;
|
|
}
|
|
.section__title {
|
|
font-family: var(--font-display);
|
|
letter-spacing: -0.01em;
|
|
margin-top: var(--space-3);
|
|
font-size: var(--step-3);
|
|
max-width: 22ch;
|
|
}
|
|
</style>
|