From 99b9dcad5c01c81f1a2f266689bd2a2eb646ecff Mon Sep 17 00:00:00 2001
From: Patrick Neff <odie86@gmail.com>
Date: Sun, 5 May 2019 08:57:28 +0200
Subject: [PATCH] Start template update to new flexbox grid system

---
 themes/neff/layouts/_default/li.html      |   4 +-
 themes/neff/layouts/_default/list.html    |   6 +-
 themes/neff/layouts/index.html            |  19 +-
 themes/neff/layouts/partials/address.html |   2 +-
 themes/neff/layouts/partials/footer.html  |  12 +-
 themes/neff/layouts/partials/news.html    |   2 +-
 themes/neff/layouts/partials/single.html  |   4 +-
 themes/neff/src/scss/_banner.scss         |   2 +-
 themes/neff/src/scss/_flexgrid.scss       | 420 ++++++++++++++++++++++
 themes/neff/src/scss/_footer.scss         |   2 -
 themes/neff/src/scss/_grid.scss           | 100 +-----
 themes/neff/src/scss/_header.scss         |  25 +-
 themes/neff/src/scss/_index.scss          |   9 +-
 themes/neff/src/scss/_mixins.scss         |   2 +-
 themes/neff/src/scss/_single.scss         |  23 --
 themes/neff/src/scss/_variables.scss      |   7 +-
 themes/neff/src/scss/main.scss            |   1 +
 17 files changed, 471 insertions(+), 169 deletions(-)
 create mode 100644 themes/neff/src/scss/_flexgrid.scss

diff --git a/themes/neff/layouts/_default/li.html b/themes/neff/layouts/_default/li.html
index 3798075..86c36d4 100755
--- a/themes/neff/layouts/_default/li.html
+++ b/themes/neff/layouts/_default/li.html
@@ -1,6 +1,6 @@
 {{- $currentPage := . -}}
-<li class="padding">
-    <div class="flex column">
+<li class="col-sm-12">
+    <div>
         <div>
             {{- range $.Resources.ByType "image" -}}
                 {{- if .Params.featured -}}
diff --git a/themes/neff/layouts/_default/list.html b/themes/neff/layouts/_default/list.html
index 24e8bca..298fdfe 100755
--- a/themes/neff/layouts/_default/list.html
+++ b/themes/neff/layouts/_default/list.html
@@ -5,13 +5,13 @@
 {{ define "main" }}
 <main id="list">
     {{- with .Content -}}
-        <div class="content flex column">
-            <div class="padding">
+        <div class="content row">
+            <div class="col-xs-12">
                 {{ . }}
             </div>
         </div>
     {{- end -}}
-    <ul class="list-unstyled flex column">
+    <ul class="list-unstyled row">
         {{- range .Pages -}}
             {{- .Render "li" -}}
         {{- end -}}
diff --git a/themes/neff/layouts/index.html b/themes/neff/layouts/index.html
index 0c6e842..4fa3337 100755
--- a/themes/neff/layouts/index.html
+++ b/themes/neff/layouts/index.html
@@ -1,8 +1,8 @@
 {{ define "content" }}
     <div id="index">
         <div class="container transparent">
-            <div class="flex row">
-                <div id="index-short-contact">
+            <div class="row">
+                <div class="col-offset-xs-8 col-xs-4" id="index-short-contact">
                     <div class="phone">
                         <i class="fa fa-phone"></i>: {{ (index .Site.Data.kontakt.kontakt 0).telephone }}
                     </div>
@@ -21,7 +21,7 @@
         <div class="container">
             <main>
                 <article>
-                    <div class="lead padding" id="index-content">
+                    <div class="lead" id="index-content">
                         <a id="{{ i18n "home" }}"></a>
                         <h1 id="index-title">{{ .Title }}</h1>
                         {{ . }}
@@ -34,9 +34,9 @@
         <div class="container">
             <section id="index-hero">
                 <a class="anchor" id="{{ i18n "about-us" }}"><h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1></a>
