diff --git a/content/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag.md b/content/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag.md
index d87b9320..df4bb5b2 100644
--- a/content/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag.md
+++ b/content/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag.md
@@ -11,9 +11,28 @@ That is no more! I'm sick of doing it and I don't know how I just realised that
 
 The end result looks like this by default:
 
+{{% center %}}
+
+{{< img src=/img/neater-footnotes1.webp
+class=""
+alt="Here is what a collapsed details HTML tag looks like." 
+title="Here is what a collapsed details HTML tag looks like." 
+caption="Here is what a collapsed <details> HTML tag looks like.">}}
+
+{{% /center %}}
 
 And when it's clicked (or you click on a footnote in the article itself):
 
+{{% center %}}
+
+{{< img src=/img/neater-footnotes2.webp
+class=""
+alt="Here is what an expanded details HTML tag looks like." 
+title="Here is what an expanded details HTML tag looks like." 
+caption="Here is what an expanded <details> HTML tag looks like.">}}
+
+{{% /center %}}
+
 The coolest thing is that it automatically expands itself!
 
 Add this to the bottom of your markdown files and don't close the `<details>` tag:
diff --git a/public/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag/index.html b/public/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag/index.html
index 8f65d3e9..d94bf737 100644
--- a/public/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag/index.html
+++ b/public/articles/blog/neater-footnotes-in-hugo-using-the-details-html-tag/index.html
@@ -28,7 +28,13 @@ That is no more! I&rsquo;m sick of doing it and I don&rsquo;t know how I just re
 <div class="post-content"><p>Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (<em>it renders the markdown file?</em>) does so whenever I&rsquo;ve had to manually enclose the footnotes with <code>&lt;details&gt;</code> in the generated html file.</p>
 <p>That is no more! I&rsquo;m sick of doing it and I don&rsquo;t know how I just realised that I can just use HTML tags in markdown itself&hellip; I&rsquo;ve literally done that dozens of times already&hellip;</p>
 <p>The end result looks like this by default:</p>
+<div style="text-align: center;">
+<figure ><img src="/img/neater-footnotes1.webp" title="Here is what a collapsed details HTML tag looks like." alt="Here is what a collapsed details HTML tag looks like."><figcaption>Here is what a collapsed &lt;details&gt; HTML tag looks like.</figcaption></figure>
+</div>
 <p>And when it&rsquo;s clicked (or you click on a footnote in the article itself):</p>
+<div style="text-align: center;">
+<figure ><img src="/img/neater-footnotes2.webp" title="Here is what an expanded details HTML tag looks like." alt="Here is what an expanded details HTML tag looks like."><figcaption>Here is what an expanded &lt;details&gt; HTML tag looks like.</figcaption></figure>
+</div>
 <p>The coolest thing is that it automatically expands itself!</p>
 <p>Add this to the bottom of your markdown files and don&rsquo;t close the <code>&lt;details&gt;</code> tag:</p>
 
