Show build commit/branch in the footer

Single-line addition next to the existing Pelican/Python credit,
using the same '·' delimiter as the header toggles. Only renders when
SITE_COMMIT is set (i.e. built via the CI workflow, not a plain local
build).

static/css/pygments.css

@@ -0,0 +1,69 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f8f8f8; }
+.highlight .c { color: #408080; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008000 } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #B00040 } /* Keyword.Type */
+.highlight .m { color: #666666 } /* Literal.Number */
+.highlight .s { color: #BA2121 } /* Literal.String */
+.highlight .na { color: #7D9029 } /* Name.Attribute */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #880000 } /* Name.Constant */
+.highlight .nd { color: #AA22FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0000FF } /* Name.Function */
+.highlight .nl { color: #A0A000 } /* Name.Label */
+.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #19177C } /* Name.Variable */
+.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #666666 } /* Literal.Number.Bin */
+.highlight .mf { color: #666666 } /* Literal.Number.Float */
+.highlight .mh { color: #666666 } /* Literal.Number.Hex */
+.highlight .mi { color: #666666 } /* Literal.Number.Integer */
+.highlight .mo { color: #666666 } /* Literal.Number.Oct */
+.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
+.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+.highlight .sc { color: #BA2121 } /* Literal.String.Char */
+.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #008000 } /* Literal.String.Other */
+.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
+.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+.highlight .ss { color: #19177C } /* Literal.String.Symbol */
+.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #0000FF } /* Name.Function.Magic */
+.highlight .vc { color: #19177C } /* Name.Variable.Class */
+.highlight .vg { color: #19177C } /* Name.Variable.Global */
+.highlight .vi { color: #19177C } /* Name.Variable.Instance */
+.highlight .vm { color: #19177C } /* Name.Variable.Magic */
+.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */

static/css/site.css

@@ -1,4 +1,5 @@
-@import url("pygment.css");
+@import url("pygments.css");
+@import url("pygments-dark.css") (prefers-color-theme: dark);
 
 @font-face {
   font-family: 'Latin Modern';
@@ -40,9 +41,73 @@
     url('../fonts/LM-bold-italic.ttf') format('truetype');
 }
 
+:root {
+  --main-bg-color: hsl(210, 20%, 98%);
+  --main-text-color: hsl(0, 5%, 10%);
+  --main-link-color: hsl(220, 90%, 45%);
+  --accent-default: hsl(220, 90%, 45%);
+  --accent-alt: hsl(140, 45%, 28%);
+  --table-border-color: hsl(0, 0%, 85%);
+  --table-head-border-color: hsl(0, 0%, 70%);
+  --main-font: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
+}
+
+html[data-font="sans"] {
+  --main-font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --main-bg-color: hsl(0, 5%, 10%);
+    --main-text-color: hsl(210, 20%, 98%);
+    --main-link-color: hsl(0, 100%, 65%);
+    --accent-default: hsl(0, 100%, 65%);
+    --accent-alt: hsl(55, 100%, 60%);
+    --table-border-color: hsl(0, 0%, 15%);
+    --table-head-border-color: hsl(0, 0%, 30%);
+  }
+}
+
+:root[data-theme="dark"] {
+  --main-bg-color: hsl(0, 5%, 10%);
+  --main-text-color: hsl(210, 20%, 98%);
+  --main-link-color: hsl(0, 100%, 65%);
+  --accent-default: hsl(0, 100%, 65%);
+  --accent-alt: hsl(55, 100%, 60%);
+  --table-border-color: hsl(0, 0%, 15%);
+  --table-head-border-color: hsl(0, 0%, 30%);
+}
+
+:root[data-theme="light"] {
+  --main-bg-color: hsl(210, 20%, 98%);
+  --main-text-color: hsl(0, 5%, 10%);
+  --main-link-color: hsl(220, 90%, 45%);
+  --accent-default: hsl(220, 90%, 45%);
+  --accent-alt: hsl(140, 45%, 28%);
+  --table-border-color: hsl(0, 0%, 85%);
+  --table-head-border-color: hsl(0, 0%, 70%);
+}
+
+/* Accent-Alt-Override */
+:root[data-accent="alt"]:not([data-theme="dark"]) {
+  --main-link-color: hsl(140, 45%, 28%);
+  --main-bg-color: hsl(35, 30%, 92%);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-accent="alt"]:not([data-theme]) {
+    --main-link-color: hsl(55, 100%, 60%);
+    --main-bg-color: hsl(260, 15%, 8%);
+  }
+}
+:root[data-theme="dark"][data-accent="alt"] {
+  --main-link-color: hsl(55, 100%, 60%);
+  --main-bg-color: hsl(260, 15%, 8%);
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }
+
 body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, dl, dd {
   margin: 0;
 }
@@ -67,9 +132,41 @@ body {
   overflow-x: hidden;
   margin: 0 auto;
   padding: 2rem 1.25rem;
-  color: hsl(0, 5%, 10%);
-  background-color: hsl(210, 20%, 98%);
+  color: var(--main-text-color);
+  background-color: var(--main-bg-color);
   text-rendering: optimizeLegibility;
+  font-family: var(--main-font);
+}
+
+header {
+  position: relative;
+}
+
+.header-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0;
+  margin: -1.75rem -0.5rem 0 0;
+}
+
+.header-delimiter {
+  color: var(--table-border-color);
+  font-size: 1rem;
+  line-height: 1;
+  user-select: none;
+}
+
+.lang-switcher {
+  position: static;
+  list-style: none;
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
 }
 
 p {
@@ -83,7 +180,8 @@ a:not([class]) {
 }
 
 a, a:visited {
-  color: #a00;
+  color: var(--main-link-color);
+  text-decoration: none;
 }
 
 a:focus {
@@ -91,6 +189,10 @@ a:focus {
   outline: 2px solid hsl(220, 90%, 52%);
 }
 
+a:hover,
+a:focus-visible {
+  text-decoration: underline;
+}
 
 h1 {
   font-size: 2.5rem;
@@ -145,6 +247,66 @@ ul, ol {
   padding: 0;
 }
 
+ul.menuitems {
+  list-style: none;
+  margin: 3rem 0 0 0;
+  font-size: 0.9rem;
+}
+
+#theme-toggle,
+#font-toggle {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: var(--main-link-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.85;
+  transition: opacity 0.15s ease;
+}
+
+#theme-toggle:hover,
+#theme-toggle:focus-visible,
+#font-toggle:hover,
+#font-toggle:focus-visible {
+  opacity: 1;
+}
+
+#accent-toggle {
+  width: 0.9rem;
+  height: 0.9rem;
+  padding: 0;
+  border-radius: 50%;
+  background: linear-gradient(90deg, var(--accent-default) 50%, var(--accent-alt) 50%);
+  border: none;
+  cursor: pointer;
+  opacity: 0.85;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+#accent-toggle:hover,
+#accent-toggle:focus-visible {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+#theme-toggle:focus-visible,
+#accent-toggle:focus-visible,
+#font-toggle:focus-visible {
+  outline: 2px solid hsl(220, 90%, 52%);
+  outline-offset: 2px;
+}
+
+#font-toggle {
+  font-family: sans-serif;
+  font-size: 0.95rem;
+}
+
 #banner, #contentinfo {
   width: 100%;
   text-align: center;
@@ -155,7 +317,6 @@ ul, ol {
   margin-top: 40px
 }
 
-
 #container {
   flex: 1 0 auto;
   display: flex;
@@ -173,21 +334,163 @@ ul, ol {
   min-width: 300px;
 }
 
+#pages:before {
+  content: "Pages:";
+}
+
+#recent-articles:before {
+  content: "Recent Articles:";
+}
+
+#categories:before {
+  content: "Categories:";
+}
+
+#tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  max-width: 300px;
+}
+
+#tag-cloud:before {
+  content: "Tags:";
+  display: block;
+  width: 100%;
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  margin-bottom: 0.75rem;
+}
+
+#tag-cloud li {
+  margin: 0;
+}
+
+#tag-cloud a {
+  display: inline;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+}
+
+#tag-cloud li.tag-weight-1 a { font-size: 0.7rem; opacity: 0.7; }
+#tag-cloud li.tag-weight-2 a { font-size: 0.8rem; opacity: 0.85; }
+#tag-cloud li.tag-weight-3 a { font-size: 0.9rem; opacity: 1; }
+#tag-cloud li.tag-weight-4 a { font-size: 1rem; opacity: 1; font-weight: bold; }
+
+#translations {
+  text-align: right;
+}
+
+#translations:before {
+  content: "Translations: ";
+}
+
+/* "ul.social-links", not ".social-links": the global reset rule
+   (body, h1, ..., ul[class], ol[class], ..., dd { margin: 0; }) matches
+   via ul[class] at specificity (0,0,1,1), which beats a plain single-class
+   selector like ".social-links" (0,0,1,0) regardless of source order.
+   Adding the "ul" type selector ties it at (0,0,1,1), so this rule (being
+   later in the file) wins instead of always being zeroed back out. */
+ul.social-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  list-style: none;
+  /* Clearly more than double the standard 3rem inter-section gap (e.g.
+     the gap above "Tags:") to set the icon row apart from the sidebar nav. */
+  margin: 10rem 0 0 0;
+}
+
+.social-links li {
+  margin: 0;
+}
+
+.social-links a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--main-link-color);
+  opacity: 0.85;
+  transition: opacity 0.15s ease;
+}
+
+.social-links a:hover,
+.social-links a:focus-visible {
+  opacity: 1;
+}
+
+.social-links svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* About-me page variant: bigger icons, even gap above/below the divider.
+   "ul.social-links--large" for the same specificity reason as above. */
+ul.social-links--large {
+  margin-top: 5rem;
+  gap: 1.5rem;
+}
+
+.social-links--large svg {
+  width: 5rem;
+  height: 5rem;
+}
+
+.social-links-divider {
+  border: none;
+  border-top: 1px solid var(--table-border-color);
+  width: 4rem;
+  margin: 5rem auto 0 auto;
+}
+
+
 .menuitems {
   list-style: none;
+  margin: 3rem 0 0 0;
+  font-size: 0.9rem;
+}
+
+.menuitems li {
+  margin-bottom: 0.85rem;
+}
+
+.menuitems:before {
+  display: block;
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  margin-bottom: 0.75rem;
+}
+
+.menuitems a {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+  padding-bottom: 1px;
 }
 
 #content {
   flex: 1 1 auto;
 }
 