-                <div class="flex row">
+                <div class="row">
                     {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "ueber-uns")) -}}
-                        <div>
+                        <div class="col-xs-4">
                             {{- partial "hero.html" . -}}
                         </div>
                     {{- end -}}
@@ -53,7 +53,7 @@
                             <a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
                         </div>
                     </div>
-                    <div class="flex row">
+                    <div class="row">
                         {{- $site := . }}
                         {{- range .Site.Data.kontakt.kontakt -}}
                             {{- partial "address.html" (dict "address" . "ctx" $site) -}}
@@ -69,9 +69,9 @@
                     <a class="anchor" href="/galerie" id="{{ i18n "gallery" }}">{{ i18n "gallery" | title}}</a>
                     <span class="small"></span>
                 </h1>
-                <ul class="flex row list-unstyled">
+                <ul class="row list-unstyled">
                     {{- range .Params.galleries }}
-                        <li class="padding">
+                        <li class="col-xs-4">
                             {{- $section := $.Site.GetPage "section" "galerie" -}} 
                             {{- $page := $section.GetPage . -}} 
                             {{- $image := ((index $page.Pages 0).Resources.GetMatch "**.jpg") -}} 
@@ -90,7 +90,7 @@
         <div class="container">
             <section id="index-news">
                 <h1 class="padding"><a class="anchor" href="/neuigkeiten" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
-                <ul class="list-unstyled flex row">
+                <ul class="list-unstyled row">
                     {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
                         {{- partial "news.html" . -}}
                     {{- end -}}
@@ -111,4 +111,5 @@
             </div>
         {{- end -}}
     </div>
+
 {{ end }}
diff --git a/themes/neff/layouts/partials/address.html b/themes/neff/layouts/partials/address.html
index 99b5064..ca0b8dd 100755
--- a/themes/neff/layouts/partials/address.html
+++ b/themes/neff/layouts/partials/address.html
@@ -1,4 +1,4 @@
-<section class="address padding">
+<section class="address col-xs-4">
     <header>
         <h3>{{ .address.address.addressLocality }}</h3>
     </header>
diff --git a/themes/neff/layouts/partials/footer.html b/themes/neff/layouts/partials/footer.html
index 5776d7c..a8e9e90 100755
--- a/themes/neff/layouts/partials/footer.html
+++ b/themes/neff/layouts/partials/footer.html
@@ -1,14 +1,14 @@
 {{- if (ne .Kind "home") -}}
     <div class="container">
-        <section id="index-contact">
-            <div>
+        <section class="row" id="index-contact">
+            <div class="col-xs-12">
                 <h2 class="padding"><a class="anchor" id="{{ i18n "contact" }}">Kontakt</a></h2>
                 <div class="call-to-action flex row text-center">
                     <div class="padding">
                         <a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
                     </div>
                 </div>
-                <div class="flex row">
+                <div class="row">
                     {{- $site := . }}
                     {{- range .Site.Data.kontakt.kontakt -}}
                         {{- partial "address.html" (dict "address" . "ctx" $site) -}}
@@ -19,15 +19,17 @@
     </div>
 {{- end }}
 <div class="container bottom">
-        <div id="footer-social" class="padding"> 
+        <div clss="row" id="footer-social" class="padding"> 
+          <div class="col-xs-12">
             {{- partial "social.html" . -}}
+          </div>
         </div>    
         <nav class="padding">
             {{- $currentPage := . -}}
             {{- range .Site.Menus.footer -}}
             <ul>
                 {{- if .HasChildren -}}
-                    <li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
+                    <li class="col-xs-4 {{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
                         <a href="{{ .URL }}">
                             {{ .Pre }}
                             <span>{{ .Name }}</span>
diff --git a/themes/neff/layouts/partials/news.html b/themes/neff/layouts/partials/news.html
index e82543e..36bc317 100755
--- a/themes/neff/layouts/partials/news.html
+++ b/themes/neff/layouts/partials/news.html
@@ -1,4 +1,4 @@
-<li class="padding">
+<li class="col-xs-4">
     <div>
         {{- $site := . -}}
         {{- range .Resources.ByType "image" -}}
diff --git a/themes/neff/layouts/partials/single.html b/themes/neff/layouts/partials/single.html
index 31b2d51..8952dfd 100755
--- a/themes/neff/layouts/partials/single.html
+++ b/themes/neff/layouts/partials/single.html
@@ -3,8 +3,8 @@
 </header>
 {{- $resources := .Resources -}}
 {{- with .Content -}}
-    <div class="content flex column">
-        <div class="padding">
+    <div class="content row">
+        <div class="col-sm-12">
             {{- range $.Resources.ByType "image" -}}
                 {{- if .Params.featured -}}
                     {{- $orig := . -}}
diff --git a/themes/neff/src/scss/_banner.scss b/themes/neff/src/scss/_banner.scss
index 44fd5b3..a628514 100644
--- a/themes/neff/src/scss/_banner.scss
+++ b/themes/neff/src/scss/_banner.scss
@@ -25,7 +25,7 @@
         margin: 1rem 0 0;
     }
 }
