Massive changes regarding the core templates, static and config backbone

Soon will be abstracted into a Hermit V3 theme that focuses on:
- speed
- efficiency
- modularity
- SEO:
  - good WCAG &
  - pagespeed metrics
- suckless

Changes to be committed:
    modified:   config.toml

    modified:   content/posts/code_test.md
    modified:   content/posts/How I made this Blog with Zola.md

    deleted:    sass/_icons.scss
    modified:   sass/_predefined.scss
    modified:   sass/style.scss

    modified:   static/js/main.js

    modified:   templates/404.html
    modified:   templates/index.html
    modified:   templates/macros.html
    modified:   templates/page.html
    modified:   templates/section.html
    modified:   templates/tags/list.html
    modified:   templates/tags/single.html

14 files changed, 322 insertions, 290 deletions

diff --git a/config.toml b/config.toml
index f4137b2..5a85e27 100644
--- a/config.toml
+++ b/config.toml
@@ -3,7 +3,7 @@ base_url = "https://alphara.art"
 
 # Used in RSS by default
 title = "Alphara's Blog"
-description = "Blog dedicated to my stuff" # Neural Art at its finest :))
+description = "Neural Art at its finest :))" # Neural Art at its finest :)) Blog dedicated to my stuff
 
 # The default language, used in RSS and as a fallback value
 default_language = "en"
@@ -72,7 +72,7 @@ render_emoji = true
 
 [extra]
 
-home_subtitle = "Neural Art at its finest :))" # better title and description
+home_subtitle = "Neural Art at its finest :))"
 
 footer_copyright = ' &#183; <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a>'
 
@@ -85,7 +85,6 @@ hermit_social = [
     { name = "github", link = "https://github.com/xAlpharax" },
     { name = "linkedin", link = "https://www.linkedin.com/in/iustin-raznic" },
     { name = "youtube", link = "https://www.youtube.com/@alphara2643" },
-    # { name = "mastodon", link = "https://mastodon.social/@alphara" },
     { name = "twitter", link = "https://twitter.com/IustinRaznic" },
     { name = "email", link = "mailto:iustin@alphara.art" }
 ]
