Merge pull request #7 from gico-net/feat/header

Header

7 files changed, 62 insertions, 6 deletions

diff --git a/src/App.vue b/src/App.vue
index 4199600..2dcc51e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,5 +7,5 @@
 <style lang="sass">
 @import 'node_modules/bootstrap/scss/bootstrap.scss'
 @import 'node_modules/bootstrap-vue/src/index.scss'
-@import "./sass/main.sass"
+@import "@/sass/main.sass"
 </style>
diff --git a/src/components/design/HeaderBlue.vue b/src/components/design/HeaderBlue.vue
new file mode 100644
index 0000000..fd6d731
--- /dev/null
+++ b/src/components/design/HeaderBlue.vue
@@ -0,0 +1,12 @@
+<template lang="pug">
+  header
+    b-container
+      h1
+        a(href="/" rel="home") Gico
+</template>
+
+<script>
+export default {
+  name: "HeaderBlue",
+}
+</script>
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 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 17ab4d0..55c3c08 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,15 @@
 <template lang="pug">
   main
-    h1 Hello
+    header-blue
 </template>
 
 <script>
+import HeaderBlue from '@/components/design/HeaderBlue';
+
 export default {
   name: "Home",
+  components: {
+    'header-blue': HeaderBlue,
+  }
 }
 </script>