From ea54421b15c9705f86a8d25a6caaa40791d66e18 Mon Sep 17 00:00:00 2001
From: Thedro Neely <thedroneely@gmail.com>
Date: Tue, 19 Jul 2022 11:59:45 -0400
Subject: app: Refactor and CSS rewrite

---
 .../themes/tdro/layouts/shortcodes/sideimage.html  | 34 ++++++++++++++--------
 1 file changed, 22 insertions(+), 12 deletions(-)

(limited to 'generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html')

diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
index f309fdc..a2574d5 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html
@@ -1,14 +1,24 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
-{{ $imageFile := print "public" (.Get `source`) }}
-{{ $image := imageConfig $imageFile }}
+{{- $mark   := (.Get `mark`)   -}}
+{{- $set    := (.Get `set`)    -}}
+{{- $source := (.Get `source`) -}}
+{{- $title  := (.Get `title`)  -}}
+{{- $id := md5 (printf $mark .Inner) -}}
+{{- $imageFile := print "public" $source -}}
+{{- $image := imageConfig $imageFile -}}
 
-<span class="sidenote-container">
-  <label for="{{ $id }}" class="sidenote-toggle sidenote-mark" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="sidenote-toggle">
-  <span class="sans-serif sidenote sideimage {{ .Get `set` }}note">
-    <a href="{{.Get `source`}}" onclick="return false;">
-      <img data-image-zoom src="{{ .Get `source`}}" alt="{{ .Inner | markdownify }}" title="{{ .Get `title`}}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+<side-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <side-note title="{{ $mark }}" image {{ $set }}>
+    <a href="{{ $source }}" onclick="return false;">
+      <img data-image-zoom
+        src="{{ $source }}"
+        title="{{ $title }}"
+        width="{{ $image.Width }}"
+        height="{{ $image.Height }}"
+        alt="{{ .Inner | markdownify }}"
+      />
     </a>
-    <span class="sideimage-footer is-block has-text-centered has-text-grey-dark"><mark>{{ .Inner | markdownify }}</mark></span>
-  </span>
-</span>
+    <mark>{{ .Inner | markdownify }}</mark>
+  </side-node>
+</side-note-aside>
-- 
cgit v1.2.3