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

Fix stars on frames

Browse Source
This commit is contained in:
Greg Kilmer
2026-07-04 20:33:13 -04:00
parent d41d1a05b9
commit 9b3c15b67b
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mystic/CelestialFrame.astro
+6 -9
View File
@@ -36,7 +36,7 @@ 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) 75%, transparent); overflow: hidden;`}
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
@@ -46,14 +46,13 @@ const innerPx = Math.max(0, outerPx - bw);
>
</div>
{/* The media itself, in normal flow (defines the figure's height via the slot's
{
/* 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;`}
>
figure's `overflow: hidden` clips the tint layer to the outer radius. */
}
<div class="relative overflow-hidden" style={`border-radius: ${innerPx}px;`}>
<slot />
</div>
@@ -77,5 +76,3 @@ const innerPx = Math.max(0, outerPx - bw);
style="color: var(--color-accent); opacity:.7;"
/>
</figure>