diff --git a/_components/header.tsx b/_components/header.tsx index 93d38f8..ed3ccca 100644 --- a/_components/header.tsx +++ b/_components/header.tsx @@ -1,17 +1,14 @@ export interface Props { heading: string; subheading?: string; + comp: any; } export default function(props: Props) { return (

{ props.heading }

-
- - 󱀝 - -
+ {props.comp.separator()}

{ props.subheading }

) diff --git a/_components/separator.tsx b/_components/separator.tsx new file mode 100644 index 0000000..265f28a --- /dev/null +++ b/_components/separator.tsx @@ -0,0 +1,9 @@ +export default function () { + return ( +
+ + 󱀝 + +
+ ); +} diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss index 3c45d7d..02fbcfa 100644 --- a/_includes/styles/base.scss +++ b/_includes/styles/base.scss @@ -89,21 +89,6 @@ .page-header { .subheading { font-style: italic; } - .separator { - margin: 1rem 0; - span { - display: inline-block; - vertical-align: middle; - } - .outer-outline { - width: 40%; - border: 1px solid var(--color-black); - } - .icon { - font-size: 2rem; - color: var(--color-black); - } - } } @for $i from 1 to 3 { diff --git a/_includes/styles/components/separator.scss b/_includes/styles/components/separator.scss new file mode 100644 index 0000000..c722492 --- /dev/null +++ b/_includes/styles/components/separator.scss @@ -0,0 +1,15 @@ +.separator { + margin: 1rem 0; + span { + display: inline-block; + vertical-align: middle; + } + .outer-outline { + width: 40%; + border: 1px solid var(--color-black); + } + .icon { + font-size: 2rem; + color: var(--color-black); + } +} diff --git a/styles/main.scss b/styles/main.scss index f20f5a0..4190d35 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -9,3 +9,4 @@ // Components @import "styles/components/navbar"; +@import "styles/components/separator";