ui: implement TOC fallback for small screens and robust hiding logic

xihale · xihale · commit 3aa6ccd93acc · 2026-01-22T11:50:02.000+08:00
diff --git a/assets/style.css b/assets/style.css
@@ -502,7 +502,58 @@ nav a:hover {
   display: none;
 }
 
+.toc-sidebar:not(:has(li)),
+.toc-fallback:not(:has(li)) {
+  display: none !important;
+}
+
+.toc-fallback {
+  margin: 2rem 0;
+  padding: 1.25rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+}
+
+.toc-fallback h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+.toc-fallback ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc-fallback li {
+  margin: 0.4rem 0;
+}
+
+.toc-fallback a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.toc-fallback a:hover {
+  color: var(--brand-primary);
+  text-decoration: underline;
+}
+
+.toc-fallback ul ul {
+  padding-left: 1.5rem;
+}
+
 @media screen and (min-width: 1024px) {
+  .toc-fallback {
+    display: none;
+  }
   .container {
     max-width: 1100px;
   }
diff --git a/layouts/learn.shtml b/layouts/learn.shtml
@@ -3,13 +3,17 @@
 </head>
 <body id="body">
   <div class="content-wrapper">
-    <div class="toc-sidebar" :if="$page.custom.getOr('toc', true).and($page.isSection().not()).and($page.toc().len().gt(11))">
+    <div class="toc-sidebar" :if="$page.custom.getOr('toc', true).and($page.isSection().not())">
       <div class="toc-sticky">
         <div :html="$page.toc()"></div>
       </div>
     </div>
     <div class="main-content">
       <h1 :text="$page.title"></h1>
+      <div class="toc-fallback" :if="$page.isSection().not().and($page.custom.getOr('toc', true))">
+        <h3>Table Of Content</h3>
+        <div :html="$page.toc()"></div>
+      </div>
       <div :html="$page.content()"></div>
       <div id="prev-next" :if="$page.isSection().not()">
         <div :if="$page.prevPage?()">
diff --git a/layouts/monthly.shtml b/layouts/monthly.shtml
@@ -32,6 +32,10 @@
 
       <!-- Article Page: Content + Prev/Next -->
       <div :if="$page.isSection().not()">
+        <div class="toc-fallback" :if="$page.custom.getOr('toc', true)">
+          <h3>Table Of Content</h3>
+          <div :html="$page.toc()"></div>
+        </div>
         <div :html="$page.content()" class="monthly-content"></div>
         <div id="prev-next">
           <div :if="$page.prevPage?()">
diff --git a/layouts/post.shtml b/layouts/post.shtml
@@ -66,6 +66,10 @@
                 <span :text="$page.date.format('January 02, 2006')"></span>
             </p>
         </div>
+        <div class="toc-fallback" :if="$page.custom.getOr('toc', true)">
+          <h3>Table Of Content</h3>
+          <div :html="$page.toc()"></div>
+        </div>
         <div :html="$page.content()"></div>
         <div id="prev-next">
           <div :if="$page.prevPage?()">
diff --git a/layouts/templates/content.shtml b/layouts/templates/content.shtml
@@ -15,6 +15,10 @@
         <p :text="$page.date.format('2006-01-03')"></p>
         <p :text="$page.author" id="author"></p>
       </div>
+      <div class="toc-fallback" :if="$page.custom.getOr('toc', true).and($page.isSection().not())">
+        <h3>Table Of Content</h3>
+        <div :html="$page.toc()"></div>
+      </div>
       <ul class="article-list" :loop="$page.subpages()">
         <li>
           <a href="$loop.it.link()" class="article-item">