+/*#post-list > li:first-child > article > header > h2,
+main h2:first-child{
+  margin-top: 0;
+}*/
+
 #post-list li {
   list-style: none;
+  margin: 0;
 }
 
 .entry-title {
   text-align: center;
 }
+
 div.post-info {
   text-align: center;
 }
@@ -205,30 +508,117 @@ footer.post-info {
   padding: 1rem;
 }
 
-.entry-title {
-  text-align: center;
+/*
+ * ToC
+ */
+
+.toc a,
+.entry-content a.headerlink {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.toc {
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.toc ul {
+  list-style: none;
+  padding-left: 1.25rem;
+  margin: 0.25rem 0;
+  counter-reset: toc-item;
+}
+
+.toc > ul {
+  padding-left: 0;
+}
+
+.toc li {
+  counter-increment: toc-item;
+}
+
+.toc li::before {
+  content: counters(toc-item, '.') '. ';
+  padding-right: 0.5rem;
+  color: var(--main-link-color);
 }
 
 /*
- * Links
+ * Headings
  */
 
+.entry-content {
+  counter-reset: entrylinks 0 figures 0 tables 0 listings 0 h2counter 0;
+}
+
 .entry-content a {
-  counter-increment: entrylinks;
   text-decoration: none;
   color: inherit;
   outline: none;
   cursor: default;
   pointer-events: none;
 }
-.entry-content a:after {
+
+.entry-content a.headerlink {
+  opacity: 0;
+  margin-left: 0.5rem;
+  text-decoration: none;
+  color: var(--main-link-color);
+  transition: opacity 0.15s ease;
+}
+#
+.entry-content h1:hover a.headerlink,
+.entry-content h2:hover a.headerlink,
+.entry-content h3:hover a.headerlink,
+.entry-content h4:hover a.headerlink,
+.entry-content h5:hover a.headerlink,
+.entry-content h6:hover a.headerlink {
+  opacity: 1;
+}
+
+.entry-content a:not(.toc a):not(.headerlink) {
+  counter-increment: entrylinks;
+}
+
+.entry-content a:not(.toc a):not(.headerlink):after {
   content: '[' counter(entrylinks) ']';
   margin-left: 2px;
-  color: #a00;
+  color: var(--main-link-color);
   cursor: pointer;
   pointer-events: auto;
 }
 
+/*
+ * Heading numbering
+ */
+
+.entry-content h2 {
+  counter-reset: h3counter;
+  counter-increment: h2counter;
+}
+
+.entry-content h3 {
+  counter-reset: h4counter;
+  counter-increment: h3counter;
+}
+
+.entry-content h4 {
+  counter-increment: h4counter;
+}
+
+.entry-content h2::before {
+  content: counter(h2counter) '. ';
+}
+
+.entry-content h3::before {
+  content: counter(h2counter) '.' counter(h3counter) '. ';
+}
+
+.entry-content h4::before {
+  content: counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '. ';
+}
+
 /*
  * Lists
  */
@@ -247,25 +637,134 @@ footer.post-info {
  * Images
  */
 
-.entry-content img {
+img, svg {
+  max-width: 100%;
+  height: auto;
+}
+
+svg.injected-svg text,
+svg.injected-svg tspan {
+  font-family: var(--main-font);
+}
+
+.entry-content img,
+.entry-content svg.injected-svg {
   counter-increment: figures;
   display: block;
   max-width: 80%;
+  width: auto;
+  height: auto;
   margin: 0 auto 0 auto;
   padding: 1rem;
+  cursor: zoom-in;
 }
 
-.entry-content img~em{
+.entry-content img~em,
+.entry-content svg.injected-svg~em{
   display: block;
   margin: 0 auto 0 auto;
   text-align: center;
   font-style: normal;
 }
-.entry-content img~em:before {
+
+.entry-content img~em:before,
+.entry-content svg.injected-svg~em:before {
   content: 'Figure ' counter(figures) ': ';
   font-weight: bold;
 }
 
+/*
+ * Lightbox
+ */
+
+.lightbox-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(255, 255, 255, 0.95);
+  z-index: 1000;
+  cursor: zoom-out;
+  align-items: center;
+  justify-content: center;
+}
+
+.lightbox-overlay.active {
+  display: flex;
+  flex-direction: column;
+}
+
+.lightbox-overlay .lightbox-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 95vw;
+  max-height: 95vh;
+}
+
+.lightbox-overlay #lightbox-media {
+  max-width: 95vw;
+  max-height: 85vh;
+}
+
+.lightbox-overlay #lightbox-media img,
+.lightbox-overlay #lightbox-media svg {
+  max-width: 95vw;
+  max-height: 85vh;
+  object-fit: contain;
+}
+
+.lightbox-overlay #lightbox-caption {
+  color: var(--main-text-color);
+  text-align: center;
+  margin-top: 0.75rem;
+  font-size: 0.95rem;
+}
+
+.lightbox-overlay #lightbox-caption .fig-number {
+  font-weight: bold;
+}
+
+.lightbox-overlay #lightbox-caption .fig-number:before {
+  content: 'Figure ' attr(data-num) ': ';
+}
+
+/* Fallback: Systemeinstellung, nur falls kein manueller Override gesetzt ist */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .lightbox-overlay {
+    background: rgba(0, 0, 0, 0.95);
+  }
+  :root:not([data-theme]) .lightbox-overlay img {
+    background: transparent;
+  }
+  :root:not([data-theme]) .lightbox-overlay #lightbox-caption {
+    color: #fff;
+  }
+}
+
+/* Manueller Override, gewinnt immer gegen Media-Query */
+:root[data-theme="dark"] .lightbox-overlay {
+  background: rgba(0, 0, 0, 0.95);
+}
+:root[data-theme="dark"] .lightbox-overlay img {
+  background: transparent;
+}
+:root[data-theme="dark"] .lightbox-overlay #lightbox-caption {
+  color: #fff;
+}
+
+:root[data-theme="light"] .lightbox-overlay {
+  background: rgba(255, 255, 255, 0.95);
+}
+:root[data-theme="light"] .lightbox-overlay img {
+  background: #fff;
+}
+:root[data-theme="light"] .lightbox-overlay #lightbox-caption {
+  color: #111;
+}
+
 /*
  * Tables
  */
