add beautiful images to vw page

content/projects/volkswagen-golf-iii-cabrio-1994/index.md

@@ -8,9 +8,7 @@ summary = "And now for something completely different: I'm going to fix up 1994
 
 Any of my friends or co-workers will tell you I'm a nerd. I like technical stuff. To get outside more, I decided my next technical challenge should be something that I do outdoors. The plan to convert a van into a camper was quickly dropped as I'm apparently the only person in the family who enjoys camping. I soon found that older Volkswagen Golf cars can be found for cheap, but will need work: precesily what I'm looking for. 
 
-![Featured](featured.jpg)
+{{< lightbox-img src="featured.jpg" lightbox="golf3" caption="Working on the rear brakes. There are jack stands under the car. (it\'s not resting on the wheel, thanks for asking)">}}
-
-_(There are jack stands under the car, it's not resting on the wheel, thanks for asking)_
 
 ## The car
 
@@ -103,5 +101,24 @@ I cannot do _everything_ myself because I lack the proper training or tools. Thi
 
 [^apk]: APK, _Algemene Periodieke Keuring_ Dutch periodical vehicle safety, roadworthyness and exhaust emissions inspection
 
-![Current status](/img/golf_3_pre_apk.jpg)
+{{< gallery-view >}}
 
+{{< lightbox-img src="golf_3_pre_apk.jpg" lightbox="golf3" caption="Showing off pre-inspection" >}}
+
+{{< lightbox-img src="22-07-10 13-07-51 0307.jpg" lightbox="golf3" caption="Nothing to see here (notice the large amounts of dripped WD-40 on the cardboard)" >}}
+
+{{< lightbox-img src="22-06-18 15-34-02 0168.jpg" lightbox="golf3" caption="That does not look new and shiny" >}}
+
+{{< lightbox-img src="22-07-01 16-41-59 0234.jpg" lightbox="golf3" caption="Out with the old\..." >}}
+
+{{< lightbox-img src="22-07-02 09-55-17 0236.jpg" lightbox="golf3" caption="\...and in with the new!" >}}
+
+{{< lightbox-img src="22-06-18 15-34-45 0170.jpg" lightbox="golf3" caption="Did anyone say coolant leak?" >}}
+
+{{< lightbox-img src="22-06-25 10-56-55 0214.jpg" lightbox="golf3" caption="Easy fix, fuel supply hose not tightend properly" >}}
+
+{{< lightbox-img src="22-07-17 09-58-14 0320.jpg" lightbox="golf3" caption="Out with the old\... and in with the new!" >}}
+
+{{< lightbox-img src="22-07-18 09-24-51 0340.jpg" lightbox="golf3" caption="The mechanic doing the wheel alignment was cursing like a saylor &mdash; and applying the necessary heat." >}}
+
+{{< /gallery-view >}}

layouts/shortcodes/gallery-view.html

@@ -0,0 +1 @@
+<div class="gallery-view">{{ .Inner }}</div>

layouts/shortcodes/lightbox-img.html

@@ -0,0 +1,53 @@
+{{ if .Get "caption" }}
+  {{ $.Scratch.Set "caption" (.Get "caption") }}
+{{ else if .Get "alt" }}
+  {{ $.Scratch.Set "caption" (.Get "alt") }}
+{{ end }}
+<!-- resolve absolute image path -->
+{{ $permalink := $.Page.Permalink }}
+{{ $image := .Get "src" }}
+{{ $image_link_absolute := (findRE "^/" $image) }}
+<figure
+  {{ with .Get "class" }}class="{{.}}"{{ end }}
+  {{ with .Get "width" }}style="width: {{ . }};"{{ end }}
+  {{ with .Get "height" }}style="height: {{ . }};"{{ end }}
+  >
+    <a 
+      {{ if .Get "lightbox" }}
+        data-lightbox="{{ .Get "lightbox" | markdownify | plainify }}"
+      {{ else }}
+        data-lightbox="image-{{ $image }}"
+      {{ end }}
+      {{ if $image_link_absolute }}
+        href="{{ $image | absURL }}"
+      {{ else }}
+        href="{{ (printf "%s%s" $permalink $image) }}"
+      {{ end }}
+    {{ with .Get "target" }} target="{{ . }}"{{ end }}
+    {{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+  <img
+      {{ if $image_link_absolute }}
+        src="{{ $image | absURL }}"
+      {{ else }}
+        src="{{ (printf "%s%s" $permalink $image) }}"
+      {{ end }}
+        {{ if .Get "alt" }}alt="{{ .Get "alt" | markdownify | plainify }}"
+        {{ else if .Get "caption" }}alt="{{ .Get "caption" | markdownify | plainify }}"
+        {{ end }}
+        {{ with .Get "align" }}align="{{ . }}"{{ end }}
+         />
+    </a>
+  <!-- caption and attr-->
+  {{ if ($.Scratch.Get "caption") }}
+    <figcaption>
+      <span class="img--caption">
+        {{ $.Scratch.Get "caption" | markdownify | plainify }}
+        {{ if .Get "attr" }}
+          [{{- with .Get "attrlink"}}<a href="{{ . }}">{{ end }}{{ .Get "attr" | markdownify }}{{ if .Get "attrlink"}}</a>{{ end -}}]
+        {{ end }}
+      </span>
+    </figcaption>
+  {{ end }}
+</figure>
+{{ .Page.Scratch.Add "fig" 1 }}
+{{ $.Scratch.Delete "caption"}}

static/css/lightbox.min.css

@@ -0,0 +1 @@
+.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}

themes/devroom-2020/assets/scss/devroom.scss

@@ -90,7 +90,41 @@ blockquote {
 }
 
 img {
-    max-width: 100%;
+    width: 68%;
+    border-radius: 1.6rem;
+    margin: 0 auto;
+    display: block;
+}
+
+.img--caption {
+    display: block;
+    font-style: italic;
+    font-size: 0.92rem;
+    text-align: center;
+}
+
+.gallery-view {
+    display: flex;
+    flex-flow: row wrap;
+
+    figure {
+        max-width: 48%;
+        min-width: 48%;
+        margin: 0.5rem 0;
+        flex: 1;
+
+        img {
+            width: 90%;
+        }
+
+        .img--caption {
+            margin: 0 auto;
+            padding-top: 0.5rem;
+            max-width: 80%;
+            line-height: 1.1rem;
+        }
+    }
+
 }
 
 ol {

themes/devroom-2020/assets/scss/nord.scss

@@ -1,235 +0,0 @@
-// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
-// Copyright (c) 2016-present Sven Greb <development@svengreb.de>
-
-// Project:    Nord
-// Version:    0.2.0
-// Repository: https://github.com/arcticicestudio/nord
-// License:    MIT
-// References:
-//   http://sass-lang.com
-//   http://sassdoc.com
-
-////
-/// An arctic, north-bluish color palette.
-/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
-/// highlighting and UI.  
-/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
-/// ambiance.
-///
-/// @author Arctic Ice Studio <development@arcticicestudio.com>
-////
-
-/// Base component color of "Polar Night".
-///
-/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
-///
-/// @access public
-/// @example scss - SCSS
-///   /* For dark ambiance themes */
-///   .background {
-///     background-color: $nord0;
-///   }
-///   /* For light ambiance themes */
-///   .text {
-///     color: $nord0;
-///   }
-/// @group polarnight
-/// @since 0.1.0
-$nord0: #2e3440;
-
-/// Lighter shade color of the base component color.
-///
-/// Used as a lighter background color for UI elements like status bars.
-///
-/// @access public
-/// @group polarnight
-/// @see $nord0
-/// @since 0.1.0
-$nord1: #3b4252;
-
-/// Lighter shade color of the base component color.
-///
-/// Used as line highlighting in the editor.  
-/// In the UI scope it may be used as selection- and highlight color.
-///
-/// @access public
-/// @example scss - SCSS
-///   /* Code Syntax Highlighting scope */
-///   .editor {
-///     &.line {
-///       background-color: $nord2;
-///     }
-///   }
-///
-///   /* UI scope */
-///   button {
-///     &:selected {
-///       background-color: $nord2;
-///     }
-///   }
-/// @group polarnight
-/// @see $nord0
-/// @since 0.1.0
-$nord2: #434c5e;
-
-/// Lighter shade color of the base component color.
-///
-/// Used for comments, invisibles, indent- and wrap guide marker.  
-/// In the UI scope used as pseudoclass color for disabled elements.
-///
-/// @access public
-/// @example scss - SCSS
-///   /* Code Syntax Highlighting scope */
-///   .editor {
-///     &.indent-guide,
-///     &.wrap-guide {
-///       &.marker {
-///         color: $nord3;
-///       }
-///     }
-///   }
-///   .comment,
-///   .invisible {
-///     color: $nord3;
-///   }
-///
-///   /* UI scope */
-///   button {
-///     &:disabled {
-///       background-color: $nord3;
-///     }
-///   }
-/// @group polarnight
-/// @see $nord0
-/// @since 0.1.0
-$nord3: #4c566a;
-
-/// Base component color of "Snow Storm".
-///
-/// Main color for text, variables, constants and attributes.
-/// In the UI scope used as semi-light background depending on the theme shading design.
-///
-/// @access public
-/// @example scss - SCSS
-///   /* For light ambiance themes */
-///   .background {
-///     background-color: $nord4;
-///   }
-///   /* For dark ambiance themes */
-///   .text {
-///     color: $nord4;
-///   }
-/// @group snowstorm
-/// @since 0.1.0
-$nord4: #d8dee9;
-
-/// Lighter shade color of the base component color.
-///
-/// Used as a lighter background color for UI elements like status bars.  
-/// Used as semi-light background depending on the theme shading design.
-///
-/// @access public
-/// @group snowstorm
-/// @see $nord4
-/// @since 0.1.0
-$nord5: #e5e9f0;
-
-/// Lighter shade color of the base component color.
-///
-/// Used for punctuations, carets and structuring characters like curly- and square brackets.  
-/// In the UI scope used as background, selection- and highlight color depending on the theme shading design.
-///
-/// @access public
-/// @group snowstorm
-/// @see $nord4
-/// @since 0.1.0
-$nord6: #eceff4;
-
-/// Bluish core color.
-///
-/// Used for classes, types and documentation tags.
-///
-/// @access public
-/// @group frost
-/// @since 0.1.0
-$nord7: #8fbcbb;
-
-/// Bluish core accent color.
-///
-/// Represents the accent color of the color palette.  
-/// Main color for primary UI elements and methods/functions.  
-///
-/// Can be used for
-///   - Markup quotes
-///   - Markup link URLs
-///
-/// @access public
-/// @group frost
-/// @since 0.1.0
-$nord8: #88c0d0;
-
-/// Bluish core color.
-///
-/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
-/// punctuations like (semi)colons,commas and braces.
-///
-/// @access public
-/// @group frost
-/// @since 0.1.0
-$nord9: #81a1c1;
-
-/// Bluish core color.
-///
-/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
-///
-/// @access public
-/// @group frost
-/// @since 0.1.0
-$nord10: #5e81ac;
-
-/// Colorful component color.
-///
-/// Used for errors, git/diff deletion and linter marker.
-///
-/// @access public
-/// @group aurora
-/// @since 0.1.0
-$nord11: #bf616a;
-
-/// Colorful component color.
-///
-/// Used for annotations.
-///
-/// @access public
-/// @group aurora
-/// @since 0.1.0
-$nord12: #d08770;
-
-/// Colorful component color.
-///
-/// Used for escape characters, regular expressions and markup entities.  
-/// In the UI scope used for warnings and git/diff renamings.
-///
-/// @access public
-/// @group aurora
-/// @since 0.1.0
-$nord13: #ebcb8b;
-
-/// Colorful component color.
-///
-/// Main color for strings and attribute values.  
-/// In the UI scope used for git/diff additions and success visualizations.
-///
-/// @access public
-/// @group aurora
-/// @since 0.1.0
-$nord14: #a3be8c;
-
-/// Colorful component color.
-///
-/// Used for numbers.
-///
-/// @access public
-/// @group aurora
-/// @since 0.1.0
-$nord15: #b48ead;

themes/devroom-2020/layouts/_default/baseof.html

@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/buttons-min.css" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/forms-min.css" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/regular.min.css" />
+    <link rel="stylesheet" href="/css/lightbox.min.css">
     {{ if .Site.IsServer }}
       {{ $cssOpts := (dict "targetPath" "css/devroom.css" "enableSourceMap" true ) }}
       {{ $styles := resources.Get "scss/devroom.scss" | resources.ExecuteAsTemplate "style.devroom.css" . | toCSS $cssOpts }}
@@ -39,5 +40,6 @@
       </main>
       {{ partial "footer.html" . }}
     </div>
+    <script src="/js/lightbox-plus-jquery.min.js"></script> 
   </body>
 </html>

themes/devroom-2020/layouts/partials/post.html

@@ -3,14 +3,14 @@
 <article>
     <h1>{{ .Title }}</h1>
     <div class="meta">
-        Posted: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+        Posted <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-            {{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}</time>
+            {{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006" ) }}</time>
-        ~{{ .FuzzyWordCount }} words
+        &bull; ~{{ .FuzzyWordCount }} words
-        ~{{ .ReadingTime }} min
+        &bull; ~{{ .ReadingTime }} min
 
         {{ if not (eq $lastmod $date) }}
-            Last updated: <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+            &bull; last updated <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                {{ .Lastmod.Format (.Site.Params.dateFormat | default "2006-01-02" ) }}
+                {{ .Lastmod.Format (.Site.Params.dateFormat | default "2 January 2006" ) }}
             </time>
         {{ end }}
 

themes/devroom-2020/layouts/partials/taxonomy/tags.html

@@ -1,6 +1,6 @@
 {{- range $index, $el := . -}}
     {{- if gt $index 0 }}
-    <span class="separator"></span>
+    <span class="separator">&bull;</span>
     {{- end }}
     <a href="{{ ( printf "tags/%s/" ( . | urlize ) ) | relLangURL }}">{{ . | lower }}</a>
 {{- end -}}