gallery masonry is mostly working now. Still needs some aestetical retouching and...

diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss
index 3bf14856aabe48ccc4c3271e50644b1d0ff2f6e7..afaa29120e9f13958559d3782b7a01535c9fc908 100644 (file)
--- 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 45df86708d2f4e8341ee241cd34c16d26c4a18f5..605208960bf3dc708287f93b2fc4f8066639e807 100644 (file)
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -67,6 +67,12 @@
                                margin: (_size(element-margin) * 0.75) 0;\r
                        }\r
                }\r
+               &.w-full {\r
+                       width: 100%;\r
+               }\r
+               &.h-auto {\r
+                       height: auto;\r
+               }\r
        }\r
        .image.signature {\r
                &.left,\r
@@ -107,6 +113,10 @@
                }\r
        }\r
 \r
+       .animate-fade {\r
+               animation: fadeIn 750ms ease-in-out;\r
+       }\r
+\r
        figure {\r
                figcaption {\r
                        p {\r

diff --git a/layouts/partials/funcs/signature.html b/layouts/partials/funcs/signature.html
index d97da56fa96a7f987321fc22eb08ca8ebf508f13..876df3a4c838f4a6c680f5c9ba1d5ca0225c5cf2 100644 (file)
--- 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 43438090b9a04fe786a166a3e308004104ce2219..a93d149f2c8268f5feb2340a1c2d85c2cc87bd40 100644 (file)
--- 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 (file)
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 63b6d9069d45eba371d6db12a9dc19b364652795..8a30fc5a2f9322146e98107afbf05ce2852525c5 100644 (file)
--- 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 e93d5aa8604e9ae108a8cf6219daf8c0f98d3438..d4159bee871e91a02541fe336a0cf11da5d9ede3 100644 (file)
--- 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>