@@ -296,7 +795,7 @@ footer.post-info {
 }
 
 .entry-content td {
-  border-bottom: 1px solid hsl(0, 0%, 85%);
+  border-bottom: 1px solid var(--table-border-color);
 }
 
 .entry-content th:not([align]), td:not([align]) {
@@ -305,23 +804,23 @@ footer.post-info {
 
 .entry-content th:empty,
 .entry-content td:empty {
-  border-left: 1px solid hsl(0, 0%, 85%);
+  border-left: 1px solid var(--table-border-color);
   width: 0;
   padding: 0;
 }
 
 .entry-content th:empty~th:empty,
 .entry-content td:empty~td:empty {
-  border-left: 1px double hsl(0, 0%, 85%);
+  border-left: 1px double var(--table-border-color);
 }
 
 
 .entry-content thead th {
-  border-bottom: 2px solid hsl(0, 0%, 70%);
+  border-bottom: 2px solid var(--table-head-border-color);
 }
 
 .entry-content tfoot th {
-  border-top: 2px solid hsl(0, 0%, 70%);
+  border-top: 2px solid var(--table-head-border-color);
 }
 
 /*
@@ -377,19 +876,6 @@ footer.post-info {
 
 /* This is old stuff, inherited from LaTeX.css, probably unused */
 
-/* Nested ordered list for ToC */
-.toc ol {
-  counter-reset: item;
-  padding-left: 2rem;
-}
-.toc li {
-  display: block;
-}
-.toc li:before {
-  content: counters(item, '.') ' ';
-  counter-increment: item;
-  padding-right: 0.85rem;
-}
 
 /* Make footnote text smaller and left align it (looks bad with long URLs) */
 .footnotes p {
@@ -402,3 +888,38 @@ footer.post-info {
   border-top: 1px solid hsl(0, 0%, 39%);
 }
 
+html[lang="de"] {
+  #pages:before {
+    content: "Seiten:";
+  }
+
+  #recent-articles:before {
+    content: "Neueste Artikel:";
+  }
+
+  #categories:before {
+    content: "Kategorien:";
+  }
+
+  #translations:before {
+    content: "Übersetzungen:";
+  }
+
+  .entry-content img~em:before,
+  .entry-content svg.injected-svg~em:before {
+    content: 'Abbildung ' counter(figures) ': ';
+  }
+
+  .entry-content table~p > em:before {
+    content: 'Tabelle ' counter(tables) ': ';
+  }
+
+  .entry-content table.highlighttable~p > em:before,
+  .entry-content div.highlight~p > em:before {
+    content: 'Liste ' counter(listings) ': ';
+  }
+
+  .lightbox-overlay #lightbox-caption .fig-number:before {
+    content: 'Abbildung ' attr(data-num) ': ';
+  }
+}

