Styling of figure content block

src/components/media/Figure.astro

@@ -1,6 +1,5 @@
 ---
 import type { AspectRatio, FigureSize, ImageEffect } from '@/lib/constants/figure'
-import { resolveImage } from '@/lib/images/resolve'
 
 import ContentImage from './ContentImage.astro'
 
@@ -17,9 +16,8 @@ type Props = {
 }
 
 const LAYOUT: Record<FigureSize, { widths: number[]; sizes: string }> = {
-  inline: { widths: [400, 800, 1200], sizes: '(min-width: 60rem) 40rem, 100vw' },
+  inline: { widths: [400, 800, 1200], sizes: '(min-width: 80rem) 37rem, 100vw' },
-  wide: { widths: [600, 1200, 1800], sizes: '(min-width: 80rem) 60rem, 100vw' },
+  wide: { widths: [600, 1200, 1800], sizes: '(min-width: 80rem) 59rem, 100vw' },
-  full: { widths: [600, 900, 1280, 1600, 1920], sizes: '100vw' },
 }
 
 const {
@@ -33,8 +31,6 @@ const {
   ratio = 'original',
   class: className,
 } = Astro.props
-
-const resolved = resolveImage(image)
 ---
 
 <figure
@@ -45,34 +41,12 @@ const resolved = resolveImage(image)
     ratio !== 'original' && `ratio--${ratio}`,
     className,
   ]}
-  style={resolved && `--figure-src: url(${resolved.src})`}
 >
   <ContentImage src={image} alt={alt} eager={eager} {...LAYOUT[size]} />
   {(caption || credit) && (
-    <figcaption class="figcaption dark">
+    <figcaption class:list={['figure__caption', size !== 'inline' && 'dark']}>
-      {caption && <span class="caption">{caption}</span>}
+      {caption && <span class="figure__text">{caption}</span>}
-      {credit && <span class="credit">{credit}</span>}
+      {credit && <span class="figure__credit">{credit}</span>}
     </figcaption>
   )}
 </figure>
-
-<style>
-  @layer components {
-    @media (--bp-desktop) {
-      .prose .figure--inline,
-      .prose .figure--wide {
-        @mixin me calc(-1 * (var(--size-12) + var(--layout-margin-width)));
-
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) var(--layout-margin-width);
-        grid-template-rows: auto 1fr;
-        column-gap: var(--size-12);
-      }
-
-      .prose .figure--inline > :first-child,
-      .prose .figure--wide > :first-child {
-        grid-area: 1 / 1 / 3 / 2;
-      }
-    }
-  }
-</style>

src/content/general/articles/prima-materia.mdoc

@@ -142,9 +142,9 @@ for (const [key, value] of Object.entries(crucible)) {
    alt="A placeholder image"
    caption="An inline figure with a caption"
    credit="Dave Damage"
-   effect="none"
+   effect="xeroxed"
    ratio="16-9"
-   size="inline" /%}
+   size="wide" /%}
 
 Aliquam erat volutpat. Fusce sed velit at arcu tincidunt vulputate{% sidenote type="example" marker="‡" note="A second sidenote, typed as an example." /%}. Nam vitae lacus a nisl ultrices dictum.
 

src/lib/constants/figure.ts

@@ -1,7 +1,6 @@
 export const FIGURE_SIZES = [
   { label: 'Inline', value: 'inline' },
   { label: 'Wide', value: 'wide' },
-  { label: 'Full', value: 'full' },
 ] as const
 
 export const IMAGE_EFFECTS = [

src/styles/base/primitives.css

@@ -183,7 +183,6 @@
     --slot-prose-marker: 1.625rem;
     --slot-prose-gap: var(--size-6);
     --slot-prose-bar: var(--size-8);
-    --slot-callout-cell: 8.5rem;
     --slot-box-cell: 8.5rem;
 
     /* ═══ MOTION ═══ */

src/styles/components/figure.css

@@ -0,0 +1,101 @@
+@layer components.blocks {
+  .figure {
+    @mixin my var(--space-10);
+
+    & img {
+      display: block;
+
+      aspect-ratio: var(--figure-ratio, auto);
+      width: 100%;
+      height: auto;
+
+      object-fit: cover;
+    }
+  }
+
+  .ratio--21-9 {
+    --figure-ratio: 21 / 9;
+  }
+
+  .ratio--16-9 {
+    --figure-ratio: 16 / 9;
+  }
+
+  .ratio--3-2 {
+    --figure-ratio: 3 / 2;
+  }
+
+  .ratio--4-3 {
+    --figure-ratio: 4 / 3;
+  }
+
+  .ratio--1-1 {
+    --figure-ratio: 1 / 1;
+  }
+
+  .ratio--4-5 {
+    --figure-ratio: 4 / 5;
+  }
+
+  .figure--inline {
+    & .figure__caption {
+      @media (--bp-desktop) {
+        @mixin mt var(--size-0);
+
+        align-self: end;
+      }
+    }
+
+    @media (--bp-desktop) {
+      @mixin me calc(-1 * (var(--layout-gutter) + var(--layout-margin-width)));
+
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) var(--layout-margin-width);
+      column-gap: var(--layout-gutter);
+    }
+  }
+
+  .figure--wide {
+    .figure__caption {
+      @mixin mt var(--size-0);
+      @mixin py var(--size-4);
+      @mixin px var(--size-6);
+
+      background-color: var(--color-surface-base);
+    }
+
+    @media (--bp-desktop) {
+      @mixin me calc(-1 * (var(--layout-gutter) + var(--layout-margin-width)));
+    }
+  }
+
+  .figure__caption {
+    @mixin typo_label;
+    @mixin mt var(--size-3);
+
+    counter-increment: fig;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-5);
+
+    color: var(--color-text-secondary);
+
+    &::before {
+      content: "Fig. " counter(sec, upper-roman) "." counter(fig) " ⟫";
+      font-weight: var(--font-weight-emphasis);
+      color: var(--color-text-primary);
+      white-space: nowrap;
+    }
+  }
+
+  .figure__credit {
+    color: var(--color-text-quiet);
+  }
+
+  .effect--xeroxed {
+    & img {
+      filter: grayscale(1) contrast(10) brightness(50);
+    }
+  }
+}

src/styles/components/index.css

@@ -6,3 +6,4 @@
 @import url("table-wrapper.css");
 @import url("footnote.css");
 @import url("sidenote.css");
+@import url("figure.css");