diff options
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/design/HeaderBlue.vue | 12 | ||||
| -rw-r--r-- | src/sass/_bootstrap.sass | 21 | ||||
| -rw-r--r-- | src/sass/_header.sass | 14 | ||||
| -rw-r--r-- | src/sass/_variables.sass | 5 | ||||
| -rw-r--r-- | src/sass/main.sass | 7 | ||||
| -rw-r--r-- | src/views/Home.vue | 7 |
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> |