-@media only screen and (min-width: $media-query) {
+@media only screen and (min-width: $sm-min) {
     #banner {
         top: 155px;
     }
diff --git a/themes/neff/src/scss/_flexgrid.scss b/themes/neff/src/scss/_flexgrid.scss
new file mode 100644
index 0000000..0abee45
--- /dev/null
+++ b/themes/neff/src/scss/_flexgrid.scss
@@ -0,0 +1,420 @@
+/* VARIABLES */
+
+$gutter-width: 0.5rem !default;
+$outer-margin: 2rem !default;
+
+$xs-min: 30rem !default;
+$sm-min: 48rem !default;
+$lg-min: 64rem !default;
+$xl-min: 75rem !default;
+
+/* CALCULATED VARIABLES */
+
+$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%, 5 41.66666667%,  6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%, 11 91.66666667%,  12 100%;
+
+$half-gutter-width: $gutter-width * 0.5;
+$gutter-compensation: $half-gutter-width * -1;
+
+/* GRID */
+
+@mixin flex() {
+    box-sizing: border-box;
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+}
+
+@mixin col($size) {
+    flex-basis: $size;
+    max-width: $size;
+}
+
+@mixin offset($size) {
+    margin-left: $size;
+}
+
+.container,
+.container-fluid {
+    margin: 0 auto;
+}
+
+.container-fluid {
+    padding: 0 $outer-margin;
+}
+
+.row {
+    @include flex();
+    flex-direction: row;
+    margin: $gutter-compensation 0;
+
+    &.reverse {
+        flex-direction: row-reverse;
+    }
+}
+
+.column {
+    @include flex();
+    flex-direction: column;
+
+    &.reverse {
+        flex-direction: row-column;
+    }
+}
+
+/* XS */
+
+.col-xs,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-offset-xs-1,
+.col-offset-xs-2,
+.col-offset-xs-3,
+.col-offset-xs-4,
+.col-offset-xs-5,
+.col-offset-xs-6,
+.col-offset-xs-7,
+.col-offset-xs-8,
+.col-offset-xs-9,
+.col-offset-xs-10,
+.col-offset-xs-11,
+.col-offset-xs-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding: 0 $half-gutter-width;
+}
+
+.col-xs {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+}
+
+@each $i, $x in $breakpoints {
+    .col-xs-#{$i} {
+        @include col($x);
+    }
+}
+
+@each $i, $x in $breakpoints {
+    .col-offset-xs-#{$i} {
+        @include offset($x);
+    }
+}
+
+.start-xs {
+    justify-content: flex-start;
+    text-align: start;
+}
+
+.center-xs {
+    justify-content: center;
+    text-align: center;
+}
+
+.end-xs {
+    justify-content: flex-end;
+    text-align: end;
+}
+
+.top-xs {
+    align-items: flex-start;
+}
+
+.middle-xs {
+    align-items: center;
+}
+
+.bottom-xs {
+    align-items: flex-end;
+}
+
+.around-xs {
+    justify-content: space-around;
+}
+
+.between-xs {
+    justify-content: space-between;
+}
+
+/* SM */
+
+@media only screen and (min-width: $sm-min) {
+    .container {
+        width: $sm-min;
+    }
+
+    .col-sm,
+    .col-sm-1,
+    .col-sm-2,
+    .col-sm-3,
+    .col-sm-4,
+    .col-sm-5,
+    .col-sm-6,
+    .col-sm-7,
+    .col-sm-8,
+    .col-sm-9,
+    .col-sm-10,
+    .col-sm-11,
+    .col-sm-12,
+    .col-offset-sm-1,
+    .col-offset-sm-2,
+    .col-offset-sm-3,
+    .col-offset-sm-4,
+    .col-offset-sm-5,
+    .col-offset-sm-6,
+    .col-offset-sm-7,
+    .col-offset-sm-8,
+    .col-offset-sm-9,
+    .col-offset-sm-10,
+    .col-offset-sm-11,
+    .col-offset-sm-12 {
+        box-sizing: border-box;
+        flex: 0 0 auto;
+        padding: $half-gutter-width 0;
+    }
+
+    .col-sm {
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+
+    @each $i, $x in $breakpoints {
+        .col-sm-#{$i} {
+            @include col($x);
+        }
+    }
+
+    @each $i, $x in $breakpoints {
+        .col-offset-sm-#{$i} {
+            @include offset($x);
+        }
+    }
+
+    .start-sm {
+        justify-content: flex-start;
+        text-align: start;
+    }
+
+    .center-sm {
+        justify-content: center;
+        text-align: center;
+    }
+
+    .end-sm {
+        justify-content: flex-end;
+        text-align: end;
+    }
+
+    .top-sm {
+        align-items: flex-start;
+    }
+
+    .middle-sm {
+        align-items: center;
+    }
+
+    .bottom-sm {
+        align-items: flex-end;
+    }
+
+    .around-sm {
+        justify-content: space-around;
+    }
+
+    .between-sm {
+        justify-content: space-between;
+    }
+}
+
+/* LG */
+
+@media only screen and (min-width: $lg-min) {
+    .container {
+        width: $lg-min;
+    }
+
+    .col-lg,
+    .col-lg-1,
+    .col-lg-2,
+    .col-lg-3,
+    .col-lg-4,
+    .col-lg-5,
+    .col-lg-6,
+    .col-lg-7,
+    .col-lg-8,
+    .col-lg-9,
+    .col-lg-10,
+    .col-lg-11,
+    .col-lg-12,
+    .col-offset-lg-1,
+    .col-offset-lg-2,
+    .col-offset-lg-3,
+    .col-offset-lg-4,
+    .col-offset-lg-5,
+    .col-offset-lg-6,
+    .col-offset-lg-7,
+    .col-offset-lg-8,
+    .col-offset-lg-9,
+    .col-offset-lg-10,
+    .col-offset-lg-11,
+    .col-offset-lg-12 {
+        box-sizing: border-box;
+        flex: 0 0 auto;
+        padding: $half-gutter-width 0;
+    }
+
+    .col-lg {
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+
+    @each $i, $x in $breakpoints {
+        .col-lg-#{$i} {
+            @include col($x);
+        }
+    }
+
+    @each $i, $x in $breakpoints {
+        .col-offset-lg-#{$i} {
+            @include offset($x);
+        }
+    }
+
+    .start-lg {
+        justify-content: flex-start;
+        text-align: start;
+    }
+
+    .center-lg {
+        justify-content: center;
+        text-align: center;
+    }
+
+    .end-lg {
+        justify-content: flex-end;
+        text-align: end;
+    }
+
+    .top-lg {
+        align-items: flex-start;
+    }
+
+    .middle-lg {
+        align-items: center;
+    }
+
+    .bottom-lg {
+        align-items: flex-end;
+    }
+
+    .around-lg {
+        justify-content: space-around;
+    }
+
+    .between-lg {
+        justify-content: space-between;
+    }
+}
+
+/* XL */
+
+@media only screen and (min-width: $xl-min) {
+    .container {
+        width: $xl-min;
+    }
+
+    .col-xl,
+    .col-xl-1,
+    .col-xl-2,
+    .col-xl-3,
+    .col-xl-4,
+    .col-xl-5,
+    .col-xl-6,
+    .col-xl-7,
+    .col-xl-8,
+    .col-xl-9,
+    .col-xl-10,
+    .col-xl-11,
+    .col-xl-12,
+    .col-offset-xl-1,
+    .col-offset-xl-2,
+    .col-offset-xl-3,
+    .col-offset-xl-4,
+    .col-offset-xl-5,
+    .col-offset-xl-6,
+    .col-offset-xl-7,
+    .col-offset-xl-8,
+    .col-offset-xl-9,
+    .col-offset-xl-10,
+    .col-offset-xl-11,
+    .col-offset-xl-12 {
+        box-sizing: border-box;
+        flex: 0 0 auto;
+        padding: $half-gutter-width 0;
+    }
+
+    .col-xl {
+        flex-grow: 1;
+        flex-basis: 0;
+        max-width: 100%;
+    }
+
+    @each $i, $x in $breakpoints {
+        .col-xl-#{$i} {
+            @include col($x);
+        }
+    }
+
+    @each $i, $x in $breakpoints {
+        .col-offset-xl-#{$i} {
+            @include offset($x);
+        }
+    }
+
+    .start-xl {
+        justify-content: flex-start;
+        text-align: start;
+    }
+
+    .center-xl {
+        justify-content: center;
+        text-align: center;
+    }
+
+    .end-xl {
+        justify-content: flex-end;
+        text-align: end;
+    }
+
+    .top-xl {
+        align-items: flex-start;
+    }
+
+    .middle-xl {
+        align-items: center;
+    }
+
+    .bottom-xl {
+        align-items: flex-end;
+    }
+
+    .around-xl {
+        justify-content: space-around;
+    }
+
+    .between-xl {
+        justify-content: space-between;
+    }
+}
\ No newline at end of file
diff --git a/themes/neff/src/scss/_footer.scss b/themes/neff/src/scss/_footer.scss
index cabacb2..6b2fa87 100644
--- a/themes/neff/src/scss/_footer.scss
+++ b/themes/neff/src/scss/_footer.scss
@@ -16,7 +16,6 @@
                 padding: 0;
                 margin: 0;
                 padding-left: 0;
