diff --git a/src/components/Home.vue b/src/components/Home.vue index 1c955f8..6ae776d 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -35,79 +35,9 @@ export default { @import "./src/scss/variables"; @import "./src/scss/media-queries"; .home{ - &__header{ - width: 100%; - height: 200px; - display: flex; - align-items: center; - justify-content: center; - background-size: cover; - background-repeat: no-repeat; - background-position: 50% 50%; - position: relative; - background-color: $c-dark; - background-image: url('~assets/arrival.jpg'); - @include tablet-min{ - height: 284px; - } - &:before{ - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba($c-light, 0.7); - } - &-wrap{ - text-align: center; - position: relative; - } - &-title{ - font-weight: 500; - font-size: 22px; - text-transform: uppercase; - letter-spacing: 0.5px; - color: $c-dark; - margin: 0; - @include tablet-min{ - font-size: 28px; - } - } - &-subtitle{ - display: block; - font-size: 14px; - font-weight: 300; - color: $c-dark; - margin: 5px 0; - @include tablet-min{ - font-size: 16px; - } - } - &-link{ - text-decoration: none; - color: $c-dark; - font-size: 13px; - font-weight: 300; - opacity: 0.7; - transition: opacity 0.5s ease; - &:hover{ - opacity: 1; - } - span{ - display: inline-block; - vertical-align: middle; - } - &-icon{ - display: inline-block; - vertical-align: middle; - margin-right: 2px; - width: 16px; - height: 15px; - fill: $c-dark; - } - } - } + position: relative; + padding: 50px 0 0; + .wrapper{ min-height: 0; } diff --git a/src/components/LandingBanner.vue b/src/components/LandingBanner.vue index 08f7f8a..135215e 100644 --- a/src/components/LandingBanner.vue +++ b/src/components/LandingBanner.vue @@ -44,11 +44,10 @@ header { background-position: 50% 50%; position: relative; background-color: $c-dark; - // background-image: url('~assets/arrival.jpg'); - @include tablet-min{ + @include tablet-min { height: 284px; } - &:before{ + &:before { content: ""; position: absolute; top: 0; @@ -58,12 +57,12 @@ header { background: rgba($c-light, 0.7); } - .container{ + .container { text-align: center; position: relative; } - .title{ + .title { font-weight: 500; font-size: 22px; text-transform: uppercase; @@ -75,7 +74,7 @@ header { } } - .subtitle{ + .subtitle { display: block; font-size: 14px; font-weight: 300; @@ -85,5 +84,29 @@ header { font-size: 16px; } } + + .link { + text-decoration: none; + color: $c-dark; + font-size: 13px; + font-weight: 300; + opacity: 0.7; + transition: opacity 0.5s ease; + &:hover { + opacity: 1; + } + span { + display: inline-block; + vertical-align: middle; + } + &-icon { + display: inline-block; + vertical-align: middle; + margin-right: 2px; + width: 16px; + height: 15px; + fill: $c-dark; + } + } } \ No newline at end of file