diff --git a/public/articles/index.xml b/public/articles/index.xml
index 2f025426..39f211c2 100644
--- a/public/articles/index.xml
+++ b/public/articles/index.xml
@@ -18,7 +18,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/img/neater-footnotes1.webp b/public/img/neater-footnotes1.webp
new file mode 100644
index 00000000..1b27ced6
Binary files /dev/null and b/public/img/neater-footnotes1.webp differ
diff --git a/public/img/neater-footnotes2.webp b/public/img/neater-footnotes2.webp
new file mode 100644
index 00000000..aa9d4d08
Binary files /dev/null and b/public/img/neater-footnotes2.webp differ
diff --git a/public/index.xml b/public/index.xml
index dabf7b9c..98d71152 100644
--- a/public/index.xml
+++ b/public/index.xml
@@ -18,7 +18,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/library/hackbook/index.xml b/public/library/hackbook/index.xml
index f21182f3..4ddab50a 100644
--- a/public/library/hackbook/index.xml
+++ b/public/library/hackbook/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/library/index.xml b/public/library/index.xml
index f34ecd59..077811af 100644
--- a/public/library/index.xml
+++ b/public/library/index.xml
@@ -18,7 +18,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/library/ted-kaczynski/index.xml b/public/library/ted-kaczynski/index.xml
index a5f4193b..3a5b0674 100644
--- a/public/library/ted-kaczynski/index.xml
+++ b/public/library/ted-kaczynski/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/blog/index.xml b/public/tags/blog/index.xml
index cb033964..8d05ea14 100644
--- a/public/tags/blog/index.xml
+++ b/public/tags/blog/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/hackbook/index.xml b/public/tags/hackbook/index.xml
index cf9529eb..58724033 100644
--- a/public/tags/hackbook/index.xml
+++ b/public/tags/hackbook/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/index.xml b/public/tags/index.xml
index 1138d769..cc6bec47 100644
--- a/public/tags/index.xml
+++ b/public/tags/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/library/index.xml b/public/tags/library/index.xml
index df1fee29..08ecaecd 100644
--- a/public/tags/library/index.xml
+++ b/public/tags/library/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/personal/index.xml b/public/tags/personal/index.xml
index e784a2a0..c2f6d8f7 100644
--- a/public/tags/personal/index.xml
+++ b/public/tags/personal/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/ted-kaczynski/index.xml b/public/tags/ted-kaczynski/index.xml
index eca24b0d..5f288a16 100644
--- a/public/tags/ted-kaczynski/index.xml
+++ b/public/tags/ted-kaczynski/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/public/tags/updates/index.xml b/public/tags/updates/index.xml
index 430806de..ea104903 100644
--- a/public/tags/updates/index.xml
+++ b/public/tags/updates/index.xml
@@ -19,7 +19,13 @@
 		<description>&lt;p&gt;Hugo currently (v133) provides no way for me to choose where to place my footnotes - the excuse is that hugo does not know what goldmark (&lt;em&gt;it renders the markdown file?&lt;/em&gt;) does so whenever I&amp;rsquo;ve had to manually enclose the footnotes with &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; in the generated html file.&lt;/p&gt;
 &lt;p&gt;That is no more! I&amp;rsquo;m sick of doing it and I don&amp;rsquo;t know how I just realised that I can just use HTML tags in markdown itself&amp;hellip; I&amp;rsquo;ve literally done that dozens of times already&amp;hellip;&lt;/p&gt;
 &lt;p&gt;The end result looks like this by default:&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes1.webp&#34; title=&#34;Here is what a collapsed details HTML tag looks like.&#34; alt=&#34;Here is what a collapsed details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what a collapsed &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;And when it&amp;rsquo;s clicked (or you click on a footnote in the article itself):&lt;/p&gt;
+&lt;div style=&#34;text-align: center;&#34;&gt;
+&lt;figure &gt;&lt;img src=&#34;https://vodoraslo.xyz/img/neater-footnotes2.webp&#34; title=&#34;Here is what an expanded details HTML tag looks like.&#34; alt=&#34;Here is what an expanded details HTML tag looks like.&#34;&gt;&lt;figcaption&gt;Here is what an expanded &amp;lt;details&amp;gt; HTML tag looks like.&lt;/figcaption&gt;&lt;/figure&gt;
+&lt;/div&gt;
 &lt;p&gt;The coolest thing is that it automatically expands itself!&lt;/p&gt;
 &lt;p&gt;Add this to the bottom of your markdown files and don&amp;rsquo;t close the &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; tag:&lt;/p&gt;
 
diff --git a/static/img/neater-footnotes1.webp b/static/img/neater-footnotes1.webp
new file mode 100644
index 00000000..1b27ced6
Binary files /dev/null and b/static/img/neater-footnotes1.webp differ
diff --git a/static/img/neater-footnotes2.webp b/static/img/neater-footnotes2.webp
new file mode 100644
index 00000000..aa9d4d08
Binary files /dev/null and b/static/img/neater-footnotes2.webp differ