From 4c14a85ab0fa4e6d94bf64f777f6d102036437e9 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Tue, 12 Oct 2021 22:39:55 +0200
Subject: [PATCH] Create Heading component

Intro title with p
---
 src/components/molecules/Heading.svelte | 12 +++++++++++
 src/style/molecules/_heading.scss       | 27 +++++++++++++++++++++++++
 src/style/style.scss                    |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 src/components/molecules/Heading.svelte
 create mode 100644 src/style/molecules/_heading.scss

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 @@
+<script lang="ts">
+
+    import SiteTitle from '$components/atoms/SiteTitle.svelte';
+
+    export let text: string
+
+</script>
+
+<section class="heading">
+    <SiteTitle variant="inline" />
+    <p class="text-medium">{text}</p>
+</section>
\ 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";