DomainPlate.astro (1168B)
1 --- 2 import type { CategoryDef } from '../lib/taxonomy'; 3 import { url } from '../lib/url'; 4 import Icon from './Icon.astro'; 5 6 interface Props { cat: CategoryDef; count: number; n: string } 7 const { cat, count, n } = Astro.props; 8 9 /** 10 * One of the twelve domains, as a tile. 11 * 12 * The hue lives on the top edge and nowhere else. Twelve fully-coloured 13 * cards would be a paint chart, and the colour is here to key the domain 14 * against the masthead and the marquee, not to fill the grid. 15 * 16 * The tiles carry no gutters — the grid draws 1px rules between them 17 * (`.grid-plates`) so the twelve read as one ruled table rather than as 18 * twelve floating objects. 19 */ 20 --- 21 <a class="plate-tile corners" href={url(cat.slug)} style={`--acc: var(--${cat.accent});`}> 22 <span class="plate-tile__head"> 23 <span class="plate-tile__tag">{cat.tag}</span> 24 <span class="plate-tile__n">{n}</span> 25 </span> 26 <h3 class="plate-tile__title">{cat.title}</h3> 27 <p class="plate-tile__blurb">{cat.blurb}</p> 28 <span class="plate-tile__meta"> 29 <span>{count} {count === 1 ? 'sheet' : 'sheets'}</span> 30 <span class="plate-tile__arrow"><Icon name="arrow" /></span> 31 </span> 32 </a>