static/js/lightbox.js

@@ -0,0 +1,63 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const overlay = document.getElementById('lightbox-overlay');
+  const mediaContainer = document.getElementById('lightbox-media');
+  const overlayCaption = document.getElementById('lightbox-caption');
+
+  function openLightboxWithImg(src, alt, figureNumber, captionText) {
+    mediaContainer.innerHTML = '';
+    const img = document.createElement('img');
+    img.src = src;
+    img.alt = alt;
+    mediaContainer.appendChild(img);
+    setCaption(figureNumber, captionText);
+    overlay.classList.add('active');
+  }
+
+  function openLightboxWithSvg(svgEl, figureNumber, captionText) {
+    mediaContainer.innerHTML = '';
+    const svgClone = svgEl.cloneNode(true);
+    mediaContainer.appendChild(svgClone);
+    setCaption(figureNumber, captionText);
+    overlay.classList.add('active');
+  }
+
+  function setCaption(figureNumber, captionText) {
+    overlayCaption.innerHTML = captionText
+      ? '<span class="fig-number" data-num="' + figureNumber + '"></span> ' + captionText
+      : '';
+  }
+
+  document.querySelectorAll('.entry-content img').forEach(function (img, index) {
+    const figureNumber = index + 1;
+    const originalSrc = img.src;
+    const originalAlt = img.alt;
+    const captionEl = img.nextElementSibling;
+    const captionText = (captionEl && captionEl.tagName === 'EM') ? captionEl.textContent : '';
+
+    img.addEventListener('click', function () {
+      openLightboxWithImg(originalSrc, originalAlt, figureNumber, captionText);
+    });
+  });
+
+  document.addEventListener('svg-injected', function (e) {
+    const svgEl = e.detail.svgEl;
+    svgEl.style.cursor = 'zoom-in';
+    svgEl.addEventListener('click', function () {
+      openLightboxWithSvg(svgEl, e.detail.figureNumber, e.detail.captionText);
+    });
+  });
+
+  overlay.addEventListener('click', function () {
+    overlay.classList.remove('active');
+    mediaContainer.innerHTML = '';
+    overlayCaption.innerHTML = '';
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+      overlay.classList.remove('active');
+      mediaContainer.innerHTML = '';
+      overlayCaption.innerHTML = '';
+    }
+  });
+});

