remove toc on small width devices

Author: Ladas552

README.md

@@ -14,7 +14,7 @@ modified nerdfontsOnlySymbols file with fontforge-gtk to only have like 4 symbol
 
 - add code block expansion
 - better nav bar, add some flair to background color
-- Table of Content can rended too long for the user to use on small width phone with a lot of headings. So need to fix that, but don't make the table scrollable. I hate that
+- Table of Content can render too long for the user to use on small width phone with a lot of headings. So I hid it on small width devices. But there is probably a better way for it, without making ToC scrollable because that would be 1000 times worse
 - Pokemons aren't centered
 - I want a [project oriented pages too](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages#using-a-custom-domain-across-multiple-repositories)
 - better rss.xml theme, like [boltless](https://github.com/boltlessengineer/boltlessengineer.github.io/blob/989b409505d56f2c9fcbaf3cec1db8aac52156c7/templates/rss.xml#L2)

public/assets/css/toc.css

@@ -6,7 +6,7 @@
     <description>Latest posts</description>
     <generator>Norgolith</generator>
     <language>en-us</language>
-    <lastBuildDate>Sat, 13 Sep 2025 04:31:50 +0000</lastBuildDate>
+    <lastBuildDate>Sat, 13 Sep 2025 04:42:45 +0000</lastBuildDate>
     <ttl>60</ttl>
     <atom:link href="https:&#x2F;&#x2F;ladas552.me/rss.xml" rel="self" type="application/rss+xml" />
 

public/rss.xml

@@ -114,25 +114,14 @@
 /* Responsive Design */
 @media (max-width: 768px) {
   .toc-button {
-    width: 32px;
-    height: 32px;
-    right: 10px;
-  }
-
-  #toc-toggle:checked ~ .toc-button {
-    right: 295px;
+    display: none; /* Hide button on small screens */
   }
 
   .toc-panel {
-    width: 280px;
-    right: -280px;
-  }
-
-  #toc-toggle:checked ~ .toc-panel {
-    transform: translateX(-280px);
+    display: none; /* Hide panel on small screens */
   }
 
-  .toc-content a {
-    padding: 0.4rem 0.8rem;
+  .overlay {
+    display: none; /* Hide overlay on small screens */
   }
 }