From 1e2605f310dad95b49d1eeb9a2fec0da49e22dbf Mon Sep 17 00:00:00 2001
From: Patrick Kollitsch <patrick@davids-neighbour.com>
Date: Tue, 16 Apr 2024 21:32:23 +0700
Subject: [PATCH] theme: separate image formatting between prose and header
 image

see #857
---
 assets/scss/04-components/_figure.scss |  9 +++--
 assets/scss/05-prose/_images.scss      | 50 ++++++++++++++++++++++++++
 assets/scss/style.scss                 |  1 +
 3 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 assets/scss/05-prose/_images.scss

diff --git a/assets/scss/04-components/_figure.scss b/assets/scss/04-components/_figure.scss
index 708d30a3..8bb791ae 100644
--- a/assets/scss/04-components/_figure.scss
+++ b/assets/scss/04-components/_figure.scss
@@ -29,13 +29,11 @@ figure {
   }
 
   .post-slider & {
-
     picture,
     img,
     .iframe-border,
     video {
       aspect-ratio: 2/1;
-
     }
   }
 
@@ -43,9 +41,10 @@ figure {
     @extend .border-secondary;
   }
 
-  @extend .border;
-  @extend .border-1;
+  // @extend .border;
+  // @extend .border-1;
   @extend .rounded-1;
-  @extend .border-primary;
+
+  // @extend .border-primary;
   @extend .position-relative;
 }
diff --git a/assets/scss/05-prose/_images.scss b/assets/scss/05-prose/_images.scss
new file mode 100644
index 00000000..8bb791ae
--- /dev/null
+++ b/assets/scss/05-prose/_images.scss
@@ -0,0 +1,50 @@
+figure {
+  @extend .mx-auto;
+
+  font-variant: small-caps;
+  transition: border 8000ms ease-out;
+
+  .inline-icons {
+    div {
+      @extend .p-2;
+    }
+
+    @extend .text-primary;
+    @extend .top-0;
+    @extend .end-0;
+    @extend .m-3;
+    @extend .position-absolute;
+    @extend .lh-1;
+  }
+
+  picture,
+  img,
+  .iframe-border,
+  video {
+    object-fit: cover;
+    overflow: hidden;
+
+    @extend .rounded-1;
+    @extend .w-100;
+  }
+
+  .post-slider & {
+    picture,
+    img,
+    .iframe-border,
+    video {
+      aspect-ratio: 2/1;
+    }
+  }
+
+  &:hover {
+    @extend .border-secondary;
+  }
+
+  // @extend .border;
+  // @extend .border-1;
+  @extend .rounded-1;
+
+  // @extend .border-primary;
+  @extend .position-relative;
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index c3bef9a9..89b79885 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -108,6 +108,7 @@
   @import "05-prose/prose";
   @import "05-prose/footnotes";
   @import "05-prose/components";
+  @import "05-prose/images";
   @import "05-prose/tables";
 }