static/js/svg-inject.js

@@ -0,0 +1,94 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const injectedSvgs = [];
+
+  function parseColorMap(cssText, prop) {
+    const map = {};
+    const regex = new RegExp('\\[' + prop + '="([^"]+)"\\]\\s*{\\s*' + prop + ':\\s*([^;]+);', 'g');
+    let m;
+    while ((m = regex.exec(cssText)) !== null) {
+      map[m[1]] = m[2].trim();
+    }
+    return map;
+  }
+
+  function applyThemeToSvg(entry, isDark) {
+    const { svgEl, fillMap, strokeMap } = entry;
+
+    Object.keys(fillMap).forEach(function (lightColor) {
+      svgEl.querySelectorAll('[fill="' + lightColor + '"]').forEach(function (el) {
+        el.setAttribute('fill', isDark ? fillMap[lightColor] : lightColor);
+      });
+    });
+
+    Object.keys(strokeMap).forEach(function (lightColor) {
+      svgEl.querySelectorAll('[stroke="' + lightColor + '"]').forEach(function (el) {
+        el.setAttribute('stroke', isDark ? strokeMap[lightColor] : lightColor);
+      });
+    });
+  }
+
+  function getIsDark() {
+    const attr = document.documentElement.getAttribute('data-theme');
+    if (attr) return attr === 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function applyThemeToAll() {
+    const isDark = getIsDark();
+    injectedSvgs.forEach(function (entry) {
+      applyThemeToSvg(entry, isDark);
+    });
+  }
+
+  const svgImages = document.querySelectorAll('.entry-content img[src$=".svg"]');
+
+  svgImages.forEach(function (img, index) {
+    const figureNumber = index + 1;
+    const originalSrc = img.src;
+    const originalAlt = img.alt;
+    const captionEl = img.nextElementSibling;
+    const captionText = (captionEl && captionEl.tagName === 'EM') ? captionEl.textContent : '';
+
+    fetch(img.src)
+      .then(function (response) { return response.text(); })
+      .then(function (svgText) {
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+        const svgEl = svgDoc.querySelector('svg');
+
+        if (!svgEl) return;
+
+        if (img.alt) {
+          svgEl.setAttribute('role', 'img');
+          svgEl.setAttribute('aria-label', img.alt);
+        }
+
+        svgEl.classList.add('injected-svg');
+
+        // Dark-Farbzuordnung aus dem internen <style>-Block auslesen, dann Block entfernen
+        const styleEl = svgEl.querySelector('style');
+        let fillMap = {};
+        let strokeMap = {};
+        if (styleEl) {
+          fillMap = parseColorMap(styleEl.textContent, 'fill');
+          strokeMap = parseColorMap(styleEl.textContent, 'stroke');
+          styleEl.remove();
+        }
+
+        img.replaceWith(svgEl);
+
+        const entry = { svgEl: svgEl, fillMap: fillMap, strokeMap: strokeMap };
+        injectedSvgs.push(entry);
+        applyThemeToSvg(entry, getIsDark());
+
+        document.dispatchEvent(new CustomEvent('svg-injected', {
+          detail: { svgEl: svgEl, originalSrc: originalSrc, originalAlt: originalAlt, figureNumber: figureNumber, captionText: captionText }
+        }));
+      })
+      .catch(function (err) {
+        console.error('SVG injection failed for', img.src, err);
+      });
+  });
+
+  document.addEventListener('themechange', applyThemeToAll);
+});

