mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
7aa2910b12
Dark stays the default. A device set to light gets the picks from the light motif board: the Dawn chart sky (dawn wash over faint star chart lines, atlas marks in the hero), deep gold line seals, Midnight, violet and gold dust, the deep gold to teal filament and the morning sky placeholder. Large standalone seals (404, Inquiries, Inquiry sent, the blog's lead) are gold foil in both modes. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
112 lines
2.4 KiB
Plaintext
112 lines
2.4 KiB
Plaintext
---
|
|
/** A case study's facts: employer, role, period, key numbers and tech. */
|
|
import Chip from "@gk/ui/components/Chip.astro";
|
|
import Kicker from "@gk/ui/components/Kicker.astro";
|
|
import type { Post } from "../../lib/blog.ts";
|
|
|
|
interface Props {
|
|
post: Post;
|
|
}
|
|
const d = Astro.props.post.data;
|
|
const cells = [
|
|
{ label: "Employer", value: d.employer ?? "Personal project" },
|
|
d.role && { label: "Role", value: d.role },
|
|
d.period && { label: "Period", value: d.period },
|
|
].filter((c): c is { label: string; value: string } => !!c);
|
|
const facts = d.facts ?? [];
|
|
---
|
|
<section class="facts" aria-label="Project facts">
|
|
<dl class="grid">
|
|
{
|
|
cells.map((c) => (
|
|
<div class="cell">
|
|
<dt>{c.label}</dt>
|
|
<dd>{c.value}</dd>
|
|
</div>
|
|
))
|
|
}
|
|
{
|
|
facts.map((f) => (
|
|
<div class="cell num">
|
|
<dt>{f.label}</dt>
|
|
<dd>{f.value}</dd>
|
|
</div>
|
|
))
|
|
}
|
|
</dl>
|
|
{
|
|
d.tech && d.tech.length > 0 && (
|
|
<div class="tech">
|
|
<Kicker ticks={false}>Tech</Kicker>
|
|
<ul>
|
|
{d.tech.map((t) => (
|
|
<li>
|
|
<Chip core>{t}</Chip>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
</section>
|
|
|
|
<style>
|
|
.facts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 22px 26px;
|
|
background: var(--gk-midnight);
|
|
border: 1px solid var(--gk-lines);
|
|
border-radius: var(--gk-radius);
|
|
}
|
|
.grid {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
|
gap: 16px 24px;
|
|
}
|
|
.cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
padding-left: 14px;
|
|
border-left: 1px solid rgba(var(--gk-gold-rgb), 0.45);
|
|
}
|
|
dt {
|
|
font-size: 11px;
|
|
letter-spacing: 0.2em;
|
|
font-weight: 600;
|
|
color: var(--gk-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
dd {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--gk-text);
|
|
line-height: 1.4;
|
|
}
|
|
.num dd {
|
|
font-family: var(--gk-font-display);
|
|
font-size: 24px;
|
|
color: var(--gk-gold-bright);
|
|
}
|
|
.tech {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px 14px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--gk-lines);
|
|
}
|
|
.tech ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
</style>
|