Increased menu margin for small screen

4 files changed, 23 insertions, 15 deletions

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 92c3f66..9c399f4 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -21,7 +21,7 @@
     if (x.matches) {
       allMenu.classList.add("d-none");
       allMenu.style.flexDirection = "column";
-      dropDown.style.width = "calc(100% - 5px)";
+      dropDown.style.width = "calc(90vw - 5px)";
       dropDown.style.maxHeight = "0px";
       dropDown.style.position = "static";
     } else {
diff --git a/layouts/partials/menu/menu_sections.html b/layouts/partials/menu/menu_sections.html
index 77143f8..01d86f7 100644
--- a/layouts/partials/menu/menu_sections.html
+++ b/layouts/partials/menu/menu_sections.html
@@ -5,8 +5,8 @@
   {{ end }}
 </div>
 {{ else }}
-<div class="dropdown">
-  <span class="dropbtn main-menu" onclick="toggleHeight(this.nextElementSibling)">
+<div class="dropdown main-menu">
+  <span class="dropbtn" onclick="toggleHeight(this.nextElementSibling)">
     Sections <i class="fas fa-chevron-down"></i>
   </span>
   <div class="dropdown-content">
diff --git a/static/css/khata.css b/static/css/khata.css
index 815efd7..710d364 100644
--- a/static/css/khata.css
+++ b/static/css/khata.css
@@ -14,16 +14,17 @@ body {
 .wrapper {
   flex: 1;
 }
-code, pre {
+code,
+pre {
   font-family: "Roboto Mono", monospace;
-  background-color: #fff2ac;  
-  color: black; 
+  background-color: #fff2ac;
+  color: black;
 }
 pre {
   display: inline-block;
   max-width: 100%;
   clear: both;
-  padding: 5px 15px 5px 15px; 
+  padding: 5px 15px 5px 15px;
 }
 h1,
 h2,
@@ -53,18 +54,20 @@ a,
   cursor: pointer;
   color: white !important;
 }
-.main-menu,
-.main-menu a {
+.main-menu {
   font-variant: small-caps;
   font-family: "Open Sans", sans-serif;
   color: white !important;
+  margin-right: 25px;
+  margin-top: initial;
+  margin-bottom: initial;
+}
+.main-menu > a {
+  color: white !important;
 }
 .main-menu a:hover {
   text-decoration: none;
 }
-.main-menu {
-  margin-right: 25px;
-}
 .social-icons {
   display: flex;
   flex-direction: row;
@@ -97,7 +100,7 @@ a,
   position: absolute;
   z-index: 1;
   white-space: nowrap;
-  max-height: 0px;  
+  max-height: 0px;
   overflow: hidden;
   transition: all 0.25s;
 }
@@ -122,6 +125,11 @@ a,
   .grid-container {
     grid-template-columns: repeat(auto-fill, 100%);
   }
+  .main-menu {
+    margin-right: 0px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
   .profile-info {
     width: 100%;
     margin-top: 30px;
@@ -153,7 +161,7 @@ a,
 .top-h1 {
   font-size: 3em !important;
 }
-#TableOfContents > ul {  
+#TableOfContents > ul {
   margin-left: 10px;
   padding-left: 5px;
   font-variant: small-caps;
diff --git a/static/js/khata.js b/static/js/khata.js
index b5a56e4..6dcba90 100644
--- a/static/js/khata.js
+++ b/static/js/khata.js
@@ -1,6 +1,6 @@
 let toggleHeight = function(elem) {
   if (getComputedStyle(elem)["height"] === "0px") {
-    elem.style.maxHeight = elem.scrollHeight + "px";
+    elem.style.maxHeight = elem.scrollHeight + 5 +"px";
   } else {
     elem.style.maxHeight = "0px";
   }