static/js/theme-init.js

@@ -0,0 +1,14 @@
+(function () {
+  const storedTheme = localStorage.getItem('theme');
+  if (storedTheme === 'dark' || storedTheme === 'light') {
+    document.documentElement.setAttribute('data-theme', storedTheme);
+  }
+  const storedFont = localStorage.getItem('font');
+  if (storedFont === 'sans' || storedFont === 'serif') {
+    document.documentElement.setAttribute('data-font', storedFont);
+  }
+  const storedAccent = localStorage.getItem('accent');
+  if (storedAccent === 'alt' || storedAccent === 'default') {
+    document.documentElement.setAttribute('data-accent', storedAccent);
+  }
+})();

static/js/toggles.js

@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const root = document.documentElement;
+
+  // Theme toggle
+  const toggleBtn = document.getElementById('theme-toggle');
+
+  function getCurrentTheme() {
+    const attr = root.getAttribute('data-theme');
+    if (attr) return attr;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function updateIcon() {
+    toggleBtn.textContent = getCurrentTheme() === 'dark' ? '☀' : '☾';
+  }
+  updateIcon();
+  toggleBtn.addEventListener('click', function () {
+    const next = getCurrentTheme() === 'dark' ? 'light' : 'dark';
+    root.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    updateIcon();
+    document.dispatchEvent(new CustomEvent('themechange'));
+  });
+
+  // Accent toggle
+  const accentToggleBtn = document.getElementById('accent-toggle');
+
+  function getCurrentAccent() {
+    return root.getAttribute('data-accent') === 'alt' ? 'alt' : 'default';
+  }
+
+  accentToggleBtn.addEventListener('click', function () {
+    const next = getCurrentAccent() === 'alt' ? 'default' : 'alt';
+    root.setAttribute('data-accent', next);
+    localStorage.setItem('accent', next);
+    document.dispatchEvent(new CustomEvent('themechange'));
+  });
+
+  // Font toggle
+  const fontToggleBtn = document.getElementById('font-toggle');
+
+  function getCurrentFont() {
+    return root.getAttribute('data-font') === 'sans' ? 'sans' : 'serif';
+  }
+
+  fontToggleBtn.addEventListener('click', function () {
+    const next = getCurrentFont() === 'sans' ? 'serif' : 'sans';
+    root.setAttribute('data-font', next);
+    localStorage.setItem('font', next);
+  });
+});

