Update layout

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;
@@ -19,3 +20,8 @@
         transition: 0.6s;
     }
 }
+@media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+    #banner {
+        top: 155px;
+    }
+}

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; 
 }

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;

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: 67%;
-        margin-left: calc(-2 * #{$gutter-width});
+        max-width: 33%;
     }
 
     ul {

themes/neff/assets/scss/_variables.scss

@@ -16,4 +16,6 @@ $border-radius: 5px;
 
 $fa-font-path: "/fonts";
 
-$background-image: "/img/background.webp";
+$background-image: "/img/background.jpg";
+$background-image-phone: "/img/background-phone.jpg";
+$background-image-small: "/img/background-small.jpg";

themes/neff/layouts/index.html

@@ -2,8 +2,6 @@
     <div id="index">
         <div class="container transparent">
             <section class="flex row">
-                <div class="padding"></div>
-                <div class="padding"></div>
                 <div id="index-short-contact">
                     <div class="phone">
                         <i class="fa fa-phone"></i>: {{ (index .Site.Data.contact.contact 0).telephone }}

themes/neff/layouts/partials/banner.html

@@ -1,7 +1,7 @@
 {{- with .Params.banner }}
     <section id="banner">
         <div class="container">
-            <div id="banner-container">
+            <div id="banner-container" class="padding">
                 {{ . | markdownify }}
             </div>
         </div>