Theme update

themes/neff/assets/scss/_content.scss

@@ -1,39 +1,3 @@
 #content {
     flex: 1 1 0;
-
-    .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(2 * #{$gutter-width}));
-                }
-            }
-        }
-    }
 }

themes/neff/assets/scss/_footer.scss

@@ -1,24 +1,19 @@
 #footer {
-    .container.bottom {
+    nav {
-        border-radius: $border-radius $border-radius 0 0;
+        display: flex;
-        margin-bottom: 0;
+        flex-direction: row;
-    }
-
-    .container {
-        margin-bottom: $gutter-width;
-        border-radius: $border-radius;
-    }
-    #footer-menu {
-        @include menu-list(row);
         align-items: flex-end;
-        margin: 0;
-        padding: 0;
         flex-wrap: wrap;
 
+        ul {
+            @include menu-list(row);
+            flex: 1 1 0;
+            height: 100%;
+
             li {
                 flex: 1 0 0;
                 width: 100%;
-            padding: $gutter-width 0 0 0;
+                padding: 0;
                 margin: 0;
                 min-width: $min-column-width;
 
@@ -34,7 +29,7 @@
                 }
             }
         }
-
+    }
     #footer-social {
         ul {
             @include menu-list(row);

themes/neff/assets/scss/_grid.scss

@@ -260,6 +260,20 @@ figure.small {
     }
 }
 
+figure.left {
+    float: left;
+    margin-right: $gutter-width;
+    max-width: $min-column-width;
+    padding: 0.5rem 0;
+}
+
+figure.right {
+    float: right;
+    margin-left: $gutter-width;
+    max-width: $min-column-width;
+    padding: 0.5rem 0;
+}
+
 img.original {
     width: auto !important;
     max-width: 100%
@@ -327,3 +341,39 @@ a.btn-primary {
         border:0;
     }
 }
+
+.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(2 * #{$gutter-width}));
+            }
+        }
+    }
+}

themes/neff/assets/scss/_header.scss

