Update theme

content/bauen-und-wohnen/bad/index.md

@@ -26,28 +26,23 @@ description = "Bildergallerie von Badezimmern"
     alt = "Ein Rahmen mit Ablagefläche aus Himalaya Granit um einen Spiegel. Die Wände sind aus Paradieso Granit."
 
 [[resources]]
-  title = "Eckwaschtisch aus MATERIAL"
+  title = "Eckwaschtisch aus Azul Bahia"
   src = "bilder/bad-4.jpg"
   [resources.params]
-    alt = "Ein Waschtisch in einer Ecke in der auf beiden Seiten entlang des Waschtisches Spielgel angebracht sind. Das Waschbecken ist eine Glasschale die auf den Tisch aufgesetzt ist."
+    alt = "Ein Waschtisch in einer Ecke bei dem auf beiden Seiten entlang des Waschtisches Spielgel angebracht sind. Das Waschbecken ist eine Glasschale die auf den Tisch aufgesetzt ist."
 
 [[resources]]
-  title = "Waschbecken aus Findling"
+  title = "Waschbecken aus Flussfindling"
   src = "bilder/bad-5.jpg"
   [resources.params]
     alt = "Ein Waschbecken ausgehölt aus einem Findling. Das Becken selber ist vertieft in den Findling eingearbeitet und fein geschliffen."
+    description = "Ein Waschbecken ausgehölt aus einem Findling. Das Becken selber ist vertieft in den Findling eingearbeitet und fein geschliffen. [link](link)"
 
 [[resources]]
   title = "Waschtisch mit Waschbecken aus Findling"
   src = "bilder/bad-6.jpg"
   [resources.params]
     alt = "Ein Waschtisch mit aufgesetzem Waschbecken in Form eines Findlings. Das Becken selber ist fein geschliffen."
-
-[[resources]]
-  title = "Bad #:counter"
-  src = "bilder/**.jpg"
-  [resources.params]
-    alt = "Bild eines Badezimmers"
 +++
 
 {{<gallery "bilder/**.jpg">}}

themes/neff/assets/scss/_grid.scss

