From fc1556128c242e8986507972ec491c66a77bd0bd Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Sat, 9 May 2020 15:16:42 +0200
Subject: [PATCH] Fixes #4

Also put in common some code between TOC and Pages dropdown, made style
more mobile-friendly.
---
 web/style/style.scss | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/style/style.scss b/web/style/style.scss
index 7faa307..78832bb 100644
--- a/web/style/style.scss
+++ b/web/style/style.scss
@@ -336,7 +336,7 @@ header {
     box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
     transform: translateX(-40%);
 
-    transition: opacity 500ms ease-in-out, top 500ms ease-in-out;
+    transition: opacity 500ms ease-in-out, top 500ms ease-in-out, height 500ms ease-in-out;
 }
 
 .has-dropdown {
@@ -348,7 +348,7 @@ header {
             pointer-events: auto;
         }
 
-        #table-of-contents {
+        #table-of-contents, #drop-page {
             top: $navbar-height / 1.3;
             opacity: 1;
             z-index: 5;
@@ -364,15 +364,26 @@ header {
     transform: translateX(-75%);
 }
 
-#drop-page {
+#drop-page, #table-of-contents {
     flex-direction: column;
-    transform: translateX(-40%);
-    li {
-        padding: 5px;
+
+    transform: translateX(-45%);
+    top: -40px;
+
+    height: 0;
+    min-width: 350px;
+    overflow-y: auto;
+
+    font-size: 0.9em;
+}
+
+@media #{$switch-small-screen} {
+    #drop-page {
+        transform: translateX(-27.5%);
     }
 }
 
-#drop-share {
+#drop-share, #drop-page {
     li {
         padding: 10px;
     }
@@ -384,7 +395,6 @@ header {
     a {
         width: 100%;
         height: 100%;
-        size: 0.7rem;
         padding-left: 10px;
         padding-right: 10px;
         font-weight: bold;
@@ -392,17 +402,9 @@ header {
 }
 
 #table-of-contents {
-    flex-direction: column;
     padding: 20px;
     float: right;
-    overflow-y: auto;
-    height: 0%;
     width: 75%;
-    min-width: 350px;
-    transform: translateX(-45%);
-    font-size: 0.9em;
-    top: -40px;
-
     transition: height 500ms ease-in-out, opacity 500ms ease-in-out, top 500ms ease-in-out;
 
     li {