From f45512efb7cc345d7f6fc837c09531fd64915fd2 Mon Sep 17 00:00:00 2001
From: elise <elise@sexmachine.home>
Date: Wed, 10 Jul 2024 14:21:45 +0200
Subject: [PATCH] style image attribution

---
 .../blocks/imageSliderBlock.module.scss       |  6 ++++-
 web/src/components/general/Image.tsx          |  6 +++--
 web/src/components/general/image.module.scss  | 25 +++++++++++++------
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/web/src/components/blocks/imageSliderBlock.module.scss b/web/src/components/blocks/imageSliderBlock.module.scss
index 7ffd501..41c5201 100644
--- a/web/src/components/blocks/imageSliderBlock.module.scss
+++ b/web/src/components/blocks/imageSliderBlock.module.scss
@@ -16,8 +16,12 @@
     justify-content: center;
     position: relative;
 
+    >div {
+      height: 100%;
+      width: 100%;
+    }
+
     img {
-      display: block;
       height: 100%;
       width: 100%;
       object-fit: contain;
diff --git a/web/src/components/general/Image.tsx b/web/src/components/general/Image.tsx
index 7ee51a3..13a2925 100644
--- a/web/src/components/general/Image.tsx
+++ b/web/src/components/general/Image.tsx
@@ -13,8 +13,10 @@ export function ImageFigure(props: ImageProps) {
     <figure
       className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
     >
-      <NextImage {...nextImageProps} />
-      {attribution && <div className={styles.attribution}>{attribution}</div>}
+      <div className={styles.imageWrapper}>
+        <NextImage {...nextImageProps} />
+        {attribution && <div className={styles.attribution}>{attribution}</div>}
+      </div>
       {caption && <figcaption>{caption}</figcaption>}
     </figure>
   );
diff --git a/web/src/components/general/image.module.scss b/web/src/components/general/image.module.scss
index 4b4eff7..540afe7 100644
--- a/web/src/components/general/image.module.scss
+++ b/web/src/components/general/image.module.scss
@@ -2,6 +2,13 @@
   width: 100%;
   margin: 0;
 
+  .imageWrapper {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
   img {
     display: block;
     max-width: 100%;
@@ -22,7 +29,7 @@
     width: 100vw;
     margin: 2rem calc(var(--spacing-sitepadding-inline)*-1);
 
-    img {
+    .imageWrapper, img {
       width: 100%;
     }
 
@@ -34,7 +41,7 @@
   &.fullwidth {
     margin: 2rem 0;
 
-    img {
+    .imageWrapper, img {
       width: 100%;
     }
   }
@@ -44,10 +51,6 @@
     margin: 2rem auto;
     text-align: center;
 
-    img {
-      margin: auto;
-    }
-
     figcaption {
       text-align: left;
     }
@@ -55,5 +58,13 @@
 }
 
 .attribution {
-  border: 1px dotted mediumpurple;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  display: inline-block;
+  padding: .1rem .2rem;
+  font-size: .6rem;
+  background: var(--color-black);
+  color: var(--color-betongGray);
+  opacity: .4;
 }
\ No newline at end of file