feat: add header

4 files changed, 43 insertions, 4 deletions

diff --git a/src/sass/_bootstrap.sass b/src/sass/_bootstrap.sass
index 46309ba..755ffb1 100644
--- a/src/sass/_bootstrap.sass
+++ b/src/sass/_bootstrap.sass
@@ -1,7 +1,22 @@
 @import "_variables.sass";
 
-body
-  font-family: $font-family
-
 h1
   font-family: $font-family-big
+
+@mixin breakpoint($point)
+  @if $point == desktop
+    @media (min-width: 70em)
+      @content
+  @else if $point == laptop
+    @media (min-width: 64em)
+      @content
+  @else if $point == tablet
+    @media (max-width: 1280px)
+      @content
+  @else if $point == phablet
+    @media (max-width: 1000px)
+      @content
+  @else if $point == mobileonly
+    @media (max-width: 768px)
+      @content
+
diff --git a/src/sass/_header.sass b/src/sass/_header.sass
new file mode 100644
index 0000000..33f9271
--- /dev/null
+++ b/src/sass/_header.sass
@@ -0,0 +1,14 @@
+@import "_bootstrap.sass"
+
+header
+  background-color: $primary
+  color: $color-w
+  padding: 10px 0
+  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 0px
+  h1
+    font-size: 3em
+    margin: 0
+    a
+      color: $color-w !important
+    @include breakpoint(phablet)
+      text-align: center
diff --git a/src/sass/_variables.sass b/src/sass/_variables.sass
index da6e948..e716c3c 100644
--- a/src/sass/_variables.sass
+++ b/src/sass/_variables.sass
@@ -3,3 +3,8 @@
 
 $font-family: "Ubuntu", sans-serif
 $font-family-big: "Bebas Neue", corsive
+
+$primary: #34495e
+$secondary: #e8a83c
+
+$color-w: #fafafa
diff --git a/src/sass/main.sass b/src/sass/main.sass
index eb29317..18b025a 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -1 +1,6 @@
-@import "_bootstrap.sass"
+@import "_header.sass";
+
+body
+  color: #2c3e50
+  font-family: $font-family
+  background-color: #fbfcfc