Improved responsivity

AyhamAl-Ali · Jul 5, 2021 · ba81895 · ba81895
1 parent 5ef4a5e
commit ba81895
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/docs/css/styles.css b/docs/css/styles.css
@@ -362,10 +362,13 @@ td ul {
         grid-template-columns: 20% minmax(80%, 100%);
     }
     #global-navigation {
-        height: 4.1em;
+        height: calc(4.1em + 2px); /* +2px due to 18px padding botton not 16px */
         display: flex;
         flex-wrap: wrap;
     }
+    #global-navigation > li {
+        padding-bottom: 18px;
+    }
     #global-navigation > a {
         padding: 10px;
         padding-top: 0.1em;
@@ -377,20 +380,12 @@ td ul {
     #side-nav {
         top: 0;
     }
-    #content {
-        margin-top: 100px;
-    }
 }
 
 @media (max-width: 1024px) {
     body {
         grid-template-columns: 20% minmax(80%, 100%);
     }
-    #global-navigation {
-        height: 4.1em;
-        display: flex;
-        flex-wrap: wrap;
-    }
     #global-navigation > a {
         padding: 10px;
         padding-top: 0.1em;
@@ -408,6 +403,18 @@ td ul {
     body {
         grid-template-columns: 20% minmax(80%, 100%);
     }
+    #side-nav {
+        padding-top: 110px;
+    }
+    #content {
+        padding-top: 55px !important; /* !important to override home */
+    }
+    #global-navigation li {
+        white-space: nowrap;
+    }
+    #global-navigation {
+        display: flex;
+    }
     #global-navigation {
         grid-column-start: 1;
         grid-column-end: none;

diff --git a/docs/js/main.js b/docs/js/main.js
@@ -64,4 +64,4 @@ function renderMagicText() {
 }
 renderMagicText();
 
-// Magic Text </>
+// Magic Text </>