templates/base.html

@@ -3,11 +3,17 @@
 <html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
 
 <head>
-
   {% block head %}
     <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" type="text/css" href="{{ SITE_URL }}/theme/css/site.css" />
+
+    <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/theme-init.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="{{ main_siteurl | default(SITEURL) }}/theme/css/site.css" />
+
+    {% if EXTRA_HEAD %}
+      {{ EXTRA_HEAD | safe }}
+    {% endif %}
     {% if FEED_ALL_ATOM %}
     <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
     {% endif %}
@@ -33,13 +39,33 @@
     <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
     {% endif %}
   {% endblock head %}
-
 </head>
 
-
 <body id="index" class="home">
-
   <header id="banner" class="body">
+    <div class="header-controls">
+      {% if extra_siteurls is defined %}
+      <ul class="lang-switcher">
+        {% for lang, siteurl in extra_siteurls.items() %}
+        <li>
+          {% if article is defined and article %}
+          <a href="{{ siteurl }}/{{ article.slug }}.html">{{ lang }}</a>
+          {% elif page is defined and page %}
+          <a href="{{ siteurl }}/pages/{{ page.slug }}.html">{{ lang }}</a>
+          {% else %}
+          <a href="{{ siteurl }}/">{{ lang }}</a>
+          {% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+      <span class="header-delimiter">·</span>
+      {% endif %}
+      <button id="font-toggle" aria-label="Toggle font">Aa</button>
+      <span class="header-delimiter">·</span>
+      <button id="theme-toggle" aria-label="Toggle color theme">◐</button>
+      <span class="header-delimiter">·</span>
+      <button id="accent-toggle" aria-label="Toggle accent color"></button>
+    </div>
     <h1><a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
   </header><!-- /#banner -->
 
@@ -57,6 +83,15 @@
         {% endfor %}
       </ul>
       {% endif %}
+      {% if DISPLAY_RECENT_ARTICLES_ON_MENU | default(true) and articles is defined and articles %}
+      <ul id="recent-articles" class="menuitems">
+        {% for recent_article in articles[:(RECENT_ARTICLES_COUNT | default(10))] %}
+        <li{% if article is defined and recent_article == article %} class="active"{% endif %}>
+          <a href="{{ SITEURL }}/{{ recent_article.url }}">{{ recent_article.title }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+      {% endif %}
       {% if DISPLAY_CATEGORIES_ON_MENU %}
       <ul id="categories" class="menuitems">
         {% for cat, null in categories %}
@@ -64,19 +99,47 @@
         {% endfor %}
       </ul>
       {% endif %}
+      {% if DISPLAY_TAG_CLOUD_ON_MENU | default(true) and tags is defined and tags %}
+      {% set tag_counts = tags | map('last') | map('length') | list %}
+      {% set max_count = tag_counts | max %}
+      {% if max_count and max_count > 0 %}
+      <ul id="tag-cloud" class="menuitems">
+        {% for tag, articles_in_tag in tags | sort %}
+        {% set weight = ((articles_in_tag | length) / max_count * 4) | round(0, 'ceil') | int %}
+        <li class="tag-weight-{{ weight }}">
+          <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
+        </li>
+        {% endfor %}
+      </ul>
+      {% endif %}
+      {% endif %}
+      {% include "includes/social_links.html" %}
     </nav><!-- /#menu -->
+    <main id="content">
     {% block content %}
     {% endblock %}
+    </main><!-- /#content -->
   </div>
 
   <footer id="contentinfo" class="body">
     <address id="about" class="vcard body">
       Proudly powered by <a href="http://getpelican.com/">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.
+      {% if SITE_COMMIT %}
+      <span class="header-delimiter">·</span> Build <a href="https://git.haemka.in/hmk/haemka.de/commit/{{ SITE_COMMIT }}">{{ SITE_COMMIT }}</a> ({{ SITE_BRANCH }})
+      {% endif %}
     </address><!-- /#about -->
   </footer><!-- /#contentinfo -->
 
+  <div class="lightbox-overlay" id="lightbox-overlay">
+    <div class="lightbox-content">
+      <div id="lightbox-media"></div>
+      <p id="lightbox-caption"></p>
+    </div>
+  </div>
+
+  <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/lightbox.js" defer></script>
+  <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/toggles.js" defer></script>
+  <script src="{{ main_siteurl | default(SITEURL) }}/theme/js/svg-inject.js" defer></script>
 </body>
 
 </html>
-
-<!-- vim:ts=2:sw=2:et:ft=html -->

templates/icons/bluesky.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" focusable="false"><title>Bluesky</title><path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/></svg>

templates/icons/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" focusable="false"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

templates/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" focusable="false"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>

templates/icons/mastodon.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" focusable="false"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>

templates/icons/matrix.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" focusable="false"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>

templates/icons/orcid.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" focusable="false"><title>ORCID</title><path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM7.369 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1-.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041H6.647V7.416zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919V7.416zm1.444 1.303v7.444h2.297c3.272 0 4.022-2.484 4.022-3.722 0-2.016-1.284-3.722-4.097-3.722h-2.222z"/></svg>

templates/includes/social_links.html

@@ -0,0 +1,7 @@
+{% if SOCIAL %}
+<ul class="social-links{% if social_links_variant %} social-links--{{ social_links_variant }}{% endif %}">
+  {% for name, url, icon in SOCIAL %}
+  <li><a href="{{ url }}" rel="me" aria-label="{{ name }}" title="{{ name }}">{% include "icons/" ~ icon ~ ".svg" %}</a></li>
+  {% endfor %}
+</ul>
+{% endif %}

templates/index.html

@@ -2,11 +2,7 @@
 
 {% block content %}
 
-  <section id="content">
-    {% block content_title %}
-      <h2>All articles</h2>
-    {% endblock %}
-  
+  <section id="content-section">
     <ol id="post-list">
       {% for article in articles_page.object_list %}
   	<li>
@@ -37,8 +33,6 @@
       {% include 'pagination.html' %}
     {% endif %}
 
-  </section><!-- /#content -->
+  </section><!-- /#content-section -->
   
 {% endblock content %}
-  
-<!-- vim:ts=2:sw=2:et:ft=html -->

templates/page.html

@@ -19,6 +19,12 @@
 
     {{ page.content }}
 
+    {% if page.slug == 'about-me' %}
+    <hr class="social-links-divider">
+    {% set social_links_variant = 'large' %}
+    {% include "includes/social_links.html" %}
+    {% endif %}
+
     {% if page.modified %}
         <p>
         Last updated: {{ page.locale_modified }}

templates/translations.html

@@ -1,9 +1,10 @@
 {% macro translations_for(article) %}
 {% if article.translations %}
-Translations:
-{% for translation in article.translations %}
-<a href="{{ SITEURL }}/{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.lang }}</a>
-{% endfor %}
+<div id="translations">
+  {% for translation in article.translations %}
+  <a href="{{ SITEURL }}/{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.lang }}</a>
+  {% endfor %}
+</div>
 {% endif %}
 {% endmacro %}