From ec50aa435944cb8d50b98bf365fcda9202df190d Mon Sep 17 00:00:00 2001
From: cb341 <daniel@bengl.cz>
Date: Wed, 23 Sep 2026 11:36:19 +0200
Subject: [PATCH 1/5] Implement TOC

Co-Authored-By: gpt-5.6-sol <codex@openai.com>
---
 _config.yml                   |  5 +++
 _layouts/base.html            | 80 +++++++++++++++++++++++++++++++++++
 _plugins/table_of_contents.rb | 30 +++++++++++++
 _threads/2026-04-10.md        |  2 +-
 pages/how-to-apporach.md      |  1 +
 pages/threads.md              | 24 +----------
 pages/til.md                  |  1 +
 7 files changed, 119 insertions(+), 24 deletions(-)
 create mode 100644 _plugins/table_of_contents.rb

diff --git a/_config.yml b/_config.yml
index b6a3221..91fe842 100644
--- a/_config.yml
+++ b/_config.yml
@@ -26,6 +26,11 @@ defaults:
       path: "_posts"
     values:
       layout: post
+      toc: true
+  - scope:
+      path: "_projects"
+    values:
+      toc: true
 
 date_format: "%d.%m.%Y"
 
diff --git a/_layouts/base.html b/_layouts/base.html
index 50de135..7686cca 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -205,6 +205,56 @@
       }
       pre code { background: transparent; padding: 0; }
       main :is(h2,h3,h4,h5,h6)[id] > a { text-decoration: none; }
