Style updates

themes/neff/assets/scss/_banner.scss

@@ -20,7 +20,7 @@
         transition: 0.6s;
     }
 }
-@media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+@media only screen and (min-width: $media-query) {
     #banner {
         top: 155px;
     }

themes/neff/assets/scss/_grid.scss

@@ -16,11 +16,11 @@ body {
     background-position: center;
     background-attachment: fixed;
     background-size: cover;
-    background-image: url(#{$background-image-phone});
+    background-image: url(#{$background-image-phone-sd});
     color: $font-color;
 }
 
-@media only screen and (orientation: portrait) {
+@media only screen and (min-width: 800px) and (orientation: portrait) {
     body {
         background-image: url(#{$background-image-phone});
     }
@@ -28,7 +28,7 @@ body {
 
 @media only screen and (min-width: 600px) and (orientation: landscape) {
     body {
-        background-image: url(#{$background-image-small});
+        background-image: url(#{$background-image-sd});
     }
 }
 
@@ -38,6 +38,9 @@ body {
     }
 }
 
+@media only screen and (min-width: $media-query) {
+}
+
 header { 
     margin: 0; 
 }
@@ -137,7 +140,7 @@ table {
 }
 
 
-@media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+@media only screen and (min-width: $media-query) {
     .container {
         width: calc(#{$max-width} + calc(2 * #{$gutter-width}));
     }

themes/neff/assets/scss/_header.scss

@@ -20,7 +20,7 @@
             }
         }
 
-        @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+        @media only screen and (min-width: $media-query) {
             .navbar-logo {
                 img {
                     transition: $transition-time * 1.5;
@@ -43,7 +43,7 @@
             }
         }
 
-        @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+        @media only screen and (min-width: $media-query) {
             .navbar-logo {
                 img {
                     max-height: 100px;
@@ -77,7 +77,7 @@
         max-width: 40px;
         padding: 0 $gutter-width;
 
-        @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+        @media only screen and (min-width: $media-query) {
             max-width: none;
         }
 
@@ -174,7 +174,7 @@
                 align-items: flex-end;
 
 
-                @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+                @media only screen and (min-width: $media-query) {
                     & {
                         justify-content: flex-end;
                         align-items: flex-end;
@@ -196,7 +196,7 @@
             }
         }
 
-        @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+        @media only screen and (min-width: $media-query) {
             input[type=checkbox] {
                 display: none;
 

themes/neff/assets/scss/_index.scss

@@ -30,7 +30,7 @@
     overflow: none;
     min-width: 100%;
 
-    @media only screen and (min-width: calc(#{$max-width} + calc(6 * #{$gutter-width}))) {
+    @media only screen and (min-width: $media-query) {
         margin-top: calc(100vh - 285px);
         margin-bottom: -$gutter-width;
         margin-left: 67%;

themes/neff/assets/scss/_variables.scss

@@ -16,6 +16,9 @@ $border-radius: 5px;
 
 $fa-font-path: "/fonts";
 
-$background-image: "/img/background.jpg";
+$background-image-sd: "/img/background-sd.jpg";
-$background-image-phone: "/img/background-phone.jpg";
+$background-image-hd: "/img/background.jpg";
-$background-image-small: "/img/background-small.jpg";
+$background-image-phone-sd: "/img/background-phone-sd.jpg";
+$background-image-phone-hd: "/img/background-phone.jpg";
+
+$media-query: calc(#{$max-width} + calc(6 * #{$gutter-width}));