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 (
-
+
- {block.imageFormat}
- {block.text && {block.text}
}
-
+ {block.text && {block.text}}
+
);
};
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;