style image blocks along with body elements

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 && <figcaption>{block.text}</figcaption>}
-      {block.text && <div>{block.text}</div>}
+    </figure>
-    </div>
   );
 };

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;
+    }
+  }
+}

web/src/components/blocks/richTextBlock.module.scss

@@ -7,8 +7,8 @@
   h4,
   h5,
   h6 {
-    margin: 2rem 0 1rem;
+    margin: 2rem auto 1rem;
-    max-width: 36em;
+    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);
   }
 }

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);
   }
 }

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;