summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.vue2
-rw-r--r--src/components/design/HeaderBlue.vue12
-rw-r--r--src/sass/_bootstrap.sass21
-rw-r--r--src/sass/_header.sass14
-rw-r--r--src/sass/_variables.sass5
-rw-r--r--src/sass/main.sass7
-rw-r--r--src/views/Home.vue7
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>