+      {% if page.toc %}
+      .article-toc {
+        display: none;
+      }
+      @media (min-width: 1120px) {
+        .article-toc:not([hidden]) {
+          display: block;
+          position: fixed;
+          top: 36px;
+          left: calc(50% + 33.5ch + 24px);
+          width: 220px;
+          max-height: calc(100vh - 72px);
+          overflow-y: auto;
+          font-size: 15px;
+          line-height: 1.45;
+        }
+        .article-toc-title,
+        .article-toc ol { font-size: 12px; }
+        .article-toc-title {
+          margin-bottom: .7em;
+          font-weight: 700;
+          letter-spacing: .04em;
+          text-transform: uppercase;
+        }
+        .article-toc ol {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+        .article-toc li { margin: .35em 0; }
+        .article-toc li[data-level="3"] { padding-left: 1em; }
+        .article-toc li[data-level="4"],
+        .article-toc li[data-level="5"],
+        .article-toc li[data-level="6"] { padding-left: 2em; }
+        .article-toc a {
+          color: #55554f;
+          text-decoration: none;
+        }
+        .article-toc a:hover,
+        .article-toc a:focus-visible,
+        .article-toc a[aria-current="location"] {
+          color: inherit;
+          text-decoration: underline;
+        }
+      }
+      @media (prefers-color-scheme: dark) {
+        .article-toc a { color: #b9b8b0; }
+      }
+      @media print { .article-toc { display: none !important; } }
+      {% endif %}
       @media (prefers-color-scheme: dark) {
         html { color-scheme: dark; background: #000; }
         body { background: #000; color: #fff; }
@@ -291,6 +341,7 @@
       </header>
 
       <main id="main-content" role="main">
+        {% if page.toc %}{{ content | table_of_contents }}{% endif %}
         {{ content }}
         <nav role="navigation" aria-label="Post navigation">
           <hr>
@@ -340,6 +391,35 @@
     <script>document.addEventListener('selectionchange',()=>{const s=document.getSelection();document.querySelectorAll('mjx-container[jax="SVG"]').forEach(m=>m.classList.toggle('math-tex-selected',s&&!s.isCollapsed&&s.containsNode(m,true)));});</script>
     {%- endif %}
     <script>document.querySelectorAll('main :is(h2,h3,h4,h5,h6)[id]').forEach(h=>h.innerHTML=`<a href="#${h.id}">${h.innerHTML}</a>`);</script>
+    {%- if page.toc %}
+    <script>
+      (() => {
+        const toc = document.querySelector('.article-toc');
+        if (!toc) return;
+
+        const headings = [...document.querySelectorAll('main :is(h2,h3,h4,h5,h6)[id]')];
+        const links = [...toc.querySelectorAll('a')];
+        let pending = false;
+        const updateCurrent = () => {
+          pending = false;
+          let current = 0;
+          headings.forEach((heading, index) => {
+            if (heading.getBoundingClientRect().top <= 120) current = index;
+          });
+          links.forEach((link, index) => {
+            if (index === current) link.setAttribute('aria-current', 'location');
+            else link.removeAttribute('aria-current');
+          });
+        };
+        window.addEventListener('scroll', () => {
+          if (pending) return;
+          pending = true;
+          requestAnimationFrame(updateCurrent);
+        }, { passive: true });
+        updateCurrent();
+      })();
+    </script>
+    {%- endif %}
     <script>document.addEventListener('keydown',e=>{const as=[...document.querySelectorAll('[aria-label="Post navigation"] a')];if(e.key==='ArrowLeft'){const a=as.find(a=>a.textContent.includes('<'));if(a)location.href=a.href;}if(e.key==='ArrowRight'){const a=as.find(a=>a.textContent.includes('>'));if(a)location.href=a.href;}});</script>
   </body>
 </html>
diff --git a/_plugins/table_of_contents.rb b/_plugins/table_of_contents.rb
new file mode 100644
index 0000000..f6c0a65
--- /dev/null
+++ b/_plugins/table_of_contents.rb
@@ -0,0 +1,30 @@
+require "cgi"
+
+module TableOfContents
+  HEADING = /<h([2-6])\b([^>]*)>(.*?)<\/h\1>/im
+  ID = /\s+id\s*=\s*(["'])(.*?)\1/m
+
+  def table_of_contents(html)
+    items = html.to_s.scan(HEADING).filter_map do |level, attributes, body|
+      id = attributes.match(ID)&.captures&.last
+      next unless id
+
+      label = CGI.unescapeHTML(body.gsub(/<[^>]*>/m, "")).strip
+      next if label.empty?
+
+      %(<li data-level="#{level}"><a href="##{CGI.escapeHTML(CGI.unescapeHTML(id))}">#{CGI.escapeHTML(label)}</a></li>)
+    end
+    return "" if items.empty?
+
+    <<~HTML
+      <nav class="article-toc" aria-label="Table of contents">
+        <div class="article-toc-title">On this page</div>
+        <ol>
+          #{items.join("\n    ")}
+        </ol>
+      </nav>
+    HTML
+  end
+end
+
+Liquid::Template.register_filter(TableOfContents)
diff --git a/_threads/2026-04-10.md b/_threads/2026-04-10.md
index d94fd8e..d897fbb 100644
--- a/_threads/2026-04-10.md
+++ b/_threads/2026-04-10.md
@@ -6,7 +6,7 @@ seems like my physical health has finally caught up to my mental health. having
 
 dug a bit into philosophers this week, mainly Socrates, Nietzsche, Singer. first time actually engaging with them. these are rough impressions, not (yet) positions.
 
-### Thoughts
+**Thoughts**
 
 * starting to think knowledge might be one of the more honest ways to spend time
 * been looking into nihilism for a while now, still seems like one of the more honest ways to look at things  
diff --git a/pages/how-to-apporach.md b/pages/how-to-apporach.md
index 2d1705a..8703dfa 100644
--- a/pages/how-to-apporach.md
+++ b/pages/how-to-apporach.md
@@ -2,6 +2,7 @@
 title: "How To Approach Dani"
 description: "Communication defaults for less guessing."
 permalink: /how-to-approach/
+toc: true
 ---
 
 # How To Approach Dani
diff --git a/pages/threads.md b/pages/threads.md
index 447761a..fd17bf3 100644
--- a/pages/threads.md
+++ b/pages/threads.md
@@ -3,6 +3,7 @@ title: "Threads"
 description: "Conversations, thoughts, half-ideas, things I am starting to explore."
 permalink: /threads/
 math: true
+toc: true
 ---
 
 # Threads
@@ -12,29 +13,6 @@ Conversations, thoughts, half-ideas, things I am starting to explore.
 {% assign feedback_form = "https://docs.google.com/forms/d/e/1FAIpQLSeRD0Q9wYYZelAkRXEu2cCFN89-cvoAfOtyTY9vaz9-FUvYXQ/viewform?usp=pp_url&entry.2083454847=" %}
 {% assign entries = site.threads | sort: "date" | reverse %}
 
-<style>
-.threads-toc { font-size: .9em; }
-.threads-toc ul { list-style: none; padding-left: 1em; margin: .3em 0 .8em; }
-</style>
-
-{% assign months = entries | group_by_exp: "entry", "entry.date | date: '%B %Y'" %}
-<nav class="threads-toc" aria-label="Entry index">
-{%- for month in months %}
-  <b>{{ month.name }}</b>
-  <ul>
-  {%- for entry in month.items %}
-    {%- assign slug = entry.title | replace: ".", "" | slugify %}
-    {%- assign teaser = entry.content | strip_html | normalize_whitespace | truncatewords: 9, "" %}
-    {%- assign last_char = teaser | slice: -1, 1 %}
-    {%- if last_char == "." or last_char == "," or last_char == ";" or last_char == ":" %}
-      {%- assign trimmed_length = teaser | size | minus: 1 %}
-      {%- assign teaser = teaser | slice: 0, trimmed_length %}
-    {%- endif %}
-    <li><a href="#{{ slug }}" title="{{ entry.title }}">{{ entry.date | date: "%d" }}</a> {{ teaser | escape }}...</li>
-  {%- endfor %}
-  </ul>
-{%- endfor %}
-</nav>
 {% for entry in entries %}
 ## {{ entry.title }}
 
diff --git a/pages/til.md b/pages/til.md
index 39e8809..cb9f06c 100644
--- a/pages/til.md
+++ b/pages/til.md
@@ -1,6 +1,7 @@
 ---
 title: "Today I Learned"
 permalink: /til/
+toc: true
 ---
 
 # Today I Learned (TIL)

From e24c20dac6aca8ff0fd408beec37f89a7af38545 Mon Sep 17 00:00:00 2001
From: cb341 <daniel@bengl.cz>
Date: Wed, 23 Sep 2026 11:36:41 +0200
Subject: [PATCH 2/5] Drop headings for TOC

---
 _gallery/ao-test.md               | 2 +-
 _gallery/blahaj-on-the-road.md    | 2 +-
 _gallery/blahaj.md                | 2 +-
 _gallery/cat-review.md            | 2 +-
 _gallery/cube-march.md            | 2 +-
 _gallery/mars-probe-at-uzh.md     | 2 +-
 _gallery/packing-day.md           | 2 +-
 _gallery/plushies.md              | 2 +-
 _gallery/raymarching-artefacts.md | 2 +-
 _gallery/terrain-edges.md         | 2 +-
 _gallery/tired-penguin-study.md   | 2 +-
 _gallery/transparency-issues.md   | 2 +-
 _gallery/voxel-distance-map.md    | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/_gallery/ao-test.md b/_gallery/ao-test.md
index 10171b0..ba12d13 100644
--- a/_gallery/ao-test.md
+++ b/_gallery/ao-test.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/ao_test.webp"
 alt: "Ambient Occlusion Test"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/blahaj-on-the-road.md b/_gallery/blahaj-on-the-road.md
index dc91ad2..ebda145 100644
--- a/_gallery/blahaj-on-the-road.md
+++ b/_gallery/blahaj-on-the-road.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/blahaj_on_the_road.webp"
 alt: "Blahaj Shark on a Road Trip"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/blahaj.md b/_gallery/blahaj.md
index 65b7cfc..0304b2f 100644
--- a/_gallery/blahaj.md
+++ b/_gallery/blahaj.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/blahaj_fixed.webp"
 alt: "Blahaj the Shark"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/cat-review.md b/_gallery/cat-review.md
index 65efebe..0318f02 100644
--- a/_gallery/cat-review.md
+++ b/_gallery/cat-review.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/cat_on_laptop_fixed.webp"
 alt: "Feline Code Review"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/cube-march.md b/_gallery/cube-march.md
index 22d7734..4955910 100644
--- a/_gallery/cube-march.md
+++ b/_gallery/cube-march.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/cube_marcher.webp"
 alt: "Cube Marching Algorithm"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/mars-probe-at-uzh.md b/_gallery/mars-probe-at-uzh.md
index ddd38f0..2b849ad 100644
--- a/_gallery/mars-probe-at-uzh.md
+++ b/_gallery/mars-probe-at-uzh.md
@@ -8,4 +8,4 @@ alt: "Mars Probe at University of Zurich"
 ---
 
 A Mars probe exhibit or model at the University of Zurich. Where aerospace engineering meets computer science education.
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/packing-day.md b/_gallery/packing-day.md
index 69b4c53..14a485a 100644
--- a/_gallery/packing-day.md
+++ b/_gallery/packing-day.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/packing_day.webp"
 alt: "Packing Day Photo"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/plushies.md b/_gallery/plushies.md
index 966b837..3b93fac 100644
--- a/_gallery/plushies.md
+++ b/_gallery/plushies.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/plushees_fixed.webp"
 alt: "Collection of Plush Toys"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/raymarching-artefacts.md b/_gallery/raymarching-artefacts.md
index bfeb270..b4743b3 100644
--- a/_gallery/raymarching-artefacts.md
+++ b/_gallery/raymarching-artefacts.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/raymarching_artefacts.webp"
 alt: "Raymarching Artefacts"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/terrain-edges.md b/_gallery/terrain-edges.md
index 475bb82..1395ce9 100644
--- a/_gallery/terrain-edges.md
+++ b/_gallery/terrain-edges.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/voxel_terrain_edge_detection.webp"
 alt: "Voxel Terrain Edge Detection"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/tired-penguin-study.md b/_gallery/tired-penguin-study.md
index 76b1e79..bd6a4c3 100644
--- a/_gallery/tired-penguin-study.md
+++ b/_gallery/tired-penguin-study.md
@@ -8,4 +8,4 @@ alt: "Tired Penguin with Calculator"
 ---
 
 A tired penguin plushie sitting with a calculator during exam study season. A relatable companion for every student grinding through problem sets.
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/transparency-issues.md b/_gallery/transparency-issues.md
index c19749d..a0cea96 100644
--- a/_gallery/transparency-issues.md
+++ b/_gallery/transparency-issues.md
@@ -8,4 +8,4 @@ alt: "Transparency Rendering Issues"
 ---
 
 Artifacts from transparency rendering - a notoriously tricky problem in real-time graphics. Shows the visual glitches that appear when transparent surfaces aren't sorted correctly.
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**
diff --git a/_gallery/voxel-distance-map.md b/_gallery/voxel-distance-map.md
index efef4cc..35ff45c 100644
--- a/_gallery/voxel-distance-map.md
+++ b/_gallery/voxel-distance-map.md
@@ -7,4 +7,4 @@ image: "/webp-gallery/voxel_raymarching_distance_map.webp"
 alt: "Voxel Raymarching Distance Map"
 ---
 
-## (WORK IN PROGRESS)
+**(WORK IN PROGRESS)**

From 60ef3f6e9ab5f16a9cc701102385af5bbba88b72 Mon Sep 17 00:00:00 2001
From: cb341 <daniel@bengl.cz>
Date: Wed, 23 Sep 2026 11:41:28 +0200
Subject: [PATCH 3/5] Simplify base

---
 _layouts/base.html | 69 ++++++++--------------------------------------
 1 file changed, 11 insertions(+), 58 deletions(-)

diff --git a/_layouts/base.html b/_layouts/base.html
index 7686cca..ab0fdb8 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -206,53 +206,35 @@
       pre code { background: transparent; padding: 0; }
       main :is(h2,h3,h4,h5,h6)[id] > a { text-decoration: none; }
       {% if page.toc %}
-      .article-toc {
-        display: none;
-      }
+      .article-toc { display: none; }
       @media (min-width: 1120px) {
-        .article-toc:not([hidden]) {
+        .article-toc {
           display: block;
           position: fixed;
           top: 36px;
           left: calc(50% + 33.5ch + 24px);
           width: 220px;
           max-height: calc(100vh - 72px);
-          overflow-y: auto;
+          overflow: auto;
           font-size: 15px;
           line-height: 1.45;
         }
         .article-toc-title,
         .article-toc ol { font-size: 12px; }
-        .article-toc-title {
-          margin-bottom: .7em;
-          font-weight: 700;
-          letter-spacing: .04em;
-          text-transform: uppercase;
-        }
-        .article-toc ol {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-        }
-        .article-toc li { margin: .35em 0; }
-        .article-toc li[data-level="3"] { padding-left: 1em; }
-        .article-toc li[data-level="4"],
-        .article-toc li[data-level="5"],
-        .article-toc li[data-level="6"] { padding-left: 2em; }
+        .article-toc-title { font-weight: bold; }
+        .article-toc ol { margin: 0; padding: 0; list-style: none; }
+        .article-toc li { margin: .5em 0; }
+        .article-toc li:not([data-level="2"]) { padding-left: 1em; }
         .article-toc a {
-          color: #55554f;
+          color: inherit;
+          opacity: .7;
           text-decoration: none;
         }
-        .article-toc a:hover,
-        .article-toc a:focus-visible,
-        .article-toc a[aria-current="location"] {
-          color: inherit;
+        .article-toc a:is(:hover, :focus-visible) {
+          opacity: 1;
           text-decoration: underline;
         }
       }
-      @media (prefers-color-scheme: dark) {
-        .article-toc a { color: #b9b8b0; }
-      }
       @media print { .article-toc { display: none !important; } }
       {% endif %}
       @media (prefers-color-scheme: dark) {
@@ -391,35 +373,6 @@
     <script>document.addEventListener('selectionchange',()=>{const s=document.getSelection();document.querySelectorAll('mjx-container[jax="SVG"]').forEach(m=>m.classList.toggle('math-tex-selected',s&&!s.isCollapsed&&s.containsNode(m,true)));});</script>
     {%- endif %}
     <script>document.querySelectorAll('main :is(h2,h3,h4,h5,h6)[id]').forEach(h=>h.innerHTML=`<a href="#${h.id}">${h.innerHTML}</a>`);</script>
-    {%- if page.toc %}
-    <script>
-      (() => {
-        const toc = document.querySelector('.article-toc');
-        if (!toc) return;
-
-        const headings = [...document.querySelectorAll('main :is(h2,h3,h4,h5,h6)[id]')];
-        const links = [...toc.querySelectorAll('a')];
-        let pending = false;
-        const updateCurrent = () => {
-          pending = false;
-          let current = 0;
-          headings.forEach((heading, index) => {
-            if (heading.getBoundingClientRect().top <= 120) current = index;
-          });
-          links.forEach((link, index) => {
-            if (index === current) link.setAttribute('aria-current', 'location');
-            else link.removeAttribute('aria-current');
-          });
-        };
-        window.addEventListener('scroll', () => {
-          if (pending) return;
-          pending = true;
-          requestAnimationFrame(updateCurrent);
-        }, { passive: true });
-        updateCurrent();
-      })();
-    </script>
-    {%- endif %}
     <script>document.addEventListener('keydown',e=>{const as=[...document.querySelectorAll('[aria-label="Post navigation"] a')];if(e.key==='ArrowLeft'){const a=as.find(a=>a.textContent.includes('<'));if(a)location.href=a.href;}if(e.key==='ArrowRight'){const a=as.find(a=>a.textContent.includes('>'));if(a)location.href=a.href;}});</script>
   </body>
 </html>

From d6dda9ff2f3736827ccb8e23ffe09c94cbd54e01 Mon Sep 17 00:00:00 2001
From: cb341 <daniel@bengl.cz>
Date: Wed, 23 Sep 2026 11:48:15 +0200
Subject: [PATCH 4/5] Simplify style + readd teaser

---
 _layouts/base.html            | 9 ---------
 _plugins/table_of_contents.rb | 7 ++++++-
 pages/threads.md              | 7 +++++++
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/_layouts/base.html b/_layouts/base.html
index ab0fdb8..da612c9 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -225,15 +225,6 @@
         .article-toc ol { margin: 0; padding: 0; list-style: none; }
         .article-toc li { margin: .5em 0; }
         .article-toc li:not([data-level="2"]) { padding-left: 1em; }
-        .article-toc a {
-          color: inherit;
-          opacity: .7;
-          text-decoration: none;
-        }
-        .article-toc a:is(:hover, :focus-visible) {
-          opacity: 1;
-          text-decoration: underline;
-        }
       }
       @media print { .article-toc { display: none !important; } }
       {% endif %}
diff --git a/_plugins/table_of_contents.rb b/_plugins/table_of_contents.rb
index f6c0a65..88cb336 100644
--- a/_plugins/table_of_contents.rb
+++ b/_plugins/table_of_contents.rb
@@ -3,6 +3,7 @@
 module TableOfContents
   HEADING = /<h([2-6])\b([^>]*)>(.*?)<\/h\1>/im
   ID = /\s+id\s*=\s*(["'])(.*?)\1/m
+  TEASER = /\s+data-toc-teaser\s*=\s*(["'])(.*?)\1/m
 
   def table_of_contents(html)
     items = html.to_s.scan(HEADING).filter_map do |level, attributes, body|
@@ -12,7 +13,11 @@ def table_of_contents(html)
       label = CGI.unescapeHTML(body.gsub(/<[^>]*>/m, "")).strip
       next if label.empty?
 
-      %(<li data-level="#{level}"><a href="##{CGI.escapeHTML(CGI.unescapeHTML(id))}">#{CGI.escapeHTML(label)}</a></li>)
+      teaser = attributes.match(TEASER)&.captures&.last
+      link = %(<a href="##{CGI.escapeHTML(CGI.unescapeHTML(id))}">#{CGI.escapeHTML(label)}</a>)
+      text = teaser && !teaser.empty? ? "#{link}<br>#{CGI.escapeHTML(CGI.unescapeHTML(teaser))}..." : link
+
+      %(<li data-level="#{level}">#{text}</li>)
     end
     return "" if items.empty?
 
diff --git a/pages/threads.md b/pages/threads.md
index fd17bf3..3b17242 100644
--- a/pages/threads.md
+++ b/pages/threads.md
@@ -14,7 +14,14 @@ Conversations, thoughts, half-ideas, things I am starting to explore.
 {% assign entries = site.threads | sort: "date" | reverse %}
 
 {% for entry in entries %}
+{% assign teaser = entry.content | strip_html | normalize_whitespace | truncatewords: 9, "" %}
+{% assign last_char = teaser | slice: -1, 1 %}
+{% if last_char == "." or last_char == "," or last_char == ";" or last_char == ":" %}
+  {% assign trimmed_length = teaser | size | minus: 1 %}
+  {% assign teaser = teaser | slice: 0, trimmed_length %}
+{% endif %}
 ## {{ entry.title }}
+{: data-toc-teaser="{{ teaser | escape }}" }
 
 {::nomarkdown}
 {{ entry.content }}

From e44a7bcdd20c5c4c8505dd902df0c65c9b308594 Mon Sep 17 00:00:00 2001
From: cb341 <daniel@bengl.cz>
Date: Wed, 23 Sep 2026 11:52:01 +0200
Subject: [PATCH 5/5] margin

---
 _layouts/base.html            | 1 +
 _plugins/table_of_contents.rb | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/_layouts/base.html b/_layouts/base.html
index da612c9..8c45fa5 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -225,6 +225,7 @@
         .article-toc ol { margin: 0; padding: 0; list-style: none; }
         .article-toc li { margin: .5em 0; }
         .article-toc li:not([data-level="2"]) { padding-left: 1em; }
+        .toc-teaser { display: block; margin-left: 1em; }
       }
       @media print { .article-toc { display: none !important; } }
       {% endif %}
diff --git a/_plugins/table_of_contents.rb b/_plugins/table_of_contents.rb
index 88cb336..3017800 100644
--- a/_plugins/table_of_contents.rb
+++ b/_plugins/table_of_contents.rb
@@ -15,7 +15,7 @@ def table_of_contents(html)
 
       teaser = attributes.match(TEASER)&.captures&.last
       link = %(<a href="##{CGI.escapeHTML(CGI.unescapeHTML(id))}">#{CGI.escapeHTML(label)}</a>)
-      text = teaser && !teaser.empty? ? "#{link}<br>#{CGI.escapeHTML(CGI.unescapeHTML(teaser))}..." : link
+      text = teaser && !teaser.empty? ? %(#{link}<span class="toc-teaser">#{CGI.escapeHTML(CGI.unescapeHTML(teaser))}...</span>) : link
 
       %(<li data-level="#{level}">#{text}</li>)
     end