diff --git a/web/src/components/blocks/HorizontalRuleBlock.tsx b/web/src/components/blocks/HorizontalRuleBlock.tsx index 4741763..4115cfd 100644 --- a/web/src/components/blocks/HorizontalRuleBlock.tsx +++ b/web/src/components/blocks/HorizontalRuleBlock.tsx @@ -1,6 +1,6 @@ import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql"; import Image from "../general/Image"; -import styles from "./imageWithTextBlock.module.scss"; +import styles from "./horizontalRuleBlock.module.scss"; export const HorizontalRuleBlock = ({ block, @@ -20,5 +20,58 @@ export const HorizontalRuleBlock = ({ ? block.color : defaultColor; - return
; + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); }; diff --git a/web/src/components/blocks/horizontalRuleBlock.module.scss b/web/src/components/blocks/horizontalRuleBlock.module.scss index e69de29..956b3f9 100644 --- a/web/src/components/blocks/horizontalRuleBlock.module.scss +++ b/web/src/components/blocks/horizontalRuleBlock.module.scss @@ -0,0 +1,38 @@ +.horizontalRuleBlock { + height: 3rem; + width: 100%; + //max-width: calc(var(--size-width-p) + (var(--spacing-sitepadding)/2)); + max-width: var(--size-width-p); + margin: 1rem auto 4rem; + overflow: hidden; + position: relative; + + &[data-color="deepBrick"] { + color: var(--color-deepBrick); + } + + &[data-color="neufPink"] { + color: var(--color-neufPink); + } + + &[data-color="goldenOrange"] { + color: var(--color-goldenOrange); + } + + &[data-color="goldenBeige"] { + color: var(--color-goldenBeige); + } + + &[data-color="chateauBlue"] { + color: var(--color-chateauBlue); + } + + svg { + display: block; + height: 100%; + margin: 0 auto; + position: absolute; + left: 50%; + transform: translateX(-52%); + } +} \ 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 025af0b..9b012a4 100644 --- a/web/src/components/blocks/richTextBlock.module.scss +++ b/web/src/components/blocks/richTextBlock.module.scss @@ -116,4 +116,13 @@ padding: .6rem 0; max-width: var(--size-width-p); } + + hr { + margin: 2rem auto; + max-width: var(--size-width-p); + border: none; + height: 1px; + background: var(--color-text); + opacity: .2; + } } \ No newline at end of file