Write a proper README

Describes the theme's look, features, and file structure, plus the
custom pelicanconf.py settings it reads (SOCIAL, SITE_COMMIT/
SITE_BRANCH, sidebar display toggles) for anyone else adopting it.

README.md

@@ -1,4 +1,30 @@
 # Pelican LaTeX theme
 
-A theme for pelican which mimics the look of LaTeX documents.
+A theme for [Pelican](https://getpelican.com/) that mimics the look and feel of a LaTeX-typeset document — serif typography (bundled Latin Modern webfonts), justified body text, and syntax-highlighted code blocks styled to match.
 
+## Features
+
+- Light and dark mode, plus a choice of accent color, all switchable at runtime and remembered across visits
+- A serif/sans-serif font toggle for readers who prefer either look
+- Sidebar navigation with pages, recent articles, categories, and a weighted tag cloud
+- Built-in support for multilingual sites built with Pelican's `i18n_subsites` plugin, including a language switcher and per-page translation links
+- Lightbox viewer for images, and inline SVG handling that lets diagrams adapt their colors to the current light/dark theme
+- A small, optional row of social/profile link icons
+
+## Structure
+
+- `templates/` — Jinja2 templates for articles, pages, listing views (archives, tags, categories, authors), and shared partials
+- `static/css/` — the theme's stylesheet and Pygments syntax-highlighting themes
+- `static/js/` — the theme/accent/font toggles, lightbox, and SVG handling
+- `static/fonts/` — the bundled Latin Modern webfonts
+
+To use the theme, point a Pelican site's `THEME` setting at this repository (or a submodule checkout of it).
+
+## Configuration
+
+Beyond Pelican's standard settings, the theme reads a few of its own from `pelicanconf.py`:
+
+- `SOCIAL` — a tuple of `(name, url, icon_slug)` entries for the social/profile link row. `icon_slug` must match an SVG file in `templates/icons/<icon_slug>.svg`; currently bundled are `github`, `linkedin`, `orcid`, `mastodon`, `bluesky`, and `matrix`. Add more by dropping in another icon file with a matching slug. Leave `SOCIAL` unset to omit the row entirely.
+- `SITE_COMMIT` and `SITE_BRANCH` — optional build identifiers shown as a small line in the footer (e.g. "Build abc1234 (main)"), linked to the commit on Gitea. Meant to be set from a CI environment rather than hand-written; the footer line is omitted if `SITE_COMMIT` is empty.
+
+The sidebar sections can also be toggled individually, following the same convention as Pelican's default theme: `DISPLAY_PAGES_ON_MENU` and `DISPLAY_CATEGORIES_ON_MENU` (both off unless set to `True`), and `DISPLAY_RECENT_ARTICLES_ON_MENU`/`DISPLAY_TAG_CLOUD_ON_MENU` (both on by default). `RECENT_ARTICLES_COUNT` caps the recent-articles list (default 10).

static/css/site.css

@@ -44,20 +44,65 @@
 :root {
   --main-bg-color: hsl(210, 20%, 98%);
   --main-text-color: hsl(0, 5%, 10%);
-  --main-link-color: hsl(0, 100%, 35%);
+  --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 {
+  :root[data-accent="alt"]:not([data-theme]) {
-    --main-bg-color: hsl(0, 5%, 10%);
+    --main-link-color: hsl(55, 100%, 60%);
-    --main-text-color: hsl(210, 20%, 98%);
+    --main-bg-color: hsl(260, 15%, 8%);
-    --main-link-color: hsl(0, 100%, 65%);
-    --table-border-color: hsl(0, 0%, 15%);
-    --table-head-border-color: hsl(0, 0%, 30%);
   }
 }
+: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;
@@ -90,6 +135,38 @@ body {
   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 {
@@ -104,6 +181,7 @@ a:not([class]) {
 
 a, a:visited {
   color: var(--main-link-color);
+  text-decoration: none;
 }
 
 a:focus {
@@ -111,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;
@@ -165,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;
@@ -175,7 +317,6 @@ ul, ol {
   margin-top: 40px
 }
 
-
 #container {
   flex: 1 0 auto;
   display: flex;
@@ -193,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;
 }
@@ -226,22 +509,79 @@ footer.post-info {
 }
 
 /*
- * Links
+ * 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);
+}
+
+/*
+ * Headings
  */
 
 .entry-content {
-  counter-reset: entrylinks 0 figures 0 tables 0 listings 0;
+  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: var(--main-link-color);
@@ -249,6 +589,36 @@ footer.post-info {
   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
  */
@@ -267,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
  */
@@ -397,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 {
@@ -421,3 +887,39 @@ footer.post-info {
 .footnotes {
   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="{{ SITEURL }}/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">
+  <section id="content-section">
-    {% block content_title %}
-      <h2>All articles</h2>
-    {% endblock %}
-  
     <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:
+<div id="translations">
-{% for translation in article.translations %}
+  {% for translation in article.translations %}
-<a href="{{ SITEURL }}/{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.lang }}</a>
+  <a href="{{ SITEURL }}/{{ translation.url }}" hreflang="{{ translation.lang }}">{{ translation.lang }}</a>
-{% endfor %}
+  {% endfor %}
+</div>
 {% endif %}
 {% endmacro %}