added sticky footer, new SVG icons, and some minor fixes to the layout

static/css/style.css

@@ -62,7 +62,9 @@
 html {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-    font-size: 62.5%
+  font-size: 62.5%;
+  scrollbar-color: var(--metaColor) var(--bgColor);
+  scrollbar-width: thin;
 }
 
 body {
@@ -71,7 +73,6 @@ body {
   line-height: 1.35;
   max-width: 64rem;
   margin: auto;
-    padding: 1rem;
   overflow-wrap: break-word;
   background: var(--bgColor);
   color: var(--fgColor);
@@ -79,7 +80,6 @@ body {
 
 h1 {
   font-size: 2.4rem;
-    margin: 1rem 1rem 1.5rem 0;
   color: var(--bgColor);
   background-color: var(--metaColor);
   text-align: center;
@@ -101,6 +101,9 @@ h6::before {
 }
 
 a {
+  text-decoration: none;
+  padding: 0 .2rem 0 .2rem;
+  border-radius: .3rem;
   color: var(--linkColor);
 }
 
@@ -128,13 +131,6 @@ ul li:hover::marker {
   color: var(--linkColor)
 }
 
-li:hover {
-    transform: scale(1.02);
-    -webkit-transition: .1s ease-in;
-    -moz-transition: .1s ease-in;
-    -o-transition: .1s ease-in;
-}
-
 blockquote {
   border-left: 5px solid var(--metaColor);
   margin: 1rem;
@@ -172,11 +168,15 @@ pre {
 p code,
 li code,
 div code {
+  padding: 0 .2rem 0 .2rem;
+  border-radius: .3rem;
   color: var(--bgColor);
   background-color: var(--fgColor);
 }
 
 pre code {
+  padding: 0;
+  border-radius: 0;
   color: inherit;
   background-color: inherit;
 }
@@ -229,9 +229,33 @@ textarea {
   color: var(--metaColor)
 }
 
+/* Site Specific Styling */
+.wrapper {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 2rem;
+}
+
+/* Icons settings */
+.icons {
+  width: 2.0rem;
+  height: 2.0rem;
+  aspect-ratio: 1/1;
+  top: .3rem;
+  position: relative;
+  color: var(--fgColor);
+  fill: var(--fgColor);
+  background-color: transparent;
+}
+
+.icons__background:hover {
+  background-color: transparent;
+  color: var(--metaColor);
+}
+
 .navBar {
-    margin: .5rem;
+  padding: 1rem 0 0 0;
-    margin-bottom: 2rem;
   display: flex;
   flex-direction: row;
   gap: .4rem;
@@ -273,32 +297,21 @@ textarea {
 .footnote-definition {
   margin: 0 0 0 2rem;
 }
+
 .footnote-definition-label {
   color: var(--metaColor);
 }
+
 .footnote-definition p {
   display: inline;
   padding: 0 0 0 1rem;
 }
 
-.footContainer,
-.footRight {
-    display: flex;
-    align-content: center
-}
-
 .footContainer {
-    flex-direction: row;
+  display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-    align-items: flex-start
+  align-items: center;
-}
-
-.footRight {
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center
 }
 
 .noStyle {
@@ -323,3 +336,10 @@ textarea {
 .webring {
   margin: 0.5rem;
 }
+
+/* Add Padding */
+@media (max-width: 650px) {
+  .wrapper {
+    margin: 1rem;
+  }
+}

static/icons.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="rss" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
+  </symbol>
+
+  <symbol id="darkMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21Z"/>
+  </symbol>
+
+  <symbol id="lightMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M12 17q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288Z"/>
+  </symbol>
+
+  <symbol id="chevronLeft" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42Z"/>
+  </symbol>
+
+  <symbol id="chevronRight" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
+    <path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z"/>
+  </symbol>
+</svg>

templates/base.html

@@ -1,148 +1,18 @@
 <!doctype html>
 <html lang="{{ lang }}">
   <head>
-    <meta charset="UTF-8">
+    {% include "head.html" %}
-    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <meta name="robots" content="index, follow">
-    {% if page.title %}
-    {% set title = page.title %}
-    {% elif section.title %}
-    {% set title = section.title %}
-    {% elif config.title %}
-    {% set title = config.title %}
-    {% endif %}
-    {% if page.extra.author %}
-    {% set author = page.extra.author %}
-    {% elif section.extra.author %}
-    {% set author = section.extra.author %}
-    {% elif config.extra.author %}
-    {% set author = config.extra.author %}
-    {% endif %}
-    {% if page.description %}
-    {% set description = page.description | truncate(length=150) %}
-    {% elif section.description %}
-    {% set description = section.description | truncate(length=150) %}
-    {% elif config.description %}
-    {% set description = config.description | truncate(length=150) %}
-    {% endif %}
-    {% if page.extra.image %}
-    {% set image = get_url(path=page.extra.image, trailing_slash=false) %}
-    {% elif section.extra.image %}
-    {% set image = get_url(path=section.extra.image, trailing_slash=false) %}
-    {% elif config.extra.favicon %}
-    {% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
-    {% endif %}
-    {% if page.permalink %}
-    {% set url = page.permalink %}
-    {% elif section.permalink %}
-    {% set url = section.permalink %}
-    {% elif config.base_url %}
-    {% set url = config.base_url %}
-    {% endif %}
-    {% if title %}
-    <title>{{ title }}</title>
-    {% endif %}
-    {% block metatags %}
-    {% if title %}
-    <meta name="title" content="{{ title }}">
-    {% endif %}
-    {% if author %}
-    <meta name="author" content="{{ author }}">
-    {% endif %}
-    {% if description %}
-    <meta name="description" content="{{ description }}">
-    {% endif %}
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="{{ url | safe }}">
-    {% if title %}
-    <meta property="og:site_name" content="{{ config.title }}">
-    {% endif %}
-    {% if title %}
-    <meta property="og:title" content="{{ title }}">
-    {% endif %}
-    {% if description %}
-    <meta property="og:description" content="{{ description }}">
-    {% endif %}
-    {% if image %}
-    <meta property="og:image" content="{{ image }}">
-    {% endif %}
-    {% set twitter_card = config.extra.twitter_card | default(value=true) %}
-    {% if twitter_card != false %}
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="{{ url | safe }}">
-    {% if title %}
-    <meta property="twitter:title" content="{{ title }}">
-    {% endif %}
-    {% if description %}
-    <meta property="twitter:description" content="{{ description }}">
-    {% endif %}
-    {% if image %}
-    <meta property="twitter:image" content="{{ image }}">
-    {% endif %}
-    {% endif %}
-    <link rel="canonical" href="{{ url | safe }}">
-    {% if image %}
-    <link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
-    {% endif %}
-    {% endblock metatags %}
-    {% if config.generate_feed %}
-    {% block feed %}
-    <link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
-    {% endblock feed %}
-    {% endif %}
-    {% block css %}
-    <link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
-    {% endblock css %}
   </head>
   <body>
     <div class="wrapper">
       <header>
-        {% if config.extra.header_nav %}
+        {% include "header.html" %}
-        <nav class="navBar">
-          {% for nav_item in config.extra.header_nav %}
-          {% set current_nav_item = nav_item[lang] %}
-          {% if current_nav_item and current_nav_item.name %}
-          <a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
-          {% endif %}
-          {% endfor %}
-          <div class="themeSwitch">
-            <button class="themeButton light" onclick="setTheme('light')" title="Light mode">◐</button>
-            <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode">◑</button>
-          </div>
-        </nav>
-        {% endif %}
-        <script>
-          const setTheme = (theme) => {
-              document.documentElement.className = theme;
-              localStorage.setItem('theme', theme);
-          }
-          const getTheme = () => {
-              const theme = localStorage.getItem('theme');
-              theme && setTheme(theme);
-          }
-          getTheme()
-        </script>
       </header>
       <main>
         {% block content %}{% endblock content %}
       </main>
       <footer>
-        {% block footer %}{% endblock footer %}
+        {% include "footer.html" %}
-        <hr>
-        <div class=footContainer>
-          <div class="footLeft">
-            <p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
-              Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
-            </p>
-          </div>
-          <div class="footRight">
-            <!-- Size 46x46 -->
-            <img class="footGif noStyle" loading="lazy" src="https://i.ibb.co/XYDpfcs/foot.gif" alt="footGif">
-            <a class="metaData" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates.">RSS</a>
-          </div>
-        </div>
       </footer>
     </div>
   </body>

templates/blog-page.html

@@ -1,12 +1,9 @@
 {% extends "base.html" %}
 
-{% block header %}
+{% block content %}
 <div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
 <time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
 <h1>{{ page.title }}</h1>
-{% endblock header %}
-
-{% block content %}
 
 {% if page.toc and page.extra.toc %}
 <h2>Table of contents</h2>
@@ -35,11 +32,8 @@
 </ul>
 {% endif %}
 
-
 {{ page.content | safe }}
-{% endblock content %}
 
-{% block footer %}
 <p class="tagsData">
 {% if page.taxonomies.tags %}
 {% for tag in page.taxonomies.tags %}
@@ -47,4 +41,4 @@
 {% endfor %}
 {% endif %}
 </p>
-{% endblock footer %}
+{% endblock content %}

templates/footer.html

@@ -0,0 +1,11 @@
+<hr>
+<div class=footContainer>
+  <div class="footLeft">
+    <p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
+      Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme &amp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
+    </p>
+  </div>
+  <div class="footRight">
+    <a class="icons__background" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
+  </div>
+</div>

templates/head.html

@@ -0,0 +1,94 @@
+<meta charset="UTF-8">
+<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
+<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+<meta name="robots" content="index, follow">
+{% if page.title %}
+{% set title = page.title %}
+{% elif section.title %}
+{% set title = section.title %}
+{% elif config.title %}
+{% set title = config.title %}
+{% endif %}
+{% if page.extra.author %}
+{% set author = page.extra.author %}
+{% elif section.extra.author %}
+{% set author = section.extra.author %}
+{% elif config.extra.author %}
+{% set author = config.extra.author %}
+{% endif %}
+{% if page.description %}
+{% set description = page.description | truncate(length=150) %}
+{% elif section.description %}
+{% set description = section.description | truncate(length=150) %}
+{% elif config.description %}
+{% set description = config.description | truncate(length=150) %}
+{% endif %}
+{% if page.extra.image %}
+{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
+{% elif section.extra.image %}
+{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
+{% elif config.extra.favicon %}
+{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
+{% endif %}
+{% if page.permalink %}
+{% set url = page.permalink %}
+{% elif section.permalink %}
+{% set url = section.permalink %}
+{% elif config.base_url %}
+{% set url = config.base_url %}
+{% endif %}
+{% if title %}
+<title>{{ title }}</title>
+{% endif %}
+{% block metatags %}
+{% if title %}
+<meta name="title" content="{{ title }}">
+{% endif %}
+{% if author %}
+<meta name="author" content="{{ author }}">
+{% endif %}
+{% if description %}
+<meta name="description" content="{{ description }}">
+{% endif %}
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ url | safe }}">
+{% if title %}
+<meta property="og:site_name" content="{{ config.title }}">
+{% endif %}
+{% if title %}
+<meta property="og:title" content="{{ title }}">
+{% endif %}
+{% if description %}
+<meta property="og:description" content="{{ description }}">
+{% endif %}
+{% if image %}
+<meta property="og:image" content="{{ image }}">
+{% endif %}
+{% set twitter_card = config.extra.twitter_card | default(value=true) %}
+{% if twitter_card != false %}
+<meta property="twitter:card" content="summary_large_image">
+<meta property="twitter:url" content="{{ url | safe }}">
+{% if title %}
+<meta property="twitter:title" content="{{ title }}">
+{% endif %}
+{% if description %}
+<meta property="twitter:description" content="{{ description }}">
+{% endif %}
+{% if image %}
+<meta property="twitter:image" content="{{ image }}">
+{% endif %}
+{% endif %}
+<link rel="canonical" href="{{ url | safe }}">
+{% if image %}
+<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
+{% endif %}
+{% endblock metatags %}
+{% if config.generate_feed %}
+{% block feed %}
+<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}"> 
+{% endblock feed %}
+{% endif %}
+{% block css %}
+<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
+{% endblock css %}

templates/header.html

@@ -0,0 +1,25 @@
+{% if config.extra.header_nav %}
+<nav class="navBar">
+  {% for nav_item in config.extra.header_nav %}
+  {% set current_nav_item = nav_item[lang] %}
+  {% if current_nav_item and current_nav_item.name %}
+  <a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
+  {% endif %}
+  {% endfor %}
+  <div class="themeSwitch">
+    <button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
+    <button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
+  </div>
+</nav>
+{% endif %}
+<script>
+  const setTheme = (theme) => {
+      document.documentElement.className = theme;
+      localStorage.setItem('theme', theme);
+  }
+  const getTheme = () => {
+      const theme = localStorage.getItem('theme');
+      theme && setTheme(theme);
+  }
+  getTheme()
+</script>

templates/page.html

@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ page.title }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ page.title }}</h1>
 
 {% if page.toc and page.extra.toc %}
 <h2>Table of contents</h2>
@@ -34,9 +31,7 @@
 {% endif %}
 
 {{ page.content | safe }}
-{% endblock content %}
 
-{% block footer %}
 <p class="tagsData">
 {% if page.taxonomies.tags %}
 {% for tag in page.taxonomies.tags %}
@@ -44,4 +39,4 @@
 {% endfor %}
 {% endif %}
 </p>
-{% endblock footer %}
+{% endblock content %}

templates/section.html

@@ -1,10 +1,8 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ section.title }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ section.title }}</h1>
+
 {{ section.content | safe }}
 
 {% if paginator %}

templates/shortcodes/webring.html

@@ -1,4 +1,4 @@
 <span class="webring">
-<a href={{prev}}>⇱</a> 
+<a class="icons__background" href={{prev}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a> 
 <a href={{webring}}>{{webringName}}</a> 
-<a href={{next}}>⇲</a></span>
+<a class="icons__background" href={{next}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>

templates/tags/list.html

@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ taxonomy.name }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ taxonomy.name }}</h1>
 <p>
 {% for term in terms %}
 <a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]

templates/tags/single.html

@@ -1,10 +1,7 @@
 {% extends "base.html" %}
 
-{% block header %}
-<h1>{{ term.name }}</h1>
-{% endblock header %}
-
 {% block content %}
+<h1>{{ term.name }}</h1>
 {% if paginator %}
 {% set pages = paginator.pages %}
 {% else %}