diff --git a/web/src/components/blocks/Blocks.tsx b/web/src/components/blocks/Blocks.tsx index 5c36306..3b9870d 100644 --- a/web/src/components/blocks/Blocks.tsx +++ b/web/src/components/blocks/Blocks.tsx @@ -1,11 +1,4 @@ -export const RichTextBlock = ({ block }: any) => { - return ( -
- ); -}; +import { RichTextBlock } from "./RichTextBlock"; export const Blocks = ({ blocks }: any) => { return blocks.map((block: any) => { diff --git a/web/src/components/blocks/RichTextBlock.tsx b/web/src/components/blocks/RichTextBlock.tsx new file mode 100644 index 0000000..12ff1d1 --- /dev/null +++ b/web/src/components/blocks/RichTextBlock.tsx @@ -0,0 +1,10 @@ +import styles from "./richTextBlock.module.scss"; + +export const RichTextBlock = ({ block }: any) => { + return ( + + ); +}; diff --git a/web/src/components/blocks/richTextBlock.module.scss b/web/src/components/blocks/richTextBlock.module.scss new file mode 100644 index 0000000..12857d6 --- /dev/null +++ b/web/src/components/blocks/richTextBlock.module.scss @@ -0,0 +1,110 @@ +.richTextBlock { + padding-bottom: var(--spacing-section-bottom); + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 2rem 0 1rem; + max-width: 36em; + } + + h5, + h6 { + text-transform: uppercase; + letter-spacing: .04em; + } + + p { + margin-bottom: 1.4em; + font-size: var(--font-size-body); + max-width: 36em; + } + + ul, + ol { + margin: 1em 0 2em; + font-size: var(--font-size-body); + max-width: 36em; + list-style: none; + + li { + position: relative; + margin-bottom: .75em; + padding-left: 2em; + + &:before { + position: absolute; + left: 0; + } + } + } + + ul { + li { + &:before { + content: ""; + left: .35em; + top: .4em; + display: block; + width: .75em; + height: .75em; + border-radius: 1em; + background: var(--color-goldenOrange); + } + } + } + + ol { + counter-reset: counter; + + li { + &:before { + counter-increment: counter; + content: counter(counter); + font-weight: 500; + color: var(--color-chateauBlue); + border-radius: 1em; + background: var(--color-neufPink); + width: 1.5em; + height: 1.5em; + text-align: center; + } + } + } + + strong { + font-weight: 700; + } + + em { + font-style: italic; + } + + a { + text-decoration-thickness: .1rem; + text-decoration-color: var(--color-goldenOrange); + font-weight: 500; + transition: text-decoration-color var(--transition-easing); + + &:hover { + text-decoration-color: currentColor; + } + } + + img { + max-width: 100%; + } + + figure { + margin: 2rem 0 2.4rem; + } + + figcaption { + font-size: var(--font-size-caption); + padding: .6rem 0; + max-width: 36rem; + } +} \ No newline at end of file