mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
01431468e4
- Palette: Patiun Teal, Midnight, night sky, Starlight, flat Alchemist Gold; violet/indigo only as nebula light. Starlight content sections, night-sky nav and heroes (.on-sky scope re-points accent/gold to on-dark values). - Type: Cinzel for headings, names and card titles; Montserrat for body, UI and eyebrows (font-eyebrow); JetBrains Mono kept for code-like blocks. - Header lockup: Patiun glyph + Cinzel "GREG KILMER" + "Web Development · a Patiun LLC company"; glyph also marks the footer and store nav. - Teal filled buttons with Midnight text; gold eyebrows; small links use a darker teal so they pass WCAG AA on Starlight. - Favicons, app icons and web manifest from the GregKilmer.com brand package. - docs/THEMING.md updated for the new palette and fonts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
58 lines
1.8 KiB
Plaintext
58 lines
1.8 KiB
Plaintext
---
|
|
/**
|
|
* RequirementList.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Renders the store rules / requirements. Each item has an mdi icon that
|
|
* signals tone: 'check-decagram' / 'information' = neutral rule,
|
|
* 'alert' = caution, 'close-circle' = hard no / final.
|
|
*
|
|
* Used on the storefront and repeated on the order page; the OrderForm also
|
|
* requires an explicit acknowledgment of these.
|
|
*/
|
|
import Icon from '@components/Icon.astro';
|
|
import type { Requirement } from '@data/store-products';
|
|
|
|
interface Props {
|
|
items: Requirement[];
|
|
/** Optional heading shown above the list. */
|
|
heading?: string;
|
|
}
|
|
|
|
const { items, heading } = Astro.props;
|
|
|
|
// Map the requirement icon to a tone color.
|
|
function toneColor(icon: Requirement['icon']): string {
|
|
switch (icon) {
|
|
case 'alert':
|
|
return '#d8b35a'; // gold — caution
|
|
case 'close-circle':
|
|
return '#e5655a'; // red — hard no
|
|
case 'check-decagram':
|
|
case 'information':
|
|
default:
|
|
return 'var(--color-accent)';
|
|
}
|
|
}
|
|
---
|
|
|
|
{heading && (
|
|
<h3 class="font-display text-xl font-bold" style="color: var(--color-text);">{heading}</h3>
|
|
)}
|
|
|
|
<ul class="flex flex-col gap-3">
|
|
{items.map((item) => (
|
|
<li
|
|
class="flex gap-3 rounded-lg border p-4"
|
|
style="border-color: var(--color-border); background: var(--color-surface-raised);"
|
|
>
|
|
<span class="mt-0.5 shrink-0" style={`color: ${toneColor(item.icon)};`}>
|
|
<Icon name={item.icon} class="h-5 w-5" />
|
|
</span>
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="font-sans text-sm font-semibold" style="color: var(--color-text);">{item.title}</span>
|
|
<span class="text-sm leading-relaxed" style="color: var(--color-text-muted);">{item.body}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|