mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
84 lines
2.6 KiB
Plaintext
84 lines
2.6 KiB
Plaintext
---
|
|
/**
|
|
* CelestialFrame.astro
|
|
* ---------------------------------------------------------------------------
|
|
* An ornamental frame for imagery: rounded image container with thin gold
|
|
* hairline + small star-burst flourishes in the corners and a faint sacred-
|
|
* geometry tint behind. Wraps an <img> (or any media) passed via the default
|
|
* slot.
|
|
*
|
|
* The frame is structural (not just decorative), so it owns the rounded
|
|
* corners + border + overflow. The corner sparkles are absolutely positioned
|
|
* SVGs that inherit the accent color.
|
|
*
|
|
* Usage:
|
|
* <CelestialFrame>
|
|
* <img src="/images/hero.jpg" alt="..." class="h-full w-full object-cover" />
|
|
* </CelestialFrame>
|
|
* <CelestialFrame rounded="none"> ... </CelestialFrame>
|
|
*/
|
|
import StarBurst from './StarBurst.astro';
|
|
|
|
interface Props {
|
|
class?: string;
|
|
/** Corner rounding. */
|
|
rounded?: 'lg' | 'xl' | '2xl' | 'none';
|
|
/** Stroke emphasis on the frame border. */
|
|
emphasis?: 'subtle' | 'strong';
|
|
}
|
|
const {
|
|
class: className = '',
|
|
rounded = '2xl',
|
|
emphasis = 'subtle',
|
|
} = Astro.props;
|
|
|
|
const radius = {
|
|
none: 'rounded-none',
|
|
lg: 'rounded-lg',
|
|
xl: 'rounded-xl',
|
|
'2xl': 'rounded-2xl',
|
|
}[rounded];
|
|
|
|
const borderStyle =
|
|
emphasis === 'strong'
|
|
? 'border-2'
|
|
: 'border';
|
|
---
|
|
<figure
|
|
class:list={['relative', radius, borderStyle, className]}
|
|
style="border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);"
|
|
>
|
|
{/* Faint sacred-geometry tint behind the image. */}
|
|
<div
|
|
class:list={['absolute inset-0', radius]}
|
|
style="background: color-mix(in srgb, var(--color-violet, var(--color-accent)) 14%, var(--color-surface-sunken));"
|
|
aria-hidden="true"
|
|
>
|
|
</div>
|
|
|
|
{/* The media itself, clipped to the frame. */}
|
|
<div class:list={['relative overflow-hidden', radius]}>
|
|
<slot />
|
|
</div>
|
|
|
|
{/* Corner star-burst flourishes (sit on the border corners). */}
|
|
<StarBurst
|
|
class="pointer-events-none absolute -left-2 -top-2 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
|
|
style="color: var(--color-accent);"
|
|
/>
|
|
<StarBurst
|
|
class="pointer-events-none absolute -bottom-2 -right-2 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
|
|
style="color: var(--color-accent);"
|
|
/>
|
|
<StarBurst
|
|
variant="outline"
|
|
class="pointer-events-none absolute -right-1 -top-1 h-3 w-3"
|
|
style="color: var(--color-accent); opacity:.7;"
|
|
/>
|
|
<StarBurst
|
|
variant="outline"
|
|
class="pointer-events-none absolute -left-1 -bottom-1 h-3 w-3"
|
|
style="color: var(--color-accent); opacity:.7;"
|
|
/>
|
|
</figure>
|