Antares/com.gregkilmer.www
1
0
Fork 0
mirror of https://github.com/Patiun/com.gregkilmer.www.git synced 2026-11-08 04:08:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Copy update and some formatting

Browse Source
This commit is contained in:
Greg Kilmer
2026-07-04 12:51:42 -04:00
parent 29b4a13345
commit c298562266
9 changed files with 545 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mystic/CelestialFrame.astro
+20 -22
View File
@@ -17,67 +17,65 @@
* </CelestialFrame>
* <CelestialFrame rounded="none"> ... </CelestialFrame>
*/
import StarBurst from './StarBurst.astro';
import StarBurst from "./StarBurst.astro";
interface Props {
class?: string;
/** Corner rounding. */
rounded?: 'lg' | 'xl' | '2xl' | 'none';
rounded?: "lg" | "xl" | "2xl" | "none";
/** Stroke emphasis on the frame border. */
emphasis?: 'subtle' | 'strong';
emphasis?: "subtle" | "strong";
}
const {
class: className = '',
rounded = '2xl',
emphasis = 'subtle',
class: className = "",
rounded = "2xl",
emphasis = "subtle",
} = Astro.props;
const radius = {
none: 'rounded-none',
lg: 'rounded-lg',
xl: 'rounded-xl',
'2xl': 'rounded-2xl',
none: "rounded-none",
lg: "rounded-lg",
xl: "rounded-xl",
"2xl": "rounded-2xl",
}[rounded];
const borderStyle =
emphasis === 'strong'
? 'border-2'
: 'border';
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);"
class:list={["relative", radius, borderStyle, className]}
style="border-color: color-mix(in srgb, var(--color-accent) 75%, transparent); border-width: 3px;"
>
{/* Faint sacred-geometry tint behind the image. */}
<div
class:list={['absolute inset-0', radius]}
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]}>
<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)]"
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-2 -right-2 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
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-1 -top-1 h-3 w-3"
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-1 -bottom-1 h-3 w-3"
class="pointer-events-none absolute -left-2 -bottom-2 h-3 w-3"
style="color: var(--color-accent); opacity:.7;"
/>
</figure>