navbar icon and moblie support

dhs-kd · Sep 1, 2023 · 81ceaba · 81ceaba
1 parent b9ad134
commit 81ceaba
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/main.css b/main.css
@@ -89,11 +89,6 @@
 
   }
 
-  @media screen and (min-width: 32rem) and (max-width: 48rem) {
-    html {
-      font-size: 15px;
-    }
-  }
 
   @media screen and (min-width: 48rem) {
     html {
@@ -234,4 +229,53 @@
     margin-left: 1.6rem;
     margin-right: 1.6rem;
 
+  }
+
+
+  @media screen and (min-width: 12rem) and (max-width: 48rem) {
+    html {
+      max-width: 100%;
+      font-size: 1.3rem;
+    }
+
+    body { 
+      max-width: 85%;
+    }
+
+    h1,
+    .modest-h1 {
+      margin-top: 0.1rem;
+      font-size: 1.8rem;
+    }
+
+    h2,
+    .modest-h2 {
+      font-size: 1.7rem;
+    }
+
+    h3,
+    .modest-h3 {
+      font-size: 1.6rem;
+    }
+
+    h4,
+    .modest-h4 {
+      font-size: 1.414rem;
+    }
+
+    h5,
+    .modest-h5 {
+      font-size: 1.121rem;
+    }
+
+    h6,
+    .modest-h6 {
+      font-size: 1 rem;
+    }
+
+    small,
+    .modest-small {
+      font-size: .707em;
+    }
+
   }
diff --git a/sidebar.css b/sidebar.css
@@ -6,6 +6,10 @@
     left: 1rem;
     position: fixed;
     display: block;
+    padding: 0.1rem 0.3rem;
+    background:#fafafa ;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
  /* The side navigation menu */
  #navbar {

diff --git a/src/main.js b/src/main.js
@@ -53,8 +53,7 @@ window.onload = function () {
                         document.getElementById("navbar").innerHTML +=`<a herf="#" onclick='open_md("${entry}")'>${entry}</a>`;
                     }
                     else if (typeof entry === "object"){ 
-                        document.getElementById("navbar").innerHTML += `<span id="${entry["name"].replaceAll(" ", "")}"><a href="#" onclick=showChildren("${entry.name}")>${entry.name}         <i class="fa-solid fa-circle-chevron-down"></i></a></span>`
-                        document.getElementById("navbar").innerHTML += `<table>`
+                        document.getElementById("navbar").innerHTML += `<span id="${entry["name"].replaceAll(" ", "")}"><a href="#" onclick=showChildren("${entry.name}")>${entry.name}<i class="fa-solid fa-circle-chevron-down"></i></a></span>`
                         for(let page of entry.content) {
                             document.getElementById("navbar").innerHTML +=`<tr><a herf="#" class="${entry.name}" style="display:none; padding-left:2rem;" onclick='open_md("${entry.name}/${page}")'>${page}</a></tr>`;
                         }