From 2ad4756f31c1ceeed8d01cc5a8813299c024e30c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20Cora=C3=A7=C3=A3o?= <nunocoracao@gmail.com>
Date: Tue, 4 Oct 2022 15:37:27 +0100
Subject: [PATCH] improved usability of TOC on mobile

---
 assets/css/compiled/main.css | 18 ++++++++----------
 layouts/partials/toc.html    | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 5cc41ae6..e04ea386 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1621,10 +1621,10 @@ select {
   width: 3rem;
 }
 
-.w-max {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
+.w-fit {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 .w-36 {
@@ -1635,12 +1635,6 @@ select {
   width: 100%;
 }
 
-.w-fit {
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -3415,6 +3409,10 @@ body:has(#menu-controller:checked) {
     order: 9999;
   }
 
+  .lg\:block {
+    display: block;
+  }
+
   .lg\:hidden {
     display: none;
   }
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index a31d5c7a..adf881d4 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,4 +1,4 @@
-<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5">
+<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
   <summary
     class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
   >
@@ -10,3 +10,15 @@
     {{ .TableOfContents | emojify }}
   </div>
 </details>
+<details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden">
+  <summary
+    class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
+  >
+    {{ i18n "article.table_of_contents" }}
+  </summary>
+  <div
+    class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
+  >
+    {{ .TableOfContents | emojify }}
+  </div>
+</details>