added gallery shortcodes. added formatting shortcodes. Minor works on styling.

diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
index 1a082fb..1cf2eca 100644 (file)
--- a/assets/sass/base/_typography.scss
+++ b/assets/sass/base/_typography.scss
@@ -63,10 +63,17 @@
                font-weight: _font(weight-bold);\r
        }\r
 \r
-       em, i {\r
+       em, i, strike {\r
                font-style: italic;\r
        }\r
 \r
+       mark {\r
+               background-color: lighten(_palette_light(highlight), 10%);\r
+               color: _palette_light(fg-bold);\r
+               padding-left: 0.2em;\r
+               padding-right: 0.2em;\r
+       }\r
+\r
        p {\r
                margin: 0 0 _size(element-margin) 0;\r
                &.smaller {\r

diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss
new file mode 100644 (file)
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 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
index 0000000..453944d
--- /dev/null
+++ b/layouts/shortcodes/strike.html
@@ -0,0 +1 @@
+<strike>{{ .Inner | markdownify }}</strike>
\ No newline at end of file