style image blocks along with body elements
This commit is contained in:
@ -8,7 +8,9 @@ export const ImageWithTextBlock = ({
|
|||||||
block: ImageWithTextBlockType;
|
block: ImageWithTextBlockType;
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className={styles.imageWithTextBlock}>
|
<figure
|
||||||
|
className={`${styles.imageWithTextBlock} ${styles[block.imageFormat]}`}
|
||||||
|
>
|
||||||
<Image
|
<Image
|
||||||
src={block.image.url}
|
src={block.image.url}
|
||||||
alt={block.image.alt ?? ""}
|
alt={block.image.alt ?? ""}
|
||||||
@ -18,8 +20,7 @@ export const ImageWithTextBlock = ({
|
|||||||
// height={0}
|
// height={0}
|
||||||
// sizes="20vw"
|
// sizes="20vw"
|
||||||
/>
|
/>
|
||||||
<div>{block.imageFormat}</div>
|
{block.text && <figcaption>{block.text}</figcaption>}
|
||||||
{block.text && <div>{block.text}</div>}
|
</figure>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -7,8 +7,8 @@
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin: 2rem 0 1rem;
|
margin: 2rem auto 1rem;
|
||||||
max-width: 36em;
|
max-width: var(--size-width-p);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5,
|
h5,
|
||||||
@ -18,16 +18,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 1.4em;
|
margin: 0 auto 1.4em;
|
||||||
font-size: var(--font-size-body);
|
font-size: var(--font-size-body);
|
||||||
max-width: 36em;
|
max-width: var(--size-width-p);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
margin: 1em 0 2em;
|
margin: 1em auto 2em;
|
||||||
font-size: var(--font-size-body);
|
font-size: var(--font-size-body);
|
||||||
max-width: 36em;
|
max-width: var(--size-width-p);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
||||||
li {
|
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 {
|
strong {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@ -105,6 +114,6 @@
|
|||||||
figcaption {
|
figcaption {
|
||||||
font-size: var(--font-size-caption);
|
font-size: var(--font-size-caption);
|
||||||
padding: .6rem 0;
|
padding: .6rem 0;
|
||||||
max-width: 36rem;
|
max-width: var(--size-width-p);
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,6 +1,19 @@
|
|||||||
.body {
|
.body {
|
||||||
padding-bottom: var(--spacing-section-bottom);
|
padding-bottom: var(--spacing-section-bottom);
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
blockquote {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
@ -8,7 +21,7 @@
|
|||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin: 2rem 0 1rem;
|
margin: 2rem 0 1rem;
|
||||||
max-width: 36em;
|
max-width: var(--size-width-p);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5,
|
h5,
|
||||||
@ -20,7 +33,7 @@
|
|||||||
p {
|
p {
|
||||||
margin-bottom: 1.4em;
|
margin-bottom: 1.4em;
|
||||||
font-size: var(--font-size-body);
|
font-size: var(--font-size-body);
|
||||||
max-width: 36em;
|
max-width: var(--size-width-p);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
@ -105,6 +118,6 @@
|
|||||||
figcaption {
|
figcaption {
|
||||||
font-size: var(--font-size-caption);
|
font-size: var(--font-size-caption);
|
||||||
padding: .6rem 0;
|
padding: .6rem 0;
|
||||||
max-width: 36rem;
|
max-width: var(--size-width-p);
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -39,6 +39,9 @@
|
|||||||
--spacing-gap-row: 1.5rem;
|
--spacing-gap-row: 1.5rem;
|
||||||
--spacing-section-bottom: 3rem;
|
--spacing-section-bottom: 3rem;
|
||||||
|
|
||||||
|
// sizes
|
||||||
|
--size-width-p: 36rem;
|
||||||
|
|
||||||
// animations
|
// animations
|
||||||
--transition-easing: .3s ease;
|
--transition-easing: .3s ease;
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user