html: try sticky navbar without using max-height on maing wrapper

This is done to make the content height appropriate rather than
immitating that the content only takes up 100% view port height and
artificially introducing a scroll.

This ensures the content is a bit more accessible and should work
well with any tool that relies on the height.

Author: sivaraam

css/main.css

@@ -29,30 +29,27 @@ body {
 }
 
 .site {
-    text-align: left;
-    padding: 2em 2em 0;
-    float: left;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    max-width: 700px;
+  text-align: left;
+  padding: 2em 2em 0;
+  flex-grow: 1;
+  max-width: 700px;
 }
 
 .navbar {
-  float: left;
+  position: -webkit-sticky; /* For Safari */
   position: sticky;
   top: 0;
-  overflow-y: scroll;
   text-align: left;
   width: 15em;
+  height: fit-content; /* Ensures the sidebar height adapts to its content */
+  max-height: 100vh;
   padding: 2em;
 }
 
 .navbar > ul {
   margin: 0;
+  padding: 0;
   list-style: none;
-  position: relative;
-  line-height: 0;
 }
 
 .navbar > ul > li {
@@ -64,26 +61,24 @@ body {
 }
 
 #menuLinkBar {
-    background-color: #a09a93;
-    text-align: right;
-    padding: 0.3em 2em;
-    -webkit-box-ordinal-group: 2;
-    -webkit-order: 1;
-    -ms-flex-order: 1;
-    order: 1;
-    display: none;
+  background-color: #a09a93;
+  text-align: right;
+  padding: 0.3em 2em;
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+  display: none;
 }
 
 #wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  margin: 0 auto;
-  max-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: scroll;
   justify-content: center;
+  margin: 0 auto;
+  width: 100%;
 }
 
 @media (max-width: 700px) {