mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
79 lines
3.0 KiB
Plaintext
79 lines
3.0 KiB
Plaintext
---
|
|
/**
|
|
* CelestialFrame.astro
|
|
* ---------------------------------------------------------------------------
|
|
* An ornamental frame for imagery: rounded image container with a gold border
|
|
* + 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.
|
|
*
|
|
* CORNER FIT: the gold border lives on the outer <figure>. The media container
|
|
* is INSET by exactly the border width (via --frame-bw) and its corner radius
|
|
* is reduced by the same amount, so the image nests flush inside the border at
|
|
* every corner — no gap, no mismatch. Adjust --frame-bw here in one place if
|
|
* the border width changes.
|
|
*/
|
|
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;
|
|
|
|
// Outer radius (px) per option. The inner media radius is outer - border width
|
|
// so the image corner nests perfectly inside the border's corner.
|
|
const outerPx = { none: 0, lg: 8, xl: 12, "2xl": 16 }[rounded];
|
|
const bw = emphasis === "strong" ? 4 : 3; // border width in px (matches border-2 / 3px)
|
|
const innerPx = Math.max(0, outerPx - bw);
|
|
---
|
|
|
|
<figure
|
|
class:list={["relative", className]}
|
|
style={`border-radius: ${outerPx}px; border: ${bw}px solid color-mix(in srgb, var(--color-accent) 100%, transparent); `}
|
|
>
|
|
{/* Faint sacred-geometry tint behind the image (fills the full figure). */}
|
|
<div
|
|
class="absolute inset-0"
|
|
style={`border-radius: ${outerPx}px; background: color-mix(in srgb, var(--color-violet, var(--color-accent)) 14%, var(--color-surface-sunken));`}
|
|
aria-hidden="true"
|
|
>
|
|
</div>
|
|
|
|
{
|
|
/* The media itself, in normal flow (defines the figure's height via the slot's
|
|
aspect-ratio div). Its radius = outer radius - border width, so the image's
|
|
rounded corner nests PERFECTLY inside the border's rounded corner. The
|
|
figure's `overflow: hidden` clips the tint layer to the outer radius. */
|
|
}
|
|
<div class="relative overflow-hidden" style={`border-radius: ${innerPx}px;`}>
|
|
<slot />
|
|
</div>
|
|
|
|
{/* Corner star-burst flourishes (sit on the border corners). */}
|
|
<StarBurst
|
|
class="pointer-events-none absolute -left-3 -top-3 h-6 w-6 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-5 -right-5 h-7 w-7 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-2 -top-2 h-3 w-3"
|
|
style="color: var(--color-accent); opacity:.7;"
|
|
/>
|
|
<StarBurst
|
|
variant="outline"
|
|
class="pointer-events-none absolute -left-2 -bottom-2 h-3 w-3"
|
|
style="color: var(--color-accent); opacity:.7;"
|
|
/>
|
|
</figure>
|