Content Updates with projects and experience

src/components/mystic/CelestialFrame.astro

@@ -2,20 +2,15 @@
 /**
  * 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.
+ * 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.
  *
- * 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>
+ * 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";
 
@@ -32,30 +27,33 @@ const {
   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";
+// 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", radius, borderStyle, className]}
-  style="border-color: color-mix(in srgb, var(--color-accent) 75%, transparent); border-width: 3px;"
+  class:list={["relative", className]}
+  style={`border-radius: ${outerPx}px; border: ${bw}px solid color-mix(in srgb, var(--color-accent) 75%, transparent); overflow: hidden;`}
 >
-  {/* Faint sacred-geometry tint behind the image. */}
+  {/* Faint sacred-geometry tint behind the image (fills the full figure). */}
   <div
-    class:list={["absolute inset-0", radius]}
-    style="background: color-mix(in srgb, var(--color-violet, var(--color-accent)) 14%, var(--color-surface-sunken));"
+    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, clipped to the frame. */}
-  <div class:list={["relative overflow-hidden", radius]}>
+  {/* 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>
 
@@ -79,3 +77,5 @@ const borderStyle = emphasis === "strong" ? "border-2" : "border";
     style="color: var(--color-accent); opacity:.7;"
   />
 </figure>
+
+