modified: _layouts/default.html

	modified:   css/main.css
	new file:   script/script.js

Author: OmkarSonawane1230

_layouts/default.html

@@ -7,6 +7,7 @@
         <meta name="viewport" content="width=device-width">
         <link rel="icon" type="image/x-icon" href="/images/logo.png"/>
         <link rel="stylesheet" href="/css/main.css">
+        <script src="/script/script.js" defer></script>
         <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">
     </head>
 

css/main.css

@@ -35,16 +35,32 @@ body {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -ms-flex: 1;
-    flex: 1;
     max-width: 700px;
 }
 
 .navbar {
   float: left;
+  position: sticky;
+  top: 0;
+  overflow-y: scroll;
   text-align: left;
   width: 15em;
   padding: 2em;
-  padding-right: 0;
+}
+
+.navbar > ul {
+  margin: 0;
+  list-style: none;
+  position: relative;
+  line-height: 0;
+}
+
+.navbar > ul > li {
+  margin: .5rem 0;
+}
+
+.navbar > ul > li.active {
+  font-weight: bold;
 }
 
 #menuLinkBar {
@@ -64,6 +80,9 @@ body {
   display: -ms-flexbox;
   display: flex;
   margin: 0 auto;
+  max-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
   justify-content: center;
 }
 
@@ -74,19 +93,22 @@ body {
         -webkit-flex-direction: column;
         -ms-flex-direction: column;
         flex-direction: column;
+        max-height: fit-content;
     }
     .site {
         -webkit-box-ordinal-group: 3;
         -webkit-order: 2;
         -ms-flex-order: 2;
         order: 2;
+        padding: 1em;
     }
     .navbar {
-        width: auto;
+        width: 100%;
         -webkit-box-ordinal-group:4;
         -webkit-order:3;
         -ms-flex-order:3;
         order:3;
+        padding: 1em;
     }
     #menuLinkBar {
         display: block;
@@ -795,10 +817,10 @@ pre {
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   -o-border-radius: 3px;
+  white-space: pre-wrap;
   border-radius: 3px;
   display: block;
   padding: 10px 15px 13px 15px;
-  margin: 0 3em 1em 3em;
   background-color: #fff;
   border: solid 1px #efeee6;
   line-height: 18px;
@@ -2015,7 +2037,7 @@ th, td {
 }
 
 img {
-  max-width: 100%;
+  max-width: 50%;
 }
 
 /* Table of contents */

script/script.js

@@ -0,0 +1,15 @@
+const NAVBAR_LI_ELEMENTS = document.getElementById('navbar').firstElementChild.children;    // Access all the <li> in side navigation
+let flag = false;
+
+
+// rotate the arrow of <li> which matches the SITE_URL
+Array.from(NAVBAR_LI_ELEMENTS).forEach((liElement) => {
+    if (liElement.firstElementChild.href == location.href) {
+        liElement.classList.add('active');
+        flag = true;
+        return;
+    }
+})
+
+// if non of other is active the the Home tab is active
+if (!flag) NAVBAR_LI_ELEMENTS[0].classList.add('active');