From 10227ff8e3af5533b50063d1b85017a9ed50d904 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 20 May 2024 21:36:18 +0200
Subject: [PATCH] style image blocks along with body elements

---
 .../components/blocks/ImageWithTextBlock.tsx  |  9 ++--
 .../blocks/imageWithTextBlock.module.scss     | 54 +++++++++++++++++++
 .../blocks/richTextBlock.module.scss          | 23 +++++---
 web/src/components/general/body.module.scss   | 19 +++++--
 web/src/css/variables.scss                    |  3 ++
 5 files changed, 94 insertions(+), 14 deletions(-)

diff --git a/web/src/components/blocks/ImageWithTextBlock.tsx b/web/src/components/blocks/ImageWithTextBlock.tsx
index 65dc8b6..4b7190d 100644
--- a/web/src/components/blocks/ImageWithTextBlock.tsx
+++ b/web/src/components/blocks/ImageWithTextBlock.tsx
@@ -8,7 +8,9 @@ export const ImageWithTextBlock = ({
   block: ImageWithTextBlockType;
 }) => {
   return (
-    <div className={styles.imageWithTextBlock}>
+    <figure
+      className={`${styles.imageWithTextBlock} ${styles[block.imageFormat]}`}
+    >
       <Image
         src={block.image.url}
         alt={block.image.alt ?? ""}
@@ -18,8 +20,7 @@ export const ImageWithTextBlock = ({
         // height={0}
         // sizes="20vw"
       />
-      <div>{block.imageFormat}</div>
-      {block.text && <div>{block.text}</div>}
-    </div>
+      {block.text && <figcaption>{block.text}</figcaption>}
+    </figure>
   );
 };
diff --git a/web/src/components/blocks/imageWithTextBlock.module.scss b/web/src/components/blocks/imageWithTextBlock.module.scss
index e69de29..f52524a 100644
--- a/web/src/components/blocks/imageWithTextBlock.module.scss
+++ b/web/src/components/blocks/imageWithTextBlock.module.scss
@@ -0,0 +1,54 @@
+.imageWithTextBlock {
+  width: 100%;
+  margin: 0;
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  figcaption {
+    width: 100%;
+    max-width: var(--size-width-p);
+    margin: 0 auto;
+    padding: .5rem 0 1rem;
+    font-size: var(--font-size-caption);
+    line-height: 1.4;
+    opacity: .8;
+  }
+
+  &.bleed {
+    width: 100vw;
+    margin: 2rem calc(var(--spacing-sitepadding)*-1);
+
+    img {
+      width: 100%;
+    }
+
+    @media (max-width: 800px) {
+      padding: .5rem var(--spacing-sitepadding);
+    }
+  }
+
+  &.fullwidth {
+    margin: 2rem 0;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  &.original {
+    width: 100%;
+    margin: 2rem auto;
+    text-align: center;
+
+    img {
+      margin: auto;
+    }
+
+    figcaption {
+      text-align: left;
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/components/blocks/richTextBlock.module.scss b/web/src/components/blocks/richTextBlock.module.scss
index 12857d6..025af0b 100644
--- a/web/src/components/blocks/richTextBlock.module.scss
+++ b/web/src/components/blocks/richTextBlock.module.scss
@@ -7,8 +7,8 @@
   h4,
   h5,
   h6 {
-    margin: 2rem 0 1rem;
-    max-width: 36em;
+    margin: 2rem auto 1rem;
+    max-width: var(--size-width-p);
   }
 
   h5,
@@ -18,16 +18,16 @@
   }
 
   p {
-    margin-bottom: 1.4em;
+    margin: 0 auto 1.4em;
     font-size: var(--font-size-body);
-    max-width: 36em;
+    max-width: var(--size-width-p);
   }
 
   ul,
   ol {
-    margin: 1em 0 2em;
+    margin: 1em auto 2em;
     font-size: var(--font-size-body);
-    max-width: 36em;
+    max-width: var(--size-width-p);
     list-style: none;
 
     li {
@@ -75,6 +75,15 @@
     }
   }
 
+  blockquote {
+    font-family: var(--font-serif);
+    font-size: 2.8rem;
+    font-style: italic;
+    max-width: calc(var(--size-width-p) * 1.4);
+    margin: 2rem auto 3.2rem;
+    text-align: center;
+  }
+
   strong {
     font-weight: 700;
   }
@@ -105,6 +114,6 @@
   figcaption {
     font-size: var(--font-size-caption);
     padding: .6rem 0;
-    max-width: 36rem;
+    max-width: var(--size-width-p);
   }
 }
\ No newline at end of file
diff --git a/web/src/components/general/body.module.scss b/web/src/components/general/body.module.scss
index f6e9d27..0c89ff0 100644
--- a/web/src/components/general/body.module.scss
+++ b/web/src/components/general/body.module.scss
@@ -1,6 +1,19 @@
 .body {
   padding-bottom: var(--spacing-section-bottom);
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  blockquote {
+    margin: 0 auto;
+  }
+
   h1,
   h2,
   h3,
@@ -8,7 +21,7 @@
   h5,
   h6 {
     margin: 2rem 0 1rem;
-    max-width: 36em;
+    max-width: var(--size-width-p);
   }
 
   h5,
@@ -20,7 +33,7 @@
   p {
     margin-bottom: 1.4em;
     font-size: var(--font-size-body);
-    max-width: 36em;
+    max-width: var(--size-width-p);
   }
 
   ul,
@@ -105,6 +118,6 @@
   figcaption {
     font-size: var(--font-size-caption);
     padding: .6rem 0;
-    max-width: 36rem;
+    max-width: var(--size-width-p);
   }
 }
\ No newline at end of file
diff --git a/web/src/css/variables.scss b/web/src/css/variables.scss
index 3934970..6a0cde4 100644
--- a/web/src/css/variables.scss
+++ b/web/src/css/variables.scss
@@ -39,6 +39,9 @@
   --spacing-gap-row: 1.5rem;
   --spacing-section-bottom: 3rem;
 
+  // sizes
+  --size-width-p: 36rem;
+
   // animations
   --transition-easing: .3s ease;