From 34b103f41fcdb86765a2bf4ea35d9705223a69fc Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Tue, 14 Nov 2023 11:51:52 +0100
Subject: [PATCH] Create image sass component, was in Zen styles before.

---
 assets/sass/components/image/_image.scss | 68 ++++++++++++++++++++++++
 assets/sass/styles.scss                  |  1 +
 2 files changed, 69 insertions(+)
 create mode 100644 assets/sass/components/image/_image.scss

diff --git a/assets/sass/components/image/_image.scss b/assets/sass/components/image/_image.scss
new file mode 100644
index 0000000..9e71a77
--- /dev/null
+++ b/assets/sass/components/image/_image.scss
@@ -0,0 +1,68 @@
+// Figure and image.
+
+figure,
+img {
+  &.image {
+    --padding: .75rem;
+
+    @include respond-to(s) {
+      &.center {
+        margin-inline: auto;
+      }
+
+      &.left {
+        padding-inline-end: var(--padding);
+        padding-block-end: var(--padding);
+        margin: 0;
+        float: left;
+        clear: both;
+      }
+
+      &.right {
+        padding-inline-start: var(--padding);
+        padding-block-end: var(--padding);
+        margin: 0;
+        float: right;
+        clear: both;
+      }
+    }
+  }
+}
+
+figure {
+  &.image {
+    --padding: .75rem;
+
+    figcaption {
+      padding-block-start: var(--padding);
+
+      @include respond-to(s) {
+        display: table-caption;
+        caption-side: bottom;
+        padding-block-start: 0;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    @include respond-to(s) {
+      display: table;
+
+      &.left {
+        figcaption {
+          padding-inline-end: var(--padding);
+          padding-block-end: var(--padding);
+        }
+      }
+
+      &.right {
+        figcaption {
+          padding-inline-start: var(--padding);
+          padding-block-end: var(--padding);
+        }
+      }
+    }
+  }
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 2bbce84..3432310 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -48,6 +48,7 @@
 @import 'components/hidden/hidden';
 @import 'components/highlight-mark/highlight-mark';
 @import 'components/icon-inline/icon-inline';
+@import 'components/image/image';
 @import 'components/language-selector/language-selector';
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';