@@ -12,7 +12,7 @@ body {
     padding: 155px 0 0 0;
     margin: 0;
     background-color: $background-color;
-    background-image: url(/img/background.jpg);
+    background-image: url(#{$background-image});
     background-size: 100%;
     background-position: center;
     background-attachment: fixed;

themes/neff/assets/scss/_lightbox.scss

@@ -40,14 +40,19 @@
             text-align: center;
             vertical-align: center;
 
-            img {
+            .image-container {
-                max-height: calc(90vh - calc(8 * #{$gutter-width}));
+                position: relative;
-                max-width: calc(90vw - calc(6 * #{$gutter-width}));
+
+                img {
+                    max-height: calc(90vh - calc(8 * #{$gutter-width}));
+                    max-width: calc(90vw - calc(6 * #{$gutter-width}));
+                }
             }
         }
 
         .lightbox-footer {
             flex: 1 0 0;
+            z-index: 100000;
         }
 
         .lightbox-controls {
@@ -58,7 +63,8 @@
             position: absolute;
             right: 0;
             top: 0;
-            margin: $gutter-width
+            margin: $gutter-width;
+            z-index: 100000;
         }
 
         .lightbox-nav-prev,
@@ -67,8 +73,8 @@
             position: absolute;
             top: 0;
             width: 40%;
-            height: 90%;
+            height: 100%;
-            margin: 5% 0;
+            margin: 0;
             display: flex;
             flex-direction: row;
             align-items: center;

themes/neff/assets/scss/_variables.scss

@@ -14,4 +14,6 @@ $primary-color: #2d763a;
 
 $border-radius: 5px;
 
-$fa-font-path: "/fonts"
+$fa-font-path: "/fonts";
+
+$background-image: "/img/background.webp";

themes/neff/layouts/partials/figure.html

@@ -1,22 +1,25 @@
 {{- $title := .ctx.Title -}}
 {{- $alt := .ctx.Params.alt -}}
+{{- $description := .ctx.Params.description | markdownify -}}
 
-<a href="{{ .ctx.Permalink }}"{{- with .lightbox -}} data-lightbox data-title="{{ $title }}" data-alt="{{ $alt }}"{{- end -}}>
+<figure {{- with .class }} class="{{ . }}"{{- end -}}>
-    <figure {{- with .class }} class="{{ . }}"{{- end -}}>
+    <a href="{{ .ctx.Permalink }}"{{- with .lightbox }} data-lightbox{{- end -}}>
         {{- partial "img.html" (dict "image" .image "ctx" .ctx) -}}
-        {{ if (or .ShowDescription .showTitle ) }}
+    </a>
-            <figcaption class="description">
+    {{ if (or .ShowDescription .showTitle ) }}
-                {{- if .showTitle -}}
+        <figcaption class="description">
-                    <h3>{{ $title }}</h3>
+            {{- if .showTitle -}}
-                {{- end -}}
+                <h3>{{ $title }}</h3>
-                {{- if .showDescription -}}
+            {{- end -}}
-                        {{- with .ctx.Params.description -}}
+            {{- if .showDescription -}}
-                            {{- . -}}
+                <p>
-                        {{- else -}}
+                    {{- with $description -}}
-                            {{- $alt -}}
+                        {{- . -}}
-                        {{- end -}}
+                    {{- else -}}
-                {{- end -}}
+                        {{- $alt -}}
-            </figcaption>
+                    {{- end -}}
-        {{- end -}}
+                </p>
-    </figure>
+            {{- end -}}
-</a>
+        </figcaption>
+    {{- end -}}
+</figure>

themes/neff/layouts/partials/img.html

@@ -6,11 +6,10 @@
 {{- with .ctx.Params.alt -}}
     {{- $alt = . -}}
 {{- end -}}
-{{- $imageSm := .image.Fill "301x301 Top" -}}
+{{- $imageSm := .image.Fill "225x225 Top" -}}
-{{- $imageMd := .image.Fill "450x450 Top" -}}
+{{- $imageMd := .image.Fill "400x400 Top" -}}
-{{- $imageLg := .image.Fill "900x900 Top" -}}
 <img alt="{{ $alt }}" 
     title="{{ $title }}"
-    srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 450w, {{ $imageLg.RelPermalink }} 900w"
+    srcset="{{ $imageSm.RelPermalink }} 225w, {{ $imageMd.RelPermalink }} 400w"
-    sizes="(max-width: 40em) 50vw, 25vw"
+    sizes="(max-width: 350px) 225w, 400w"
     src="{{ $imageMd.RelPermalink }}" />

themes/neff/layouts/partials/lightbox.html

@@ -4,13 +4,15 @@
             <div class="lightbox-header">
                 <h1 class="lightbox-title">Title</h1>
                 <div class="lightbox-controls">
-                    <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-close"><i class="fa fa-times"></i></a>
                 </div>
             </div>
             <div class="lightbox-image">
-                <img src="#" alt="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;
+                    <img src="#" alt="image">
+                </div>
             </div>
             <div class="lightbox-footer">
             </div>

themes/neff/src/js/lightbox.js

@@ -9,10 +9,13 @@ class Lightbox {
     constructor(idx) {
         this.idx = idx
         this.element = images[idx];
+        this.figure = this.element.parentElement;
+        this.image = this.element.firstChild;
+        this.title = this.figure.querySelector('h3').innerHTML
+        this.description = this.figure.querySelector('.description p').innerHTML
 
         this.href = this.element.getAttribute('href')
-        this.alt = this.element.getAttribute('data-alt')
+        this.alt = this.image.getAttribute('alt')
-        this.title = this.element.getAttribute('data-title')
         this.template = template.cloneNode(true);
     }
 
@@ -45,7 +48,12 @@ class Lightbox {
         let title = lightbox.querySelector('.lightbox-title');
         let description = lightbox.querySelector('.lightbox-footer');
         title.innerHTML = this.title;
-        description.innerHTML = this.alt;
+        if (this.description !== null) {
+            description.innerHTML = this.description;
+        }
+        else {
+            description.innerHTML = this.alt;
+        }
     }
 
     addEventListeners() {