From 857826795354a7f12d4641111a455ceb4267732c Mon Sep 17 00:00:00 2001
From: danix <danix@danix.xyz>
Date: Fri, 17 Mar 2023 11:39:19 +0100
Subject: [PATCH] gallery masonry is mostly working now. Still needs some
 aestetical retouching and I need to add js for the lightbox effect. Fixed the
 signature below articles and in contact page.

---
 assets/sass/components/_gallery.scss  | 25 +++++++---
 assets/sass/components/_image.scss    | 10 ++++
 layouts/partials/funcs/signature.html |  3 +-
 layouts/shortcodes/contact.html       |  3 +-
 layouts/shortcodes/gal-img.html       |  7 +++
 layouts/shortcodes/gallery.html       |  2 +-
 layouts/shortcodes/img.html           | 69 ++++++++++++++-------------
 7 files changed, 76 insertions(+), 43 deletions(-)
 create mode 100644 layouts/shortcodes/gal-img.html

diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss
index 3bf1485..afaa291 100644
--- a/assets/sass/components/_gallery.scss
+++ b/assets/sass/components/_gallery.scss
@@ -1,9 +1,22 @@
 	.gallery {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		grid-gap: 20px;
-	}
-	.animate-fade {
-		animation: fadeIn 750ms ease-in-out;
+		.gallery-inner {
+			// masonry container
+			columns: 3;
+			@include breakpoint('<=medium') {
+				columns: 2;
+			}
+			@include breakpoint('<=small') {
+				columns: 1;
+			}
+			column-gap: 1.5em;
+			a.gallery-item {
+				display: inline-block;
+				width: 100%;
+				padding: 0;
+				margin: 0 1em 1em 0;
+				text-decoration: none;
+				border-bottom: none;
+			}
+		}
 	}
 	
\ No newline at end of file
diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 45df867..6052089 100644
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -67,6 +67,12 @@
 				margin: (_size(element-margin) * 0.75) 0;
 			}
 		}
+		&.w-full {
+			width: 100%;
+		}
+		&.h-auto {
+			height: auto;
+		}
 	}
 	.image.signature {
 		&.left,
@@ -107,6 +113,10 @@
 		}
 	}
 