-                min-width: $min-column-width;
 
                 .sub-menu {
                     @include menu-list(column);
@@ -24,7 +23,6 @@
                     padding: 0;
 
                     li {
-                        min-width: $min-column-width;
                         padding: 0;
 
                     }
diff --git a/themes/neff/src/scss/_grid.scss b/themes/neff/src/scss/_grid.scss
index e9006f0..2bb3142 100644
--- a/themes/neff/src/scss/_grid.scss
+++ b/themes/neff/src/scss/_grid.scss
@@ -110,7 +110,7 @@ em {
 
 
 
-@media only screen and (min-width: $media-query) {
+@media only screen and (min-width: $sm-min) {
     body {
         padding: 155px 0 0 0;
     }
@@ -181,40 +181,23 @@ table {
 }
 
 .container {
-    width: calc(100% - calc(6 * #{$gutter-width}));
-    margin: 0 auto;
-    padding: $gutter-width;
-    background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: $border-radius;
+  margin-bottom: $gutter-width;
 
     &.transparent {
         background-color: transparent;
     }
 }
 
-.flex {
-    display: flex;
-}
-
-
-@media only screen and (min-width: $media-query) {
-    .container {
-        width: calc(#{$max-width} + calc(2 * #{$gutter-width}));
-    }
-}
-
-.row {
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-.column {
-    flex-direction: column;
-}
-
-.padding {
-    padding: $gutter-width / 2;
-    margin: $gutter-width / 2;
+/*
+.container {
+    width: calc(100% - calc(6 * #{$gutter-width}));
+    margin: 0 auto;
+    padding: $gutter-width;
+    background-color: rgba(255, 255, 255, 0.9);
 }
+*/
 
 .news-featured-image {
     img {
@@ -273,19 +256,12 @@ figure.small {
 .left {
     float: left;
     margin-right: $gutter-width;
-}
-
-figure.left {
-    margin-right: $gutter-width;
-    max-width: $min-column-width;
     padding: 0.5rem 0;
-    float: left
 }
 
-figure.right {
+.right {
     float: right;
     margin-left: $gutter-width;
-    max-width: $min-column-width;
     padding: 0.5rem 0;
 }
 
@@ -361,10 +337,6 @@ figure {
     }
 }
 
-.neg-margin {
-    margin: 0 calc(0 - #{$gutter-width}) 0;
-}
-
 .btn {
     padding: .5rem 2rem;
     border: 1px solid black;
@@ -443,54 +415,6 @@ a.btn-primary {
     }
 }
 
-.container {
-    margin-bottom: $gutter-width;
-    border-radius: $border-radius;
-}
-
-.flex {
-    justify-content: start;
-
-    & > * {
-        flex: 1 1 0;
-        min-width: $min-column-width;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        min-width: 100%;
-    }
-}
-
-@media only screen and (min-width: $media-query) {
-    .flex {
-        & > * {
-            min-width: $min-column-width-desktop;
-        }
-
-        p {
-            max-width: 90%;
-        }
-
-        &.gallery {
-            li {
-                max-width: calc(#{$min-column-width-desktop} + calc(3 * #{$gutter-width}));
-            }
-        }
-    }
-}
-
-  .model-viewer {
-    width: $min-column-width * 2 ;
-    height: $min-column-width * 2 / 1.333;
-  }
-
-@media screen and (min-width: 500px) {
-      .model-viewer {
-        width: $min-column-width-desktop * 2;
-        height: $min-column-width-desktop * 2 / 1.333;
-      }
-}
-
 nav.breadcrumbs {
   ol {
     list-style: none;
diff --git a/themes/neff/src/scss/_header.scss b/themes/neff/src/scss/_header.scss
index 92a13d3..8b6838c 100644
--- a/themes/neff/src/scss/_header.scss
+++ b/themes/neff/src/scss/_header.scss
@@ -21,7 +21,7 @@
             }
         }
 
-        @media only screen and (min-width: $media-query) {
+        @media only screen and (min-width: $sm-min) {
             .navbar-logo {
                 img {
                     transition: $transition-time * 1.5;
@@ -45,7 +45,7 @@
             }
         }
 
-        @media only screen and (min-width: $media-query) {
+        @media only screen and (min-width: $sm-min) {
             .navbar-logo {
                 img {
                     max-height: 100px;
@@ -73,15 +73,13 @@
     }
 
     .navbar {
-        @extend .flex;
-        @extend .column;
         justify-content: space-between;
         align-items: stretch;
         padding: 0 $gutter-width;
         flex: 1 0 0;
         min-width: 0;
 
-        @media only screen and (min-width: $media-query) {
+        @media screen and (min-width: $sm-min) {
             max-width: none;
         }
 
@@ -171,25 +169,18 @@
         .navbar-container {
             margin-top: auto;
             min-width: 0;
+            height: 100%;
 
             nav {
-                @extend .flex;
-                @extend .column;
-                align-items: flex-end;
                 height: 100%;
-
-
-                @media only screen and (min-width: $media-query) {
-                    & {
-                        justify-content: flex-end;
-                        align-items: flex-end;
-                    }
-
+                @media only screen and (min-width: $sm-min) {
                     ul {
                         @include menu-list(row);
 
                         align-items: flex-end;
+                        justify-content: flex-end;
                         height: 100%;
+                        display: flex;
 
                         li {
                             font-size: 1.1rem;
@@ -200,7 +191,7 @@
             }
         }
 
-        @media only screen and (min-width: $media-query) {
+        @media only screen and (min-width: $sm-min) {
             input[type=checkbox] {
                 display: none;
 
diff --git a/themes/neff/src/scss/_index.scss b/themes/neff/src/scss/_index.scss
index 18e942a..be734a3 100644
--- a/themes/neff/src/scss/_index.scss
+++ b/themes/neff/src/scss/_index.scss
@@ -31,14 +31,11 @@
         overflow: hidden;
         min-width: 100%;
 
-        @media only screen and (min-width: $media-query) {
+        @media only screen and (min-width: $sm-min) {
             margin-top: calc(100vh - 285px);
             margin-bottom: -$gutter-width;
-            margin-left: calc(#{$gutter-width} + calc(2 * calc(#{$max-width} / 3)));
             margin-right: -$gutter-width;
             padding-right: $gutter-width;
-            max-width: calc(#{$max-width} / 3);
-            min-width: calc(#{$max-width} / 3);
         }
 
         ul {
@@ -54,10 +51,6 @@
                 font-size: 2rem;
             }
         }
-
-        & > * {
-            flex: 1 0 0;
-        }
     }
 
     #index-contact {
diff --git a/themes/neff/src/scss/_mixins.scss b/themes/neff/src/scss/_mixins.scss
index dfc5cd8..ac1db16 100644
--- a/themes/neff/src/scss/_mixins.scss
+++ b/themes/neff/src/scss/_mixins.scss
@@ -40,7 +40,7 @@
             background-image: url(#{$background-image});
         }
 
-        @media only screen and (max-width: 800px) {
+        @media only screen and (max-width: $sm-min) {
             &.background-default {
                 background-position-x: 37%;
             }
diff --git a/themes/neff/src/scss/_single.scss b/themes/neff/src/scss/_single.scss
index 262576d..2b04f1c 100644
--- a/themes/neff/src/scss/_single.scss
+++ b/themes/neff/src/scss/_single.scss
@@ -7,7 +7,6 @@
     }
 
     .featured {
-        max-width: $min-column-width;
         height: auto;
         display: inline-block;
         margin-bottom: 1rem;
@@ -37,28 +36,6 @@
     }
 }
 
-@media screen and (min-width: 500px) {
-    #single {
-        .featured {
-            max-width: $min-column-width-desktop;
-
-          &.wide {
-            max-width: $min-column-width-desktop * 2;
-          }
-        }
-    }
-}
-
-@media screen and (min-width: $media-query) {
-    figure.left {
-        max-width: $min-column-width-desktop;
-    }
-
-    figure.right {
-        max-width: $min-column-width-desktop;
-    }
-}
-
 .catalog {
   p {
     font-size: 1.2rem;
diff --git a/themes/neff/src/scss/_variables.scss b/themes/neff/src/scss/_variables.scss
index c6c6b49..d170e58 100755
--- a/themes/neff/src/scss/_variables.scss
+++ b/themes/neff/src/scss/_variables.scss
@@ -1,7 +1,4 @@
-$max-width: 900px;
-$gutter-width: 10px;
-$min-column-width: 200px;
-$min-column-width-desktop: $min-column-width + (6 * $gutter-width);
+$gutter-width: 1rem;
 
 $base-font-size: 16px;
 $base-line-height: 1.4em;
@@ -19,6 +16,4 @@ $border-radius: 5px;
 $background-default: "grabmal";
 $background-bau: "bau";
 
-$media-query: #{$max-width + 6 * $gutter-width};
-
 $fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
\ No newline at end of file
diff --git a/themes/neff/src/scss/main.scss b/themes/neff/src/scss/main.scss
index 1ffb61f..0166a53 100755
--- a/themes/neff/src/scss/main.scss
+++ b/themes/neff/src/scss/main.scss
@@ -11,6 +11,7 @@
 @import "~cookieconsent/src/styles/themes/classic.css";
 @import "_fonts.scss";
 @import "_mixins.scss";
+@import "_flexgrid.scss";
 @import "_grid.scss";
 @import "_header.scss";
 @import "_footer.scss";