Update theme

themes/neff/archetypes/bauen-und-wohnen.md

@@ -5,6 +5,7 @@ draft = true
 type = "gallery"
 alt = "Bildergallerie für {{ replace .Name "-" " " | title }}"
 description = "Bildergallerie für {{ replace .Name "-" " " | title }}"
+keywords = []
 
 [[resources]]
   title = "{{ replace .Name "-" " " | title }} #:counter"

themes/neff/archetypes/default.md

@@ -3,4 +3,5 @@ title = "{{ replace .Name "-" " " | title }}"
 date = "{{ .Date }}"
 draft = true
 type = "page"
+keywords = []
 +++

themes/neff/archetypes/grabmale.md

@@ -5,6 +5,7 @@ draft = true
 type = "gallery"
 alt = "Bildergallerie für {{ replace .Name "-" " " | title }}"
 description = "Bildergallerie für {{ replace .Name "-" " " | title }}"
+keywords = []
 
 [[resources]]
   title = "{{ replace .Name "-" " " | title }} #:counter"

themes/neff/archetypes/neuigkeiten.md

@@ -3,6 +3,7 @@ title = "{{ replace .Name "-" " " | title }}"
 date = "{{ .Date }}"
 draft = true
 type = "news"
+keywords = []
 
 [[resources]]
   title = "{{ replace .Name "-" " " | title }}"

themes/neff/assets/scss/_grid.scss

@@ -9,7 +9,7 @@ body {
     line-height: $base-line-height;
     display: flex;
     flex-direction: column;
-    padding: 155px 0 0 0;
+    padding: 105px 0 0 0;
     margin: 0;
     background-color: $background-color;
     background-size: 100%;
@@ -38,9 +38,6 @@ body {
     }
 }
 
-@media only screen and (min-width: $media-query) {
-}
-
 header { 
     margin: 0; 
 }
@@ -57,29 +54,59 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-    font-size: 1.8rem;
-}
-
-h2 {
     font-size: 1.6rem;
 }
 
-h3 {
-    font-size: 1.4;
+h2 {
+    font-size: 1.3rem;
 }
 
-h4 {
+h3 {
     font-size: 1.2rem;
 }
 
-h5 {
+h4 {
     font-size: 1.1rem;
 }
 
+h5 {
+    font-size: 1rem;
+}
+
 h6 {
     font-size: 1rem;
 }
 
+@media only screen and (min-width: $media-query) {
+    body {
+        padding: 155px 0 0 0;
+    }
+
+    h1 {
+        font-size: 1.8rem;
+    }
+
+    h2 {
+        font-size: 1.6rem;
+    }
+
+    h3 {
+        font-size: 1.4;
+    }
+
+    h4 {
+        font-size: 1.2rem;
+    }
+
+    h5 {
+        font-size: 1.1rem;
+    }
+
+    h6 {
+        font-size: 1rem;
+    }
+}
+
 a {
     text-decoration: none;
 
@@ -231,21 +258,6 @@ figure {
     }
 }
 
-.featured-image {
-    max-width: 300px;
-    height: auto;
-    float: left;
-    clear: both;
-
-    img {
-        width: 100%;
-    }
-
-    & + p {
-        margin-top: 0;
-    }
-}
-
 .btn {
     padding: .5rem 2rem;
     border: 1px solid black;
@@ -267,8 +279,31 @@ a.btn-primary {
 
 .call-to-action {
     min-height: 2rem;
+
+    div {
+        width: 100%;
+    }
 }
 
 .full-width {
     min-width: 100%;
+}
+
+.youtube {
+    width: 100%;
+    position: relative; 
+    padding-bottom: 56.25%; 
+    height: 0; 
+    overflow: hidden;
+    margin: $gutter-width 0;
+    border-radius: $border-radius;
+
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%; 
+        border:0;
+    }
 }

themes/neff/assets/scss/_index.scss

@@ -1,5 +1,5 @@
 #index-hero {
-    div {
+    .hero-container {
         text-align: center;
 
         img.hero {
@@ -61,3 +61,13 @@
         flex: 1 0 0;
     }
 }
+
+#index-gallery {
+    figure {
+        text-align: center;
+
+        figcaption {
+            text-align: left;
+        }
+    }
+}

themes/neff/assets/scss/_lightbox.scss

@@ -39,13 +39,19 @@
             flex: 1 0 0;
             text-align: center;
             vertical-align: center;
+            margin: 0;
+            padding: 0;
 
             .image-container {
                 position: relative;
+                margin: 0;
+                padding: 0;
 
                 img {
+                    margin: 0;
+                    padding: 0;
                     max-height: calc(90vh - calc(8 * #{$gutter-width}));
-                    max-width: calc(90vw - calc(6 * #{$gutter-width}));
+                    max-width: calc(90vw - calc(4 * #{$gutter-width}));
                 }
             }
         }

themes/neff/assets/scss/_single.scss

@@ -9,4 +9,28 @@
             font-size: 0.8rem;
         }
     }
+
+    .featured {
+        max-width: $min-column-width;
+        height: auto;
+        float: none;
+        margin-bottom: 1rem;
+
+        img {
+            width: 100%;
+        }
+
+        & + p {
+            margin-top: 0;
+        }
+    }
+}
+
+@media screen and (min-width: 500px) {
+    #single {
+        .featured {
+            max-width: $min-column-width-desktop;
+            float: left;
+        }
+    }
 }

themes/neff/layouts/index.html

@@ -32,7 +32,7 @@
         {{- end -}}
 
         <div class="container">
-            <section id="index-about">
+            <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">
                     {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "ueber-uns")) -}}

themes/neff/layouts/partials/hero.html

@@ -1,4 +1,4 @@
-<div class="padding">
+<div class="padding hero-container">
     <img src="img/hero/{{ .Params.icon }}.svg" class="hero" alt="Hero {{ .Title }}">
     <header>
         <h2>{{ .Title }}</h2>

themes/neff/layouts/partials/img.html

@@ -6,10 +6,10 @@
 {{- with .ctx.Params.alt -}}
     {{- $alt = . -}}
 {{- end -}}
-{{- $imageSm := .image.Fill "225x225 Top" -}}
-{{- $imageMd := .image.Fill "400x400 Top" -}}
+{{- $imageSm := .image.Fill "300x300 Top" -}}
+{{- $imageMd := .image.Fill "500x500 Top" -}}
 <img alt="{{ $alt }}" 
     title="{{ $title }}"
-    srcset="{{ $imageSm.RelPermalink }} 225w, {{ $imageMd.RelPermalink }} 400w"
-    sizes="(max-width: 350px) 225w, 400w"
+    srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
+    sizes="(max-width: 500px) 300w, 500w"
     src="{{ $imageMd.RelPermalink }}" />

themes/neff/layouts/partials/lightbox.html

@@ -9,8 +9,8 @@
             </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>&nbsp;
-                    <a class="lightbox-next"><div class="lightbox-nav-next"><div><i class="fa fa-chevron-right"></div></div></i></a>&nbsp;
+                    <a class="lightbox-prev"><div class="lightbox-nav-prev"><div><i class="fa fa-chevron-left"></div></i></div></a>
+                    <a class="lightbox-next"><div class="lightbox-nav-next"><div><i class="fa fa-chevron-right"></div></div></i></a>
                     <img src="#" alt="image">
                 </div>
             </div>