+	.animate-fade {
+		animation: fadeIn 750ms ease-in-out;
+	}
+
 	figure {
 		figcaption {
 			p {
diff --git a/layouts/partials/funcs/signature.html b/layouts/partials/funcs/signature.html
index d97da56..876df3a 100644
--- a/layouts/partials/funcs/signature.html
+++ b/layouts/partials/funcs/signature.html
@@ -1,3 +1,4 @@
+{{- $sig := resources.Get "/uploads/2018/05/new-signature.png" -}}
 <div id="signature">
-	<img class="signature image right" src="/uploads/2018/05/new-signature.png" alt="danix">
+	<img class="signature image right" src="{{ $sig.RelPermalink }}" alt="danix">
 </div>
\ No newline at end of file
diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html
index 4343809..a93d149 100644
--- a/layouts/shortcodes/contact.html
+++ b/layouts/shortcodes/contact.html
@@ -1,3 +1,4 @@
+{{- $sig := resources.Get "/uploads/2018/05/new-signature.png" -}}
 <section id="contact">
   <div class="inner">
     <section>
@@ -40,7 +41,7 @@
           <span class="icon solid alt fa-envelope"></span>
           <h3>Reach out to me</h3>
           <p>I'm here to help, if you need to talk to me feel free to reach out and tell me whatever you need help with, I'll be happy to find some time to discuss the matter with you!</p>
-          <img class="signature image right" src="/uploads/2018/05/new-signature.png" alt="signed by danix">
+          <img class="signature image right" src="{{ $sig.RelPermalink }}" alt="signed by danix">
         </div>
       </section>
     </section>
diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html
new file mode 100644
index 0000000..0693319
--- /dev/null
+++ b/layouts/shortcodes/gal-img.html
@@ -0,0 +1,7 @@
+{{- $src := .Get "src" -}}
+{{- $source := resources.Get $src -}}
+{{- $alt := .Get "alt" -}}
+{{- $icon := $source.Resize "400x webp" -}}
+<a class="gallery-item" href="{{ $source.RelPermalink }}" target="_blank">
+    <img src="{{ $icon.RelPermalink }}" alt="{{ $alt }}">
+</a>
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
index 63b6d90..8a30fc5 100644
--- a/layouts/shortcodes/gallery.html
+++ b/layouts/shortcodes/gallery.html
@@ -1,4 +1,4 @@
-<div class="box gallery">
+<div class="gallery">
     <div class="gallery-inner">
         {{ .Inner }}
     </div>
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index e93d5aa..d4159be 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -6,7 +6,7 @@
 {{- $src := .Get "src" -}}
 {{- $source := resources.Get $src -}}
 {{- $alt := .Get "alt" -}}
-{{- $divClass := "" -}}
+{{- $divClass := .Get "divClass" -}}
 {{/*
     The styling in $imgClass, below, makes
     an image fill the container horizontally
@@ -27,7 +27,7 @@
     $CFPstyle is for use in styling
     the div's background, as you'll see shortly.
 */}}
-{{- $CFPstyle := printf "%s%s%s%v%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "; height: " $source.Height ";" -}}
+{{- $CFPstyle := printf "%s%s%s%v%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px; height: " $source.Height "px;" -}}
 {{/*
     Then, we create a 640-pixel-wide JPG
     of the image. This will serve as the
@@ -36,7 +36,7 @@
     HTML `picture` tag.
 */}}
 {{- $actualImg := $source.Resize "640x jpg" -}}
-<div class="image" style="{{ $CFPstyle | safeCSS }}">
+<div class="picture{{with $divClass}} {{.}}{{end}}" style="{{ $CFPstyle | safeCSS }}">
 {{/*
     Now we'll build the `picture` which modern
     browsers use to decide which image, and
@@ -46,37 +46,38 @@
     usually are smaller. After WebP, the fallback
     is the universally safe JPG format.
 */}}
-    <picture>
-        <source
-            type="image/webp"
-            srcset="
-            {{- with $respSizes -}}
-                {{- range $i, $e := $respSizes -}}
-                    {{- if ge $source.Width . -}}
-                        {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" $e " webp") ).RelPermalink }} {{ . }}w
+    <a href="{{ $source.RelPermalink }}">
+        <picture>
+            <source
+                type="image/webp"
+                srcset="
+                {{- with $respSizes -}}
+                    {{- range $i, $e := $respSizes -}}
+                        {{- if ge $source.Width . -}}
+                            {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" $e " webp") ).RelPermalink }} {{ . }}w
+                        {{- end -}}
                     {{- end -}}
-                {{- end -}}
-            {{- end -}}"
-            sizes="{{ $dataSzes }}"
-        />
-        <source
-            type="image/jpeg"
-            srcset="
-            {{- with $respSizes -}}
-                {{- range $i, $e := . -}}
-                    {{- if ge $source.Width . -}}
-                        {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" . " jpg") ).RelPermalink }} {{ . }}w
+                {{- end -}}"
+                sizes="{{ $dataSzes }}"
+            />
+            <source
+                type="image/jpeg"
+                srcset="
+                {{- with $respSizes -}}
+                    {{- range $i, $e := . -}}
+                        {{- if ge $source.Width . -}}
+                            {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" . " jpg") ).RelPermalink }} {{ . }}w
+                        {{- end -}}
                     {{- end -}}
-                {{- end -}}
-            {{- end -}}"
-            sizes="{{ $dataSzes }}"
-        />
-        <img class="{{ $imgClass }}"
-            src="{{ $actualImg.RelPermalink }}"
-            width="{{ $source.Width }}"
-            height="{{ $source.Height }}"
-            alt="{{ $alt }}"
-            loading="lazy"
-        />
-    </picture>
+                {{- end -}}"
+                sizes="{{ $dataSzes }}"
+            />
+            <img class="{{ $imgClass }}"
+                src="{{ $actualImg.RelPermalink }}"
+                width="640"
+                alt="{{ $alt }}"
+                loading="lazy"
+            />
+        </picture>
+    </a>
 </div>
-- 
2.20.1