Converting from sass to nested vanilla css with layers (#147)

2026-03-10 14:14:55 +01:00 · 2026-03-10 14:14:55 +01:00 · 57244c3f33
commit 57244c3f33
parent 8e611f3a64
1 changed files with 2687 additions and 2751 deletions
--- a/assets/css/base/_images.css
+++ b/assets/css/base/_images.css
@ -0,0 +1,89 @@
+/* Figure and image. */
+
+@layer base {
+  figure,
+  img {
+    &.image {
+      --image-padding: .75rem;
+
+      @media (min-width: 666px) {
+        &.center {
+          margin-inline: auto;
+        }
+
+        &.left {
+          padding-inline-end: var(--image-padding);
+          padding-block-end: var(--image-padding);
+          margin: 0;
+          float: left;
+          clear: both;
+        }
+
+        &.right {
+          padding-inline-start: var(--image-padding);
+          padding-block-end: var(--image-padding);
+          margin: 0;
+          float: right;
+          clear: both;
+        }
+      }
+    }
+  }
+
+  figure {
+    /* Add vertical rhythm margins. */
+    margin-block: 0 var(--spacing-m);
+
+    &.image {
+      figcaption {
+        padding-block-start: var(--image-padding);
+        contain: inline-size;
+
+        /* Set max text line width in main for readability. */
+        max-width: var(--max-line-width);
+
+        /* Nicer text wrap, e.g. no lone word on last line. */
+        text-wrap: pretty;
+
+        @media (min-width: 666px) {
+          padding-block-start: 0;
+        }
+
+        p {
+          margin: 0;
+        }
+      }
+
+      @media (min-width: 666px) {
+        inline-size: fit-content;
+
+        &.left {
+          figcaption {
+            padding-inline-end: var(--image-padding);
+            padding-block-end: var(--image-padding);
+          }
+        }
+
+        &.right {
+          figcaption {
+            padding-inline-start: var(--image-padding);
+            padding-block-end: var(--image-padding);
+          }
+        }
+      }
+    }
+
+    &.podcast {
+      audio {
+        width: 95%;
+      }
+    }
+  }
+
+  img {
+    &.image {
+      /* Add vertical rhythm margins. */
+      margin-block: 0 var(--spacing-m);
+    }
+  }
+}