From 8ba82c29116b2f279318909b09941c52004bf13e Mon Sep 17 00:00:00 2001
From: Alvie Rahman <alvierahman90@gmail.com>
Date: Fri, 11 Nov 2022 12:36:54 +0000
Subject: [PATCH] hide toc on smaller width devices (for now)

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

diff --git a/styles.css b/styles.css
index 737acb1..5a79d02 100644
--- a/styles.css
+++ b/styles.css
@@ -101,10 +101,11 @@ mjx-container {
 	overflow-x: auto;
 }
 
-@media (max-width: 60em) {
+@media (max-width: 80em) {
   /* CSS that should be displayed if width is equal to or less than 60em goes here */
 	#contentWrapper { flex-direction: column }
-	#sidebar { position: static; width: 100%; max-width: none; }
+	#sidebar { position: static; width: 100%; max-width: none; height: auto; }
+	#tocWrapper { display: none }
 }
 
 
diff --git a/templates/article.html b/templates/article.html
index b39fb47..6d1c404 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -38,9 +38,11 @@
 					page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
 				</p>
 			</div>
+			<div id="tocWrapper" style="width: 100%" >
 			<h3>Table of Contents</h3>
-			<input id="search" placeholder="Search table of contents" />
+			<input id="search" width="100%" placeholder="Search table of contents" />
 			<div id="toc">$toc$</div>
+			</div>
 		</div>
 		<div id="content">
 		<details id="commitLog">