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
74 lines
2.0 KiB
Plaintext
74 lines
2.0 KiB
Plaintext
---
|
|
/**
|
|
* Greg's portrait in a gold frame, from the Page text note's `portrait`.
|
|
* Without one, or if it fails to load, the star-chart art stands in.
|
|
*/
|
|
import GiltCorners from "@gk/ui/components/GiltCorners.astro";
|
|
import Star from "@gk/ui/components/Star.astro";
|
|
import StarChartArt from "@gk/ui/components/StarChartArt.astro";
|
|
import type { SealName } from "@gk/ui/components/seals.ts";
|
|
|
|
interface Props {
|
|
/** "hero": the thick gold frame on the landing; "panel": the framed panel on About. */
|
|
variant?: "hero" | "panel";
|
|
src?: string;
|
|
alt?: string;
|
|
seal?: SealName;
|
|
class?: string;
|
|
}
|
|
const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", class: className } = Astro.props;
|
|
---
|
|
<figure class:list={["portrait", variant, className]}>
|
|
<StarChartArt seal={seal} ratio={variant === "hero" ? "188 / 228" : "auto"} src={src} alt={alt} class="art" />
|
|
{variant === "panel" && <GiltCorners inset={4} size={30} />}
|
|
{variant === "hero" && <Star size={34} class="spark tl" />}
|
|
{variant === "hero" && <Star size={24} class="spark br" />}
|
|
{!src && <figcaption class="gk-visually-hidden">Portrait coming soon</figcaption>}
|
|
</figure>
|
|
|
|
<style>
|
|
.portrait {
|
|
position: relative;
|
|
margin: 0;
|
|
}
|
|
.hero {
|
|
width: 200px;
|
|
border: 3px solid var(--gk-gold);
|
|
border-radius: var(--gk-radius-lg);
|
|
padding: 6px;
|
|
background: rgba(var(--gk-violet-rgb), calc(0.12 * var(--gk-wash)));
|
|
}
|
|
.hero :global(.art) {
|
|
border-radius: var(--gk-radius);
|
|
}
|
|
.hero :global(.photo) {
|
|
object-position: 50% 20%;
|
|
}
|
|
.hero :global(.spark) {
|
|
position: absolute;
|
|
}
|
|
.hero :global(.tl) {
|
|
left: -17px;
|
|
top: -17px;
|
|
}
|
|
.hero :global(.br) {
|
|
right: -12px;
|
|
bottom: -12px;
|
|
}
|
|
.panel {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(var(--gk-gold-rgb), 0.55);
|
|
background: var(--gk-midnight);
|
|
}
|
|
.panel :global(.art) {
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
height: 320px;
|
|
}
|
|
.panel :global(.photo) {
|
|
object-position: 50% 25%;
|
|
}
|
|
</style>
|