app: Refactor and CSS rewrite

8 files changed, 80 insertions, 50 deletions

diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/footer.html b/generators/hugo/themes/tdro/layouts/shortcodes/footer.html
index 63af9fa..3e71164 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/footer.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/footer.html
@@ -1 +1,3 @@
-<span class="serif blockquote-footer has-text-right is-block">{{ .Inner | markdownify }}</span>
+<blockquote-footer>
+  {{ .Inner | markdownify }}
+</blockquote-footer>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/image.html b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
index e90352d..3b211ff 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/image.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/image.html
@@ -1,9 +1,15 @@
-{{ $imageFile := print "public" (.Get `source`) }}
-{{ $image := imageConfig $imageFile }}
+{{- $imageFile := print "public" (.Get `source`) -}}
+{{- $image := imageConfig $imageFile -}}
 
 <figure>
   <a href="{{ .Get `source` }}" onclick="return false;">
-    <img data-image-zoom src="{{ .Get `source` }}" alt="{{ .Get `title` }}" title="{{ .Get `title` }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
+    <img data-image-zoom
+      src="{{ .Get `source` }}"
+      alt="{{ .Get `title` }}"
+      title="{{ .Get `title` }}"
+      width="{{ $image.Width }}"
+      height="{{ $image.Height }}"
+    />
   </a>
-  <figcaption class="has-text-grey-dark">{{ .Inner | markdownify }}</figcaption>
+  <figcaption>{{ .Inner | markdownify }}</figcaption>
 </figure>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
index 498a901..d69966f 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginimage.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="marginnote-container">
-  <label for="{{ $id }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="marginnote-toggle">
-  <span class="sans-serif marginnote 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 }}"/>
+<margin-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <margin-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>
+  </margin-note>
+</margin-note-aside>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
index 96dc001..c19b9a2 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/marginnote.html
@@ -1,9 +1,11 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{- $mark := (.Get `mark`) -}}
+{{- $set  := (.Get `set`)  -}}
+{{- $id := md5 (printf $mark .Inner) -}}
 
-<span class="marginnote-container">
-  <label for="{{ $id }}" class="marginnote-toggle marginnote-mark" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ .Get `mark` | markdownify }}</span></label>
-  <input type="checkbox" id="{{ $id }}" class="marginnote-toggle">
-  <span class="sans-serif marginnote {{ .Get `set` }}note">
+<margin-note-aside>
+  <label for="{{ $id }}" title="{{ .Inner | replaceRE "\n" " " | markdownify }}"><span>{{ $mark | markdownify }}</span></label>
+  <input type="checkbox" id="{{ $id }}" name="toggle">
+  <margin-note title="{{ $mark }}" {{ $set }}>
     <mark>{{ .Inner | markdownify }}</mark>
-  </span>
-</span>
+  </margin-note>
+</margin-note-aside>
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>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
index d54a077..d207d68 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/sidenote.html
@@ -1,13 +1,11 @@
-{{ $id := md5 (printf (.Get `mark`) .Inner) }}
+{{- $mark := (.Get `mark`) -}}
+{{- $set  := (.Get `set`)  -}}
+{{- $id   := md5 (printf $mark .Inner) -}}
 
-<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 {{ .Get `set` }}note">
-    <mark>{{ .Inner | markdownify }}</mark>
-  </span>
-</span>
+<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 }}" {{ $set }}>
+    <mark >{{ .Inner | markdownify }}</mark>
+  </side-note>
+</side-note-aside>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html b/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html
index 147fbf2..5ca8c2d 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/smallcaps.html
@@ -1 +1,3 @@
-<span class="smallcaps smallcaps{{ .Get `type` }}">{{ .Get `set` }}</span>
+<small-caps {{ .Get `type` }}>
+  {{ .Get `set` }}
+</small-caps>
diff --git a/generators/hugo/themes/tdro/layouts/shortcodes/video.html b/generators/hugo/themes/tdro/layouts/shortcodes/video.html
index a0bf488..745db07 100644
--- a/generators/hugo/themes/tdro/layouts/shortcodes/video.html
+++ b/generators/hugo/themes/tdro/layouts/shortcodes/video.html
@@ -22,5 +22,5 @@
       <a href="{{ $source }}">link to the video</a> instead.
     </p>
   </video>
-  <figcaption class="has-text-grey-dark">{{ .Inner | markdownify }}</figcaption>
+  <figcaption>{{ .Inner | markdownify }}</figcaption>
 </video-container>