@@ -11,10 +11,11 @@
         transition: $transition-time;
 
         .navbar-logo {
-            flex: 1 1 0;
+            flex: 0 1 0;
+            min-width: 100px;
 
             img {
-                max-height: 30px;
+                max-height: 25px;
                 transition: $transition-time * 1.5;
                 width: auto;
             }
@@ -34,7 +35,8 @@
         transition: $transition-time;
 
         .navbar-logo {
-            flex: 1 1 0;
+            flex: 0 1 0;
+            min-width: 100px;
 
             img {
                 max-height: 50px;
@@ -67,6 +69,7 @@
     
     .container {
         border-radius: 0 0 $border-radius $border-radius;
+        margin-bottom: 0;
     }
 
     .navbar {
@@ -74,8 +77,9 @@
         @extend .column;
         justify-content: space-between;
         align-items: stretch;
-        max-width: 40px;
         padding: 0 $gutter-width;
+        flex: 1 0 0;
+        min-width: 0;
 
         @media only screen and (min-width: $media-query) {
             max-width: none;
@@ -86,11 +90,16 @@
 
             & + label {
                 display: block;
+                margin-left: auto;
                 margin-top: $gutter-width;
-                margin-right: calc(2 * #{$gutter-width});
+                max-width: 35px;
+                max-height: 35px;
+                min-width: 35px;
+                min-height: 35px;
 
-                div {
+                .toggler {
                     position: relative;
+                    display: block;
                     cursor: pointer;
                     width: 35px;
                     height: 30px;
@@ -157,21 +166,15 @@
             }
         }
 
-        .navbar {
-            flex: 1 1 0;
-            @extend .flex;
-            @extend .column;
-            justify-content: end;
-            align-items: end;
-        }
-
         .navbar-container {
             margin-top: auto;
+            min-width: 0;
 
             nav {
                 @extend .flex;
                 @extend .column;
                 align-items: flex-end;
+                height: 100%;
 
 
                 @media only screen and (min-width: $media-query) {
@@ -182,7 +185,6 @@
 
                     ul {
                         @include menu-list(row);
-                        @include trim-list-margin-horizontal;
 
                         align-items: flex-end;
                         height: 100%;
@@ -208,6 +210,14 @@
                     }
                 }
             }
+
+            ul:last-child {
+                li {
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
         }
     }
 }

themes/neff/assets/scss/_index.scss

@@ -1,3 +1,4 @@
+#content {
     #index-hero {
         .hero-container {
             text-align: center;
@@ -33,8 +34,11 @@
         @media only screen and (min-width: $media-query) {
             margin-top: calc(100vh - 285px);
             margin-bottom: -$gutter-width;
-        margin-left: 67%;
+            margin-left: calc(#{$gutter-width} + calc(2 * calc(#{$max-width} / 3)));
-        max-width: 33%;
+            margin-right: -$gutter-width;
+            padding-right: $gutter-width;
+            max-width: calc(#{$max-width} / 3);
+            min-width: calc(#{$max-width} / 3);
         }
 
         ul {
@@ -71,3 +75,4 @@
             }
         }
     }
+}

themes/neff/assets/scss/_single.scss

@@ -1,8 +1,4 @@
 #single {
-    ul.gallery{
-        margin: -#{$gutter-width};
-    }
-
     .single-footer {
         p {
             margin: 0;
@@ -35,20 +31,6 @@
     }
 }
 
-figure.left {
-    float: left;
-    margin-right: $gutter-width;
-    max-width: $min-column-width;
-    padding: 0.5rem 0;
-}
-
-figure.right {
-    float: right;
-    margin-left: $gutter-width;
-    max-width: $min-column-width;
-    padding: 0.5rem 0;
-}
-
 @media screen and (min-width: $media-query) {
     figure.left {
         max-width: $min-column-width-desktop;

themes/neff/layouts/_default/baseof.html

@@ -9,28 +9,28 @@
     {{- block "head" . -}}{{- end -}}
     <body>
         <div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
-        <section id="header" class="large">
+        <div id="header" class="large">
             <div class="container">
                 {{- partial "header.html" . -}}
             </div>
-        </section>
+        </div>
         {{- if eq .Kind "home" -}}
             {{- partial "banner.html" . -}}
         {{- end -}}
         <div id="page-wrapper">
-            <section id="content">
+            <div id="content">
                 {{- block "content" . -}}
                     <div class="container">
                         {{- block "main" . -}}{{- end -}}
                     </div>
                 {{- end -}}
-            </section>
-            <section id="footer">
-                {{- partial "footer.html" . -}}
-            </section>
             </div>
-        <section id="lightbox-section">
+            <div id="footer">
-        </section>
+                {{- partial "footer.html" . -}}
+            </div>
+        </div>
+        <div id="lightbox-section">
+        </div>
         {{- partial "lightbox.html" . -}}
         {{- partial "scripts.html" . -}}
         {{- block "scripts" . -}}{{- end -}}

themes/neff/layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "content" }}
     <div id="index">
         <div class="container transparent">
-            <section class="flex row">
+            <div class="flex row">
                 <div id="index-short-contact">
                     <div class="phone">
                         <i class="fa fa-phone"></i>: {{ (index .Site.Data.kontakt.kontakt 0).telephone }}
@@ -14,7 +14,7 @@
                         {{ partial "social.html" . }}
                     </div>
                 </div>
-            </section>
+            </div>
         </div>
 
         {{- with .Content -}}
@@ -86,7 +86,7 @@
 
         <div class="container">
             <section id="index-news">
-                <h1 class="padding"><a class="anchor" id="{{ i18n "news" }}"></a>{{ i18n "news" | title}}</a></h1>
+                <h1 class="padding"><a class="anchor" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
                 <ul class="list-unstyled flex row">
                     {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
                         {{- partial "news.html" . -}}

themes/neff/layouts/partials/address.html

@@ -1,8 +1,8 @@
-<div class="padding">
+<section class="address padding">
-    <address class="address">
     <header>
         <h3>{{ .address.address.addressLocality }}</h3>
     </header>
+    <address class="address">
         {{ with .address.name }}<span>{{ . }}</span>{{ end }}
         <div>
             {{ with .address.address.streetAddress }}<span>{{ . }}</span><br>{{ end }}
@@ -45,4 +45,4 @@
         {{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }}
     </address>
     <a href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i class="fa fa-map"></i> Zum Routenplaner</a>
-</div>
+</section>

themes/neff/layouts/partials/footer.html

@@ -19,12 +19,29 @@
     </div>
 {{- end }}
 <div class="container bottom">
-    <div class="flex column">
         <div id="footer-social" class="padding"> 
             {{- partial "social.html" . -}}
         </div>    
-        <ul id="footer-menu">
+        <nav class="padding">
-            {{ partial "menu.html" (dict "menu" .Site.Menus.footer "ctx" .) }}
+            {{- $currentPage := . -}}
+            {{- range .Site.Menus.footer -}}
+            <ul>
+                {{- if .HasChildren -}}
+                    <li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
+                        <a href="{{ .URL }}">
+                            {{ .Pre }}
+                            <span>{{ .Name }}</span>
+                        </a>
+                        <ul class="sub-menu">
+                            {{- range .Children -}}
+                                {{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
+                            {{- end -}}
                         </ul>
-    </div>
+                    </li>
+                {{- else -}}
+                    {{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
+                {{- end -}}
+            </ul>
+            {{- end -}}
+        </nav>
 </div>

themes/neff/layouts/partials/header.html

@@ -4,16 +4,33 @@
             <picture>
                 <source srcset="/img/logo.svg"
                         media="(min-width: 960px)">
-                <img src="/img/logo-klein.svg" />
+                <img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
             </picture>
         </a>
     </div>
     <div class="navbar small">
-        <input type="checkbox" class="hamburger" id="top-navigation-checkbox" name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><div><span class="line"></span><span class="line"></span><span class="line"></span></div></label>
+        <input type="checkbox" class="hamburger" id="top-navigation-checkbox" name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span class="toggler"><span class="line"></span><span class="line"></span><span class="line"></span></span></label>
         <div class="navbar-container">
             <nav>
-                <ul class="menu-list">
+                <ul>
-                    {{ partial "menu.html" (dict "menu" .Site.Menus.main "ctx" .) }}
+                    {{- $currentPage := . -}}
+                    {{- range .Site.Menus.main -}}
+                        {{- if .HasChildren -}}
+                            <li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
+                                <a href="{{ .URL }}">
+                                    {{ .Pre }}
+                                    <span>{{ .Name }}</span>
+                                </a>
+                                <ul class="sub-menu">
+                                    {{- range .Children -}}
+                                        {{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
+                                    {{- end -}}
+                                </ul>
+                            </li>
+                        {{- else -}}
+                            {{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
+                        {{- end -}}
+                    {{- end -}}
                 </ul>
             </nav>
         </div>

themes/neff/layouts/partials/img.html

@@ -20,7 +20,7 @@
     <img alt="{{ $alt }}" 
         title="{{ $title }}"
         srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
-        sizes="(max-width: 500px) 300w, 500w"
+        sizes="(max-width: 500px) 300px, 500px"
         src="{{ $imageMd.RelPermalink }}" />
 {{ end }}
 {{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}

themes/neff/layouts/partials/lightbox.html

@@ -9,8 +9,16 @@
             </div>
             <div class="lightbox-image">
                 <div class="image-container">
-                    <a class="lightbox-prev"><div class="lightbox-nav-prev"><div><i class="fa fa-chevron-left"></div></i></div></a>
+                    <a class="lightbox-prev">
-                    <a class="lightbox-next"><div class="lightbox-nav-next"><div><i class="fa fa-chevron-right"></div></div></i></a>
+                        <div class="lightbox-nav-prev">
+                            <div><i class="fa fa-chevron-left"></i></div>
+                        </div>
+                    </a>
+                    <a class="lightbox-next">
+                        <div class="lightbox-nav-next">
+                            <div><i class="fa fa-chevron-right"></i></div>
+                        </div>
+                    </a>
                     <img src="#" alt="image">
                 </div>
             </div>

themes/neff/layouts/partials/menu.html

@@ -1,5 +1,6 @@
 {{- $currentPage := .ctx -}}
 {{- range .menu -}}
+<ul>
     {{- if .HasChildren -}}
         <li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
             <a href="{{ .URL }}">
@@ -15,4 +16,5 @@
     {{- else -}}
         {{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
     {{- end -}}
+</ul>
 {{- end -}}

themes/neff/layouts/partials/scripts.html

@@ -3,4 +3,4 @@
 </script>
 {{- $js := resources.Get "js/bundle.js" -}}
 {{- $js = $js | resources.Fingerprint -}}
-<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>