From d9b9c7615ec752cfb78a1824e0b849411c834024 Mon Sep 17 00:00:00 2001 From: Patrick Neff Date: Tue, 8 Jan 2019 02:19:26 +0100 Subject: [PATCH] Update layout --- themes/neff/assets/scss/_banner.scss | 8 +++++++- themes/neff/assets/scss/_grid.scss | 21 +++++++++++++++++++- themes/neff/assets/scss/_header.scss | 1 + themes/neff/assets/scss/_index.scss | 7 ++++--- themes/neff/assets/scss/_variables.scss | 4 +++- themes/neff/layouts/index.html | 2 -- themes/neff/layouts/partials/banner.html | 2 +- themes/neff/static/img/background-phone.jpg | Bin 0 -> 95406 bytes themes/neff/static/img/background-small.jpg | Bin 0 -> 163412 bytes themes/neff/static/img/background.webp | Bin 331616 -> 0 bytes 10 files changed, 36 insertions(+), 9 deletions(-) create mode 100644 themes/neff/static/img/background-phone.jpg create mode 100644 themes/neff/static/img/background-small.jpg delete mode 100644 themes/neff/static/img/background.webp diff --git a/themes/neff/assets/scss/_banner.scss b/themes/neff/assets/scss/_banner.scss index de392aa..9208113 100644 --- a/themes/neff/assets/scss/_banner.scss +++ b/themes/neff/assets/scss/_banner.scss @@ -1,9 +1,10 @@ #banner { font-size: 1.2rem; position: absolute; - top: 155px; + top: 105px; width: 100%; transition: 0.6s; + z-index: 500; h1 { font-size: 1.4rem; @@ -18,4 +19,9 @@ top: -200px; transition: 0.6s; } +} +@media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) { + #banner { + top: 155px; + } } \ No newline at end of file diff --git a/themes/neff/assets/scss/_grid.scss b/themes/neff/assets/scss/_grid.scss index 810fdb3..40aac67 100644 --- a/themes/neff/assets/scss/_grid.scss +++ b/themes/neff/assets/scss/_grid.scss @@ -12,13 +12,32 @@ body { padding: 155px 0 0 0; margin: 0; background-color: $background-color; - background-image: url(#{$background-image}); background-size: 100%; background-position: center; background-attachment: fixed; + background-size: cover; + background-image: url(#{$background-image-phone}); color: $font-color; } +@media only screen and (orientation: portrait) { + body { + background-image: url(#{$background-image-phone}); + } +} + +@media only screen and (min-width: 600px) and (orientation: landscape) { + body { + background-image: url(#{$background-image-small}); + } +} + +@media only screen and (min-width: 1200px) { + body { + background-image: url(#{$background-image}); + } +} + header { margin: 0; } diff --git a/themes/neff/assets/scss/_header.scss b/themes/neff/assets/scss/_header.scss index 90db7f6..eb22b62 100644 --- a/themes/neff/assets/scss/_header.scss +++ b/themes/neff/assets/scss/_header.scss @@ -5,6 +5,7 @@ top: 0; left: 0; font-family: $heading-font-family; + z-index: 2000; &.small { transition: $transition-time; diff --git a/themes/neff/assets/scss/_index.scss b/themes/neff/assets/scss/_index.scss index 949f3a3..80c05bd 100644 --- a/themes/neff/assets/scss/_index.scss +++ b/themes/neff/assets/scss/_index.scss @@ -27,13 +27,14 @@ border-radius: $border-radius; padding: $gutter-width; margin: calc(100vh - 320px) -$gutter-width 0 -$gutter-width; - min-width: $min-column-width-desktop; + overflow: none; + min-width: 100%; @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) { margin-top: calc(100vh - 285px); margin-bottom: -$gutter-width; - margin-right: -$gutter-width; - margin-left: calc(-2 * #{$gutter-width}); + margin-left: 67%; + max-width: 33%; } ul { diff --git a/themes/neff/assets/scss/_variables.scss b/themes/neff/assets/scss/_variables.scss index 2d2fb0d..cd9043b 100755 --- a/themes/neff/assets/scss/_variables.scss +++ b/themes/neff/assets/scss/_variables.scss @@ -16,4 +16,6 @@ $border-radius: 5px; $fa-font-path: "/fonts"; -$background-image: "/img/background.webp"; \ No newline at end of file +$background-image: "/img/background.jpg"; +$background-image-phone: "/img/background-phone.jpg"; +$background-image-small: "/img/background-small.jpg"; \ No newline at end of file diff --git a/themes/neff/layouts/index.html b/themes/neff/layouts/index.html index 4e2ced4..89055d0 100755 --- a/themes/neff/layouts/index.html +++ b/themes/neff/layouts/index.html @@ -2,8 +2,6 @@
-
-
: {{ (index .Site.Data.contact.contact 0).telephone }} diff --git a/themes/neff/layouts/partials/banner.html b/themes/neff/layouts/partials/banner.html index 3b12859..c7abaa6 100644 --- a/themes/neff/layouts/partials/banner.html +++ b/themes/neff/layouts/partials/banner.html @@ -1,7 +1,7 @@ {{- with .Params.banner }}