From 2b5a1947bf3836b9bb3b19aa3497660d7e83b1af Mon Sep 17 00:00:00 2001
From: danix <danix@danix.xyz>
Date: Fri, 10 Mar 2023 17:38:19 +0100
Subject: [PATCH] added gallery shortcodes. added formatting shortcodes. Minor
 works on styling.

---
 assets/sass/base/_typography.scss    |  9 ++-
 assets/sass/components/_gallery.scss |  9 +++
 assets/sass/main.scss                |  1 +
 layouts/shortcodes/em.html           |  1 +
 layouts/shortcodes/gallery-img.html  | 82 ++++++++++++++++++++++++++++
 layouts/shortcodes/gallery.html      |  5 ++
 layouts/shortcodes/strike.html       |  1 +
 7 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 assets/sass/components/_gallery.scss
 create mode 100644 layouts/shortcodes/em.html
 create mode 100644 layouts/shortcodes/gallery-img.html
 create mode 100644 layouts/shortcodes/gallery.html
 create mode 100644 layouts/shortcodes/strike.html

diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index 1a082fb..1cf2eca 100644
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -63,10 +63,17 @@
 		font-weight: _font(weight-bold);
 	}
 
-	em, i {
+	em, i, strike {
 		font-style: italic;
 	}
 
+	mark {
+		background-color: lighten(_palette_light(highlight), 10%);
+		color: _palette_light(fg-bold);
+		padding-left: 0.2em;
+		padding-right: 0.2em;
+	}
+
 	p {
 		margin: 0 0 _size(element-margin) 0;
 		&.smaller {
diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss
new file mode 100644
index 0000000..3bf1485
--- /dev/null
+++ b/assets/sass/components/_gallery.scss
@@ -0,0 +1,9 @@
+	.gallery {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-gap: 20px;
+	}
+	.animate-fade {
+		animation: fadeIn 750ms ease-in-out;
+	}
+	
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 6d26e38..b66bb1c 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -61,6 +61,7 @@
 	@import 'components/contact-method';
 	@import 'components/spotlights';
 	@import 'components/search';
+	@import 'components/gallery';
 
 // Layout.
 
diff --git a/layouts/shortcodes/em.html b/layouts/shortcodes/em.html
new file mode 100644
index 0000000..d513b9b
--- /dev/null
+++ b/layouts/shortcodes/em.html
@@ -0,0 +1 @@
+<mark>{{ .Inner | markdownify }}</mark>
\ No newline at end of file
diff --git a/layouts/shortcodes/gallery-img.html b/layouts/shortcodes/gallery-img.html
new file mode 100644
index 0000000..2f0bd67
--- /dev/null
+++ b/layouts/shortcodes/gallery-img.html
@@ -0,0 +1,82 @@
+{{/*
+    Taken from https://www.brycewray.com/posts/2022/06/responsive-optimized-images-hugo/
+*/}}
+
+{{- $respSizes := .Site.Params.imageSizes -}}
+{{- $src := .Get "src" -}}
+{{- $source := resources.Get $src -}}
+{{- $alt := .Get "alt" -}}
+{{- $divClass := "" -}}
+{{/*
+    The styling in $imgClass, below, makes
+    an image fill the container horizontally
+    and adjust its height automatically
+    for that, and then fade in for the LQIP effect.
+    Feel free to adjust your CSS/SCSS as desired.
+*/}}
+{{- $imgClass := "w-full h-auto animate-fade" -}}
+{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
+{{/*
+    Now we'll create the 20-pixel-wide LQIP
+    and turn it into Base64-encoded data, which
+    is better for performance and caching.
+*/}}
+{{- $LQIP_img := $source.Resize "20x jpg" -}}
+{{- $LQIP_b64 := $LQIP_img.Content | base64Encode -}}
+{{/*
+    $CFPstyle is for use in styling
+    the div's background, as you'll see shortly.
+*/}}
+{{- $CFPstyle := printf "%s%s%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat;" -}}
+{{/*
+    Then, we create a 640-pixel-wide JPG
+    of the image. This will serve as the
+    "fallback" image for that tiny percentage
+    of browsers that don't understand the
+    HTML `picture` tag.
+*/}}
+{{- $actualImg := $source.Resize "640x jpg" -}}
+<div class="image" style="{{ $CFPstyle | safeCSS }}">
+{{/*
+    Now we'll build the `picture` which modern
+    browsers use to decide which image, and
+    which format thereof, to show. Remember to
+    put `webp` first, since the browser will use
+    the first format it **can** use, and WebP files
+    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
+                    {{- 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 -}}
+                {{- end -}}
+            {{- end -}}"
+            sizes="{{ $dataSzes }}"
+        />
+        <img class="{{ $imgClass }}"
+            src="{{ $actualImg.RelPermalink }}"
+            width="{{ $source.Width }}"
+            height="{{ $source.Height }}"
+            alt="{{ $alt }}"
+            loading="lazy"
+        />
+    </picture>
+</div>
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
new file mode 100644
index 0000000..63b6d90
--- /dev/null
+++ b/layouts/shortcodes/gallery.html
@@ -0,0 +1,5 @@
+<div class="box gallery">
+    <div class="gallery-inner">
+        {{ .Inner }}
+    </div>
+</div>
diff --git a/layouts/shortcodes/strike.html b/layouts/shortcodes/strike.html
new file mode 100644
index 0000000..453944d
--- /dev/null
+++ b/layouts/shortcodes/strike.html
@@ -0,0 +1 @@
+<strike>{{ .Inner | markdownify }}</strike>
\ No newline at end of file
-- 
2.20.1