From 9243fc85e1a9f82f3e7cfa37366f0dfd34c0ec87 Mon Sep 17 00:00:00 2001
From: Moon Flower <mforoud86@gmail.com>
Date: Sat, 3 Jan 2026 19:51:35 +0330
Subject: better toc

---
 index.html | 6 +++---
 styles.css | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 3f11cd9..143b2e6 100644
--- a/index.html
+++ b/index.html
@@ -29,8 +29,8 @@
         }
     </script>
     <div id="themeButton" style="display: none">
-        <button id="themeToggle">🌙</button>
-        <a href="#table-of-contents"><button id="goBackUp">⤴</button></a>
+        <button id="themeToggle" title="change theme">🌙</button>
+        <a href="#table-of-contents"><button id="goBackUp" title="go to table of contents">⤴</button></a>
     </div>
 
     <script>
@@ -314,7 +314,7 @@
                 let tocHtml = ''
                 tocItems = tocItems.sort((a, b) => a.name.localeCompare(b.name))
                 if (tocItems.length > 0) {
-                    tocHtml = `<div id="table-of-contents" style="display: grid; grid-template-columns: repeat(16, auto); gap: 0.5rem; width: fit-content; margin-bottom: 2rem; border: 1px solid var(--border); padding: 10px; border-radius: 5px;">`
+                    tocHtml = `<div id="table-of-contents" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(max(3rem, 3.125%), 1fr)); gap: 0.5rem; margin-bottom: 2rem; border: 1px solid var(--border); padding: 10px; border-radius: 5px;">`
                     const tocItemNames = tocItems.map(e => e.id)
                     for (const itemName of [...new Set(tocItemNames)]) {
                         const item = tocItems.find(e => e.id === itemName)
diff --git a/styles.css b/styles.css
index ca9fc63..c881666 100644
--- a/styles.css
+++ b/styles.css
@@ -200,8 +200,7 @@ b {
 	transition: 0.5s background-color;
 
 	text-decoration: none;
-	font-size: 1.5em;
-	padding: 5px 8px;
+	font-size: 1em;
 	text-align: center;
 	color: inherit;
 	display: block;
-- 
cgit v1.2.3