@@ -95,6 +94,11 @@ hermit_social = [
 name = "Iustin Râznic"
 email = "iustin@alphara.art"
 
+[extra.meta]
+
+preview_image = "https://alphara.art/Alphara.png"
+preview_image_alt = "Alphara"
+
 [extra.disqus]
 
 # enable = false
@@ -102,22 +106,30 @@ email = "iustin@alphara.art"
 # Take this from your Disqus account
 # shortname = "my-supa-dupa-blog"
 
+# Make sure to include this on posts that you want comments on:
+# [extra]
+# permalink = "link of the page"
+#
+# in the posts front-matter
+# in order to have the correct URL for the comment section
+
 # Comments can be disabled per page by setting:
 # [extra]
 # disable_comments = true
 #
 # in the posts front-matter
+# this will skip disqus components from rendering on the page all together
+
+# Similarily, but unrelated,
 
-# Similarily, but unrelated
-# Table of content can be enabled by adding
-# +++
+# Table of Contents button-functionality can be enabled per-page by adding:
 # [extra]
 # toc=true
-# +++
-# to the page front matter
-# Icon will then appear above the page title that will toggle the ToC
+#
+# in the page front-matter
 
 [extra.google_analytics]
 
 # enable = false
+
 # id = "UA-4XXXXXXX-X"
diff --git a/content/posts/How I made this Blog with Zola.md b/content/posts/How I made this Blog with Zola.md
index 190486d..b5aa84a 100644
--- a/content/posts/How I made this Blog with Zola.md
+++ b/content/posts/How I made this Blog with Zola.md
@@ -7,7 +7,7 @@ draft = false
 tags = ["original_post", "blog", "test"]
 
 [extra]
-disable_comments = false
+disable_comments = true
 toc = false
 +++
 
diff --git a/content/posts/code_test.md b/content/posts/code_test.md
index 07744f7..6c7a203 100644
--- a/content/posts/code_test.md
+++ b/content/posts/code_test.md
@@ -7,7 +7,8 @@ draft = false
 tags = ["test", "code"]
 
 [extra]
-disable_comments = true
+disable_comments = false
+permalink = "https://alphara.art/posts/code-test/"
 toc = false
 
 [extra.earlier]
diff --git a/sass/_icons.scss b/sass/_icons.scss
deleted file mode 100644
index 6722894..0000000
--- a/sass/_icons.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/* From: https://css.gg/app */
-
-.gg-check {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 22px;
-  height: 22px;
-  border: 2px solid transparent;
-  border-radius: 100px;
-}
-.gg-check::after {
-  content: "";
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  left: 3px;
-  top: -1px;
-  width: 6px;
-  height: 10px;
-  border-width: 0 2px 2px 0;
-  border-style: solid;
-  transform-origin: bottom left;
-  transform: rotate(45deg);
-}
-
-.gg-clipboard {
-  box-sizing: border-box;
-  position: relative;
-  display: block;
-  transform: scale(var(--ggs, 1));
-  width: 18px;
-  height: 18px;
-  border: 2px solid;
-  border-radius: 2px;
-}
-.gg-clipboard::after,
-.gg-clipboard::before {
-  content: "";
-  display: block;
-  box-sizing: border-box;
-  position: absolute;
-  border-radius: 2px;
-  width: 10px;
-  left: 2px;
-}
-.gg-clipboard::before {
-  border: 2px solid;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-  top: -2px;
-  height: 6px;
-}
-.gg-clipboard::after {
-  height: 2px;
-  background: currentColor;
-  box-shadow: 0 -4px 0 0;
-  bottom: 2px;
-}
diff --git a/sass/_predefined.scss b/sass/_predefined.scss
index 0cb193b..ac955ed 100644
--- a/sass/_predefined.scss
+++ b/sass/_predefined.scss
@@ -1,5 +1,6 @@
 // Colors
 //
+
 //bkup
 $theme: #018574; // links // green
 $text: #c6cddb; // general text // white grey
diff --git a/sass/style.scss b/sass/style.scss
index d110fec..18ff1d0 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,8 +1,7 @@
 @import "predefined.scss";
 @import "normalize.scss";
-@import "syntax.scss";
 @import "animate.scss";
-@import "icons.scss";
+@import "syntax.scss";
 
 /* Webkit Scrollbar Customize */
 ::-webkit-scrollbar {
@@ -51,7 +50,7 @@ pre {
   word-wrap: break-word;
   color: #eee;
   border-radius: 4px;
-  // -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch; // For iOS improved scrolling
 
   code {
     padding: 0;
@@ -245,6 +244,11 @@ table {
   padding: 0;
   margin-left: 0.4em;
   cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+
 }
 
 #menu-btn {
@@ -807,22 +811,3 @@ hr.post-end {
     right: 1.2em;
   }
 }
-
-.code-badge {
-  margin: 0.4em 0em;
-}
-
-.highlight-copy-btn {
-  margin-right: 7px;
-  float: right;
-  border: 0;
-  border-radius: 4px;
-  padding: 1px;
-  font-size: 0.7em;
-  line-height: 1.8;
-  color: #fff;
-  background-color: #777;
-  opacity: 0.6;
-  min-width: 55px;
-  text-align: center;
-}
diff --git a/static/js/main.js b/static/js/main.js
index 012df35..18316e0 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -2,7 +2,7 @@
  * Utils
  */
 
-// Throttle
+// Throttle Helper
 const throttle = (callback, limit) => {
     let timeoutHandler = null;
     return () => {
@@ -23,8 +23,6 @@ const listen = (selector, eventType, callback) => {
     }
 };
 
-// FUNCTIONS
-
 // Auto Hide Header
 const header = document.getElementById('site-header');
 let lastScrollPosition = window.scrollY;
diff --git a/templates/404.html b/templates/404.html
index 1a7cbb3..d885ede 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -6,17 +6,59 @@
 
 {% block main %}
 <div id="spotlight" class="error-404 animated fadeIn">
-    <p class="img-404">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.8 163.4" fill="currentColor"><title>404-lighthouse</title><path d="M83,27.5c.5-8.4,12.5-8.4,13,0,.2,3.2,5.2,3.2,5,0C100.7,21.3,96,16,89.5,16S78.3,21.3,78,27.5c-.2,3.2,4.8,3.2,5,0Z" transform="translate(-6.6 -6.6)"/><path d="M92,18V9c0-3.2-5-3.2-5,0v9c0,3.2,5,3.2,5,0Z" transform="translate(-6.6 -6.6)"/><path d="M78,44.5l-7.9,86.7L69,143.5c-.3,3.2,4.7,3.2,5,0l7.9-86.7L83,44.5c.3-3.2-4.7-3.2-5,0Z" transform="translate(-6.6 -6.6)"/><path d="M96,44.5l7.9,86.7,1.1,12.3c.3,3.2,5.3,3.2,5,0l-7.9-86.7L101,44.5c-.3-3.2-5.3-3.2-5,0Z" transform="translate(-6.6 -6.6)"/><path d="M88.5,26.5v18a1,1,0,0,0,2,0v-18a1,1,0,0,0-2,0Z" transform="translate(-6.6 -6.6)"/><path d="M79.1,69.6l21.2-12.2a1.5,1.5,0,0,0-1.5-2.6L77.6,67a1.5,1.5,0,0,0,1.5,2.6Z" transform="translate(-6.6 -6.6)"/><path d="M76.4,99.2,102.7,84a1.5,1.5,0,0,0-1.5-2.6L74.9,96.6a1.5,1.5,0,0,0,1.5,2.6Z" transform="translate(-6.6 -6.6)"/><path d="M73.7,128.7l31.4-18.1a1.5,1.5,0,0,0-1.5-2.6L72.2,126.1a1.5,1.5,0,0,0,1.5,2.6Z" transform="translate(-6.6 -6.6)"/><path d="M98.5,42h-18L83,44.5v-18L80.5,29h18L96,26.5v18c0,3.2,5,3.2,5,0v-18A2.5,2.5,0,0,0,98.5,24h-18A2.5,2.5,0,0,0,78,26.5v18A2.5,2.5,0,0,0,80.5,47h18C101.7,47,101.7,42,98.5,42Z" transform="translate(-6.6 -6.6)"/><path d="M172,165c-5.8-.3-9.5-4.7-15.8-3.8-2.6.4-4.4,1.6-6.7,2.7s-6.9,1.3-10.2-.5-9.5-3.2-14.3-1c-3.3,1.5-5.6,3.3-9.5,2.4-2.4-.5-4.3-2.3-6.7-3.1a15.5,15.5,0,0,0-8.3-.3c-2.5.6-4.3,2.2-6.7,3.1-6.2,2.2-10.8-3.5-16.9-3.5s-10.7,5.6-17,3.5c-2.3-.8-4.2-2.5-6.7-3.1a15.4,15.4,0,0,0-8.3.3c-3.1,1-5.4,3.3-8.9,3.3s-5.8-2.2-8.9-3.3a15.4,15.4,0,0,0-8.8-.2c-3.4,1-5.7,3.3-9.5,3.5s-3.2,5.2,0,5c6-.3,10.9-5.5,17-3.5,2.4.8,4.2,2.5,6.7,3.1a15.4,15.4,0,0,0,8.3-.3c2.3-.8,4.2-2.5,6.7-3.1s6.3.9,9.5,2.4c4.8,2.3,9.8,1.5,14.3-1s6.7-2.2,10.2-.5,4.1,2.3,6.7,2.7a14.9,14.9,0,0,0,7.9-1c2.7-1.2,4.8-2.9,7.9-2.9s5.2,1.7,7.9,2.9a14.9,14.9,0,0,0,7.9,1c2.6-.4,4.4-1.6,6.7-2.7s6.9-1.3,10.2.5a15.9,15.9,0,0,0,16.1,0c7.3-3.9,11.9,2,19.1,2.3,3.2.2,3.2-4.8,0-5Z" transform="translate(-6.6 -6.6)"/><path d="M46.3,165.8l9.6-9.3c4.9-4.6,9.7-11.1,17.2-9.2,4.9,1.2,9.2,5.5,13,8.5s8,6.5,12.1,9.7c2.6,2,5-2.4,2.5-4.3-5-3.8-9.7-7.9-14.7-11.7s-8.7-7-14.6-7.6-11.2,3.6-15.9,8S47,158,42.7,162.2c-2.3,2.3,1.2,5.8,3.5,3.5Z" transform="translate(-6.6 -6.6)"/><path d="M84.8,152.8c8.3-3.7,16.7-8.3,26.1-5.6s15.5,9,19.4,16.6c1.5,2.9,5.8.3,4.3-2.5-4.5-8.7-12.9-16.2-22.4-18.9s-20.3,1.7-29.9,6.1c-2.9,1.3-.4,5.6,2.5,4.3Z" transform="translate(-6.6 -6.6)"/><g class="animated flash infinite slower" ><path d="M62.5,34h-23a1.5,1.5,0,0,0,0,3h23a1.5,1.5,0,0,0,0-3Z" transform="translate(-6.6 -6.6)"/><path d="M63.3,25.2l-18-9c-1.7-.9-3.2,1.7-1.5,2.6l18,9c1.7.9,3.2-1.7,1.5-2.6Z" transform="translate(-6.6 -6.6)"/><path d="M61.7,43.2l-18,9c-1.7.9-.2,3.5,1.5,2.6l18-9c1.7-.9.2-3.5-1.5-2.6Z" transform="translate(-6.6 -6.6)"/><path d="M116.5,37h23a1.5,1.5,0,0,0,0-3h-23a1.5,1.5,0,0,0,0,3Z" transform="translate(-6.6 -6.6)"/><path d="M117.3,27.8l18-9c1.7-.9.2-3.5-1.5-2.6l-18,9c-1.7.9-.2,3.5,1.5,2.6Z" transform="translate(-6.6 -6.6)"/><path d="M115.7,45.8l18,9c1.7.9,3.2-1.7,1.5-2.6l-18-9c-1.7-.9-3.2,1.7-1.5,2.6Z" transform="translate(-6.6 -6.6)"/></g></svg>
+
+  <p class="img-404">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 167.8 163.4" fill="currentColor">
+      <title>404-lighthouse</title>
+      <path d="M83,27.5c.5-8.4,12.5-8.4,13,0,.2,3.2,5.2,3.2,5,0C100.7,21.3,96,16,89.5,16S78.3,21.3,78,27.5c-.2,3.2,4.8,3.2,5,0Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M92,18V9c0-3.2-5-3.2-5,0v9c0,3.2,5,3.2,5,0Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M78,44.5l-7.9,86.7L69,143.5c-.3,3.2,4.7,3.2,5,0l7.9-86.7L83,44.5c.3-3.2-4.7-3.2-5,0Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M96,44.5l7.9,86.7,1.1,12.3c.3,3.2,5.3,3.2,5,0l-7.9-86.7L101,44.5c-.3-3.2-5.3-3.2-5,0Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M88.5,26.5v18a1,1,0,0,0,2,0v-18a1,1,0,0,0-2,0Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M79.1,69.6l21.2-12.2a1.5,1.5,0,0,0-1.5-2.6L77.6,67a1.5,1.5,0,0,0,1.5,2.6Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M76.4,99.2,102.7,84a1.5,1.5,0,0,0-1.5-2.6L74.9,96.6a1.5,1.5,0,0,0,1.5,2.6Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M73.7,128.7l31.4-18.1a1.5,1.5,0,0,0-1.5-2.6L72.2,126.1a1.5,1.5,0,0,0,1.5,2.6Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M98.5,42h-18L83,44.5v-18L80.5,29h18L96,26.5v18c0,3.2,5,3.2,5,0v-18A2.5,2.5,0,0,0,98.5,24h-18A2.5,2.5,0,0,0,78,26.5v18A2.5,2.5,0,0,0,80.5,47h18C101.7,47,101.7,42,98.5,42Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M172,165c-5.8-.3-9.5-4.7-15.8-3.8-2.6.4-4.4,1.6-6.7,2.7s-6.9,1.3-10.2-.5-9.5-3.2-14.3-1c-3.3,1.5-5.6,3.3-9.5,2.4-2.4-.5-4.3-2.3-6.7-3.1a15.5,15.5,0,0,0-8.3-.3c-2.5.6-4.3,2.2-6.7,3.1-6.2,2.2-10.8-3.5-16.9-3.5s-10.7,5.6-17,3.5c-2.3-.8-4.2-2.5-6.7-3.1a15.4,15.4,0,0,0-8.3.3c-3.1,1-5.4,3.3-8.9,3.3s-5.8-2.2-8.9-3.3a15.4,15.4,0,0,0-8.8-.2c-3.4,1-5.7,3.3-9.5,3.5s-3.2,5.2,0,5c6-.3,10.9-5.5,17-3.5,2.4.8,4.2,2.5,6.7,3.1a15.4,15.4,0,0,0,8.3-.3c2.3-.8,4.2-2.5,6.7-3.1s6.3.9,9.5,2.4c4.8,2.3,9.8,1.5,14.3-1s6.7-2.2,10.2-.5,4.1,2.3,6.7,2.7a14.9,14.9,0,0,0,7.9-1c2.7-1.2,4.8-2.9,7.9-2.9s5.2,1.7,7.9,2.9a14.9,14.9,0,0,0,7.9,1c2.6-.4,4.4-1.6,6.7-2.7s6.9-1.3,10.2.5a15.9,15.9,0,0,0,16.1,0c7.3-3.9,11.9,2,19.1,2.3,3.2.2,3.2-4.8,0-5Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M46.3,165.8l9.6-9.3c4.9-4.6,9.7-11.1,17.2-9.2,4.9,1.2,9.2,5.5,13,8.5s8,6.5,12.1,9.7c2.6,2,5-2.4,2.5-4.3-5-3.8-9.7-7.9-14.7-11.7s-8.7-7-14.6-7.6-11.2,3.6-15.9,8S47,158,42.7,162.2c-2.3,2.3,1.2,5.8,3.5,3.5Z" transform="translate(-6.6 -6.6)"/>
+      <path d="M84.8,152.8c8.3-3.7,16.7-8.3,26.1-5.6s15.5,9,19.4,16.6c1.5,2.9,5.8.3,4.3-2.5-4.5-8.7-12.9-16.2-22.4-18.9s-20.3,1.7-29.9,6.1c-2.9,1.3-.4,5.6,2.5,4.3Z" transform="translate(-6.6 -6.6)"/>
+      <g class="animated flash infinite slower">
+        <path d="M62.5,34h-23a1.5,1.5,0,0,0,0,3h23a1.5,1.5,0,0,0,0-3Z" transform="translate(-6.6 -6.6)"/>
+        <path d="M63.3,25.2l-18-9c-1.7-.9-3.2,1.7-1.5,2.6l18,9c1.7.9,3.2-1.7,1.5-2.6Z" transform="translate(-6.6 -6.6)"/>
+        <path d="M61.7,43.2l-18,9c-1.7.9-.2,3.5,1.5,2.6l18-9c1.7-.9.2-3.5-1.5-2.6Z" transform="translate(-6.6 -6.6)"/>
+        <path d="M116.5,37h23a1.5,1.5,0,0,0,0-3h-23a1.5,1.5,0,0,0,0,3Z" transform="translate(-6.6 -6.6)"/>
+        <path d="M117.3,27.8l18-9c1.7-.9.2-3.5-1.5-2.6l-18,9c-1.7.9-.2,3.5,1.5,2.6Z" transform="translate(-6.6 -6.6)"/>
+        <path d="M115.7,45.8l18,9c1.7.9,3.2-1.7,1.5-2.6l-18-9c-1.7-.9-3.2,1.7-1.5,2.6Z" transform="translate(-6.6 -6.6)"/>
+      </g>
+    </svg>
+  </p>
+
+  <div class="banner-404">
+    <h1>404</h1>
+    <p>Oops, police door not found...</p>
+    <p class="btn-404">
+      <a href="{{config.base_url}}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-home">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+          <polyline points="9 22 9 12 15 12 15 22"></polyline>
+        </svg>
+        Home
+      </a>
+      <a href='{{config.base_url}}/posts'>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-archive">
+          <polyline points="21 8 21 21 3 21 3 8"></polyline>
+          <rect x="1" y="3" width="22" height="5"></rect>
+          <line x1="10" y1="12" x2="14" y2="12"></line>
+        </svg>
+        Archive
+      </a>
     </p>
-    <div class="banner-404">
-        <h1>404</h1>
-        <p>Oops, police door not found...</p>
-        <p class="btn-404">
-            <a href="{{config.base_url}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>Home</a>
-            <a href='{{config.base_url}}/posts'><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>Archive</a>
-        </p>
-    </div>
+  </div>
+
 </div>
 {% endblock main %}
 
diff --git a/templates/index.html b/templates/index.html
index 90a3f51..58eeb83 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,7 +1,9 @@
 {% import "macros.html" as macros %}
 
 <!DOCTYPE html>
+
 <html lang="en-us">
+
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
@@ -71,44 +73,54 @@
 
   <body id="page">
 
-	{% block header %}
-	{% endblock header %}
-
-	{% block title %}
-	<div id="spotlight" class="animated fadeIn">
-	  <div id="home-center">
-		<h1 id="home-title">{{config.title}}</h1>
-		<p id="home-subtitle">{{config.extra.home_subtitle}}</p>
-		<div id="home-social">
-		  {{macros::render_social_icons()}}
-		</div>
-		{% endblock title %}
-		{% block main %}
-		<nav id="home-nav" class="site-nav">
-		  {% for s in config.extra.hermit_menu %}
-		  <a href="{{config.base_url ~ s.link}}">{{s.name}}</a>
-		  {% endfor %}
-		</nav>
-		{% endblock main %}
-	  </div>
-
-	  {% block footer %}
-	  <div id="home-footer">
-		<p>&copy; {{ now() | date(format="%Y")}}
-      <a href="{{config.base_url}}">{{config.extra.author.name}}</a>
-      {% if config.generate_feed %}
-		  &#183; <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
-      {% endif %}
-		  </a>
-		</p>
-	  </div>
-	  {% endblock footer %}
-	</div>
-
-	<script src="{{get_url(path="js/main.js")}}"></script>
-
-	<!-- Math rendering with KaTeX -->
+    {% block header %}
+    {% endblock header %}
+
+    {% block title %}
+    <div id="spotlight" class="animated fadeIn">
+      <div id="home-center">
+        <h1 id="home-title">{{config.title}}</h1>
+        <p id="home-subtitle">{{config.extra.home_subtitle}}</p>
+        <div id="home-social">
+          {{macros::render_social_icons()}}
+        </div>
+        {% endblock title %}
+
+        {% block main %}
+        <nav id="home-nav" class="site-nav">
+          {% for s in config.extra.hermit_menu %}
+          <a href="{{config.base_url ~ s.link}}">{{s.name}}</a>
+          {% endfor %}
+        </nav>
+        {% endblock main %}
+      </div>
+
+      {% block footer %}
+      <div id="home-footer">
+        <p>&copy; {{ now() | date(format="%Y")}}
+          <a href="{{config.base_url}}">{{config.extra.author.name}}</a>
+
+          {% if config.generate_feed %}
+          &#183;
+          <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="feather feather-rss">
+              <path d="M4 11a9 9 0 0 1 9 9"></path>
+              <path d="M4 4a16 16 0 0 1 16 16"></path>
+              <circle cx="5" cy="19" r="1"></circle>
+            </svg>
+          </a>
+          {% endif %}
+
+        </p>
+      </div>
+      {% endblock footer %}
+    </div>
+
+    <script src="{{get_url(path="js/main.js")}}"></script>
+
+    <!-- Math rendering with KaTeX -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
 
     <!-- The loading of KaTeX is deferred to speed up page rendering -->
@@ -116,17 +128,20 @@
 
     <!-- To automatically render math in text elements, include the auto-render extension -->
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
-        onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
+      onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>
 
-	{% if config.extra.google_analytics.enable %}
+    {% if config.extra.google_analytics.enable %}
     <!-- Global Site Tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.google_analytics.id }}"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
+
       gtag('config', '{{ config.extra.google_analytics.id }}');
     </script>
     {% endif %}
+
   </body>
+
 </html>
diff --git a/templates/macros.html b/templates/macros.html
index e12a56e..1f5488f 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -10,11 +10,15 @@
 
 {% macro footer() %}
 <footer id="site-footer" class="section-inner thin animated fadeIn faster">
-  <p>&copy; {{ now() | date(format="%Y") }} <a href="{{ config.base_url }}">{{ config.extra.author.name }}</a>{{ config.extra.footer_copyright | safe }}</p>
-  <p>Made with <a href="https://www.getzola.org" target="_blank" rel="noopener">Zola</a> &#183; Theme <a href="https://github.com/VersBinarii/hermit_zola" target="_blank" rel="noopener">Hermit_Zola</a>
-	{% if config.generate_feed %}
-    &#183; <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
-	{% endif %}
+  <p>
+    &copy; {{ now() | date(format="%Y") }}
+    <a href="{{ config.base_url }}">{{ config.extra.author.name }}</a>
+    {{ config.extra.footer_copyright | safe }}
+  </p>
+  <p>Made with <a href="https://www.getzola.org" target="_blank" rel="noopener">Zola</a> &#183; Theme : <a href="https://github.com/VersBinarii/hermit_zola" target="_blank" rel="noopener">Hermit_Zola</a>
+  {% if config.generate_feed %}
+  &#183; <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a>
+  {% endif %}
   </p>
 </footer>
 {% endmacro footer %}
diff --git a/templates/page.html b/templates/page.html
index d10adbc..eb7d141 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -10,7 +10,6 @@
         <a href="{{ config.base_url}}">{{ config.title }}</a>
       </div>
       <nav class="site-nav hide-in-mobile">
-
         {% for menu_item in config.extra.hermit_menu %}
         <a href="{{ config.base_url ~ menu_item.link }}">{{ menu_item.name }}</a>
         {% endfor %}
@@ -21,16 +20,8 @@
         {{ macros::render_social_icons() }}
       </span>
       <button id="menu-btn" class="hdr-btn" title="Menu">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
           class="feather feather-menu">
           <line x1="3" y1="12" x2="21" y2="12"></line>
           <line x1="3" y1="6" x2="21" y2="6"></line>
@@ -40,10 +31,13 @@
     </div>
   </div>
 </header>
+
 <div id="mobile-menu" class="animated fast">
   <ul>
     {% for menu_item in config.extra.hermit_menu %}
-    <li><a href="{{ config.base_url ~ menu_item.link }}">{{ menu_item.name }}</a></li>
+    <li>
+      <a href="{{ config.base_url ~ menu_item.link }}">{{ menu_item.name }}</a>
+    </li>
     {% endfor %}
   </ul>
 </div>
@@ -54,116 +48,170 @@
 {% block main %}
 <main class="site-main section-inner animated fadeIn faster">
   <article class="thin">
-	<header class="post-header">
-	  <div class="post-meta">
-		{% if page.date %}
-		<span>{{ page.date | date(format="%b %d, %Y")}}</span>
-		<small> - {{ macros::read_time(words=page.word_count) }}</small>
-		{% endif %}
-            {% if page.extra.toc %}
-            <button id="toc-btn" class="hdr-btn desktop-only-ib">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                    class="feather feather-list">
-                    <line x1="8" y1="6" x2="21" y2="6"></line>
-                    <line x1="8" y1="12" x2="21" y2="12"></line>
-                    <line x1="8" y1="18" x2="21" y2="18"></line>
-                    <line x1="3" y1="6" x2="3" y2="6"></line>
-                    <line x1="3" y1="12" x2="3" y2="12"></line>
-                    <line x1="3" y1="18" x2="3" y2="18"></line>
-                </svg><span> ToC</span>
-            </button>
-		    {% endif %}
-	  </div>
-	  <h1>{{ page.title }}</h1>
-	</header>
-
-	<div class="content">
-	  {{ page.content | safe }}
-	</div>
-
-	<hr class="post-end">
-	<footer class="post-info">
-    {% if page.taxonomies and page.taxonomies.tags %}
-	  <p>
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
-		{% for k, tags in page.taxonomies %}
-		{% for t in tags %}
-		<span class="tag"><a href="{{get_taxonomy_url(kind="tags", name=t)}}">{{t}}</a></span>
-		{% endfor %}
-		{% endfor %}
-    </p>
-    {% endif %}
-    <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>{{ page.word_count}} Words</p>
-    {% if page.date %}
-    <p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>{{ page.date }}</p>
-    {% endif %}
-	</footer>
+    <header class="post-header">
+      <div class="post-meta">
+
+        {% if page.date %}
+        <span>{{ page.date | date(format="%b %d, %Y")}}</span>
+        <small> - {{ macros::read_time(words=page.word_count) }}</small>
+        {% endif %}
+
+        {% if page.extra.toc %}
+          <button id="toc-btn" class="hdr-btn desktop-only-ib">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+              class="feather feather-list">
+              <line x1="8" y1="6" x2="21" y2="6"></line>
+              <line x1="8" y1="12" x2="21" y2="12"></line>
+              <line x1="8" y1="18" x2="21" y2="18"></line>
+              <line x1="3" y1="6" x2="3" y2="6"></line>
+              <line x1="3" y1="12" x2="3" y2="12"></line>
+              <line x1="3" y1="18" x2="3" y2="18"></line>
+            </svg>
+            <span> ToC</span>
+          </button>
+        {% endif %}
+
+      </div>
+      <h1>{{ page.title }}</h1>
+    </header>
+
+    <div class="content">
+      {{ page.content | safe }}
+    </div>
+
+    <hr class="post-end">
+
+    <footer class="post-info">
+
+      {% if page.taxonomies and page.taxonomies.tags %}
+      <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-tag meta-icon">
+          <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+          <line x1="7" y1="7" x2="7" y2="7"></line>
+        </svg>
+
+        {% for k, tags in page.taxonomies %}
+          {% for t in tags %}
+            <span class="tag">
+              <a href="{{get_taxonomy_url(kind="tags", name=t)}}">{{t}}</a>
+            </span>
+          {% endfor %}
+        {% endfor %}
+      </p>
+      {% endif %}
+
+      <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-file-text">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+          <line x1="16" y1="13" x2="8" y2="13"></line>
+          <line x1="16" y1="17" x2="8" y2="17"></line>
+          <polyline points="10 9 9 9 8 9"></polyline>
+        </svg>
+
+        {{ page.word_count }} Words
+      </p>
+
+      {% if page.date %}
+      <p>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="16" y1="2" x2="16" y2="6"></line>
+          <line x1="8" y1="2" x2="8" y2="6"></line>
+          <line x1="3" y1="10" x2="21" y2="10"></line>
+        </svg>
+
+        {{ page.date }}
+      </p>
+      {% endif %}
+
+    </footer>
   </article>
-    {% if page.extra.toc %}
-    <aside id="toc">
-        <div id="TableOfContents">
-            <div class="toc-title">Table of Contents</div>
+
+  {% if page.extra.toc %}
+  <aside id="toc">
+    <div id="TableOfContents">
+      <div class="toc-title">Table of Contents</div>
+        <ul>
+          {% for h1 in page.toc %}
+          <li>
+            <a href="{{h1.permalink | safe}}">{{ h1.title }}</a>
+            {% if h1.children %}
             <ul>
-                {% for h1 in page.toc %}
-                <li>
-                    <a href="{{h1.permalink | safe}}">{{ h1.title }}</a>
-                    {% if h1.children %}
-                    <ul>
-                        {% for h2 in h1.children %}
-                        <li>
-                            <a href="{{h2.permalink | safe}}">{{ h2.title }}</a>
-                        </li>
-                        {% endfor %}
-                    </ul>
-                    {% endif %}
-                </li>
-                {% endfor %}
+              {% for h2 in h1.children %}
+              <li>
+                <a href="{{h2.permalink | safe}}">{{ h2.title }}</a>
+              </li>
+              {% endfor %}
             </ul>
-        </div>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
     </aside>
     {% endif %}
 
   <div class="post-nav thin">
-	{% if page.extra.later %}
-	<a class="next-post" href="{{ page.extra.later.permalink }}">
-	  <span class="post-nav-label">
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left">
-		  <line x1="19" y1="12" x2="5" y2="12"></line>
-		  <polyline points="12 19 5 12 12 5"></polyline>
-		</svg>&nbsp;Newer</span><br>
-		<span>{{ page.extra.later.title }}</span>
-	</a>
-	{% endif %}
-	{% if page.extra.earlier %}
-	<a class="prev-post" href="{{ page.extra.earlier.permalink }}">
-	  <span class="post-nav-label">Older&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span><br>
-	  <span>{{ page.extra.earlier.title }}</span>
-	</a>
-	{% endif %}
+
+    {% if page.extra.later %}
+    <a class="next-post" href="{{ page.extra.later.permalink }}">
+      <span class="post-nav-label">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-arrow-left">
+          <line x1="19" y1="12" x2="5" y2="12"></line>
+          <polyline points="12 19 5 12 12 5"></polyline>
+        </svg>
+        &nbsp;Newer
+      </span>
+      <br>
+      <span>{{ page.extra.later.title }}</span>
+    </a>
+    {% endif %}
+
+    {% if page.extra.earlier %}
+    <a class="prev-post" href="{{ page.extra.earlier.permalink }}">
+      <span class="post-nav-label">
+        Older&nbsp;
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="feather feather-arrow-right">
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+          <polyline points="12 5 19 12 12 19"></polyline>
+        </svg>
+      </span>
+      <br>
+      <span>{{ page.extra.earlier.title }}</span>
+    </a>
+    {% endif %}
+
   </div>
 
-  {% if config.extra.disqus.enable  and not page.extra.disable_comments%}
-    <div id="disqus_thread" class="thin"></div>
-    <script>
-        /**
-        *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
-        *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
-
-        (function() { // DON'T EDIT BELOW THIS LINE
-            var disqus_config = function () {
-                this.page.url = "{{ page.permalink }}";  // Replace PAGE_URL with your page's canonical URL variable
-                this.page.identifier = "{{ page.permalink }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
-            };
-            var d = document, s = d.createElement('script');
-            s.src = 'https://{{config.extra.disqus.shortname}}.disqus.com/embed.js';
-            s.setAttribute('data-timestamp', +new Date());
-            (d.head || d.body).appendChild(s);
-        })();
-    </script>
-    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+  {% if config.extra.disqus.enable and not page.extra.disable_comments %}
+  <div id="disqus_thread"></div>
+  <script>
+    (function() {
+      var disqus_config = function () {
+        this.page.url = "{{ page.extra.permalink }}";
+        this.page.identifier = "{{ page.extra.permalink }}";
+      };
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{config.extra.disqus.shortname}}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', + new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
   {% endif %}
+
 </main>
 {% endblock main %}
 
diff --git a/templates/section.html b/templates/section.html
index 2ef9118..679a3ea 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -11,9 +11,7 @@
       </div>
       <nav class="site-nav hide-in-mobile">
         {% for menu_item in config.extra.hermit_menu %}
-        <a href="{{ config.base_url ~ menu_item.link }}"
-          >{{ menu_item.name }}</a
-        >
+        <a href="{{ config.base_url ~ menu_item.link }}">{{ menu_item.name }}</a>
         {% endfor %}
       </nav>
     </div>
@@ -22,16 +20,8 @@
         {{ macros::render_social_icons() }}
       </span>
       <button id="menu-btn" class="hdr-btn" title="Menu">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
           class="feather feather-menu">
           <line x1="3" y1="12" x2="21" y2="12"></line>
           <line x1="3" y1="6" x2="21" y2="6"></line>
@@ -41,6 +31,7 @@
     </div>
   </div>
 </header>
+
 <div id="mobile-menu" class="animated fast">
   <ul>
     {% for menu_item in config.extra.hermit_menu %}
diff --git a/templates/tags/list.html b/templates/tags/list.html
index 807181f..c3268c3 100644
--- a/templates/tags/list.html
+++ b/templates/tags/list.html
@@ -31,6 +31,7 @@
     </div>
   </div>
 </header>
+
 <div id="mobile-menu" class="animated fast">
   <ul>
     {% for menu_item in config.extra.hermit_menu %}
@@ -46,12 +47,16 @@
 <main class="site-main section-inner thin animated fadeIn faster" style="text-align: center;">
   {% block content %}
   {% for tag in terms %}
+
   <header class="post-header">
-      <h1 class="post-header__title"><a href="{{ config.base_url }}/tags/{{ tag.slug }}">{{ tag.name }}</a></h1>
+    <h1 class="post-header__title">
+      <a href="{{ config.base_url }}/tags/{{ tag.slug }}">{{ tag.name }}</a>
+    </h1>
     <p class="post-header__info">
       {{ tag.pages | length }} post{{ tag.pages | length | pluralize }}
     </p>
   </header>
+
   {% endfor %}
   {% endblock content %}
 </main>
diff --git a/templates/tags/single.html b/templates/tags/single.html
index 6037d5d..1752e8a 100644
--- a/templates/tags/single.html
+++ b/templates/tags/single.html
@@ -20,16 +20,8 @@
         {{ macros::render_social_icons() }}
       </span>
       <button id="menu-btn" class="hdr-btn" title="Menu">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
           class="feather feather-menu">
           <line x1="3" y1="12" x2="21" y2="12"></line>
           <line x1="3" y1="6" x2="21" y2="6"></line>
@@ -61,9 +53,7 @@
       <li class="post-item">
         <a href="{{ page.permalink }}">
           <span class="post-title">{{ page.title }}</span>
-          <span class="post-day"
-            >{{ page.date | date(format="%b %d") }}</span
-          >
+          <span class="post-day">{{ page.date | date(format="%b %d") }}</span>
         </a>
       </li>
       {% endfor %}