diff --git a/src/components/molecules/Heading.svelte b/src/components/molecules/Heading.svelte new file mode 100644 index 0000000..7955929 --- /dev/null +++ b/src/components/molecules/Heading.svelte @@ -0,0 +1,12 @@ + + +
+ +

{text}

+
\ No newline at end of file diff --git a/src/style/molecules/_heading.scss b/src/style/molecules/_heading.scss new file mode 100644 index 0000000..bafdcb9 --- /dev/null +++ b/src/style/molecules/_heading.scss @@ -0,0 +1,27 @@ +.heading { + overflow: hidden; + color: $color-tertiary; + text-align: center; + + // Title + h1 { + color: $color-secondary; + line-height: 1; + margin-top: 56px; + + @include bp (sm) { + margin-top: 160px; + } + } + // Text + p { + max-width: 260px; + margin: 40px auto 0; + font-weight: 200; + + @include bp (sm) { + margin: 72px auto 130px; + max-width: 600px; + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index de16b33..0ec6bd7 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -44,6 +44,7 @@ @import "molecules/photo-card"; @import "molecules/location"; @import "molecules/switcher"; +@import "molecules/heading"; // Organisms @import "organisms/locations";