TOC-Hierarchie-Bug behoben: h3-Einträge verschachtelt unter h2

buildTOC() legt h3-Einträge nun in eine nested <ol> unter ihrem
h2-Parent statt flach in die Hauptliste. CSS in blog.css und
style.css auf > li begrenzt damit Trennlinie und Counter nur
Top-Level-Einträge treffen; Sub-Liste bekommt eigenen Einzug.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

diff --git a/static/blog.css b/static/blog.css
index f880fbf24e5e4c142c43a7fca12d9d44763c9c11..a483d85d548fbf040084302095403a402f2add11 100644 (file)
--- a/static/blog.css
+++ b/static/blog.css
@@ -478,12 +478,12 @@
   margin-bottom: 0.8em;
 }
 .toc-list { counter-reset: toc; }
   margin-bottom: 0.8em;
 }
 .toc-list { counter-reset: toc; }

-.toc-list li {
+.toc-list > li {

   counter-increment: toc;
   padding: 0.3em 0;
   border-bottom: 1px solid rgba(0,0,0,0.06);
 }
   counter-increment: toc;
   padding: 0.3em 0;
   border-bottom: 1px solid rgba(0,0,0,0.06);
 }

-.toc-list li:last-child { border-bottom: none; }
+.toc-list > li:last-child { border-bottom: none; }

 .toc-list a {
   font-size: 0.85rem;
   color: var(--gray-500);
 .toc-list a {
   font-size: 0.85rem;
   color: var(--gray-500);


@@ -491,6 +491,16 @@
   line-height: 1.4;
 }
 .toc-list a:hover, .toc-list a.active { color: var(--deep); }
   line-height: 1.4;
 }
 .toc-list a:hover, .toc-list a.active { color: var(--deep); }

+.toc-list ol {
+  list-style: none;
+  margin: 0.2em 0 0.1em 0;
+  padding-left: 0.9em;
+}
+.toc-list ol li {
+  padding: 0.15em 0;
+  border-bottom: none;
+}
+.toc-list ol a { font-size: 0.8rem; }

 
 /* Article body */
 .post-body {
 
 /* Article body */
 .post-body {

diff --git a/static/blog.js b/static/blog.js
index 943ee8c506a7022da876ddeb5cde5f3085e5c061..42b1b15fb3662e6655df0e2ada7e4a96f8318f78 100644 (file)
--- a/static/blog.js
+++ b/static/blog.js
@@ -150,14 +150,26 @@
     var tocList = document.getElementById('toc-list');
     if (!body || !tocList) return;
     var headings = body.querySelectorAll('h2, h3');
     var tocList = document.getElementById('toc-list');
     if (!body || !tocList) return;
     var headings = body.querySelectorAll('h2, h3');

+    var currentH2Li  = null;
+    var currentSubOl = null;

     headings.forEach(function(h, i) {
       if (!h.id) h.id = 'section-' + i;
     headings.forEach(function(h, i) {
       if (!h.id) h.id = 'section-' + i;

-      var li = document.createElement('li');
-      var a  = document.createElement('a');
+      var a = document.createElement('a');

       a.href = '#' + h.id;
       a.textContent = h.textContent;
       a.href = '#' + h.id;
       a.textContent = h.textContent;

-      if (h.tagName === 'H3') a.style.paddingLeft = '0.75em';
-      li.appendChild(a); tocList.appendChild(li);
+      var li = document.createElement('li');
+      li.appendChild(a);
+      if (h.tagName === 'H2') {
+        tocList.appendChild(li);
+        currentH2Li  = li;
+        currentSubOl = null;
+      } else {
+        if (!currentSubOl) {
+          currentSubOl = document.createElement('ol');
+          (currentH2Li || tocList).appendChild(currentSubOl);
+        }
+        currentSubOl.appendChild(li);
+      }

     });
     if ('IntersectionObserver' in window) {
       var links = tocList.querySelectorAll('a');
     });
     if ('IntersectionObserver' in window) {
       var links = tocList.querySelectorAll('a');

diff --git a/static/style.css b/static/style.css
index 749199b0e8bf4321839781658cddd92953e213ca..7a61ad61c9b78c5eed1590e714d3c4f77b8252bd 100644 (file)
--- a/static/style.css
+++ b/static/style.css
@@ -691,10 +691,13 @@ p:last-child { margin-bottom: 0; }
 
 .toc-inner { background: var(--ice); border-radius: var(--radius-md); padding: var(--space-md); border-left: 3px solid var(--teal); box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-top: var(--space-xs); }
 .toc-title { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.8em; }
 
 .toc-inner { background: var(--ice); border-radius: var(--radius-md); padding: var(--space-md); border-left: 3px solid var(--teal); box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-top: var(--space-xs); }
 .toc-title { font-family: var(--font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.8em; }

-.toc-list li { padding: 0.3em 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
-.toc-list li:last-child { border-bottom: none; }
+.toc-list > li { padding: 0.3em 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
+.toc-list > li:last-child { border-bottom: none; }

 .toc-list a { font-size: 0.85rem; color: var(--gray-500); transition: color var(--transition); line-height: 1.4; display: block; }
 .toc-list a:hover, .toc-list a.active { color: var(--yellow); }
 .toc-list a { font-size: 0.85rem; color: var(--gray-500); transition: color var(--transition); line-height: 1.4; display: block; }
 .toc-list a:hover, .toc-list a.active { color: var(--yellow); }

+.toc-list ol { list-style: none; margin: 0.2em 0 0.1em 0; padding-left: 0.9em; }
+.toc-list ol li { padding: 0.15em 0; border-bottom: none; }
+.toc-list ol a { font-size: 0.8rem; }

 
 /* Artikel-Body */
 .article-body { font-size: 1.02rem; line-height: 1.75; color: var(--gray-800); }
 
 /* Artikel-Body */
 .article-body { font-size: 1.02rem; line-height: 1.75; color: var(--gray-800); }