Layout changes from legacy site

1 files changed, 11 insertions, 46 deletions

diff --git a/vnext/src/index.css b/vnext/src/index.css
index 6ca33a13..78a094b1 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -113,17 +113,6 @@ hr {
 #app {
     height: 100%;
     width: 100%;
-    overflow: hidden;
-}
-
-#wrapper {
-    display: grid;
-    grid-template-areas: "content" "footer";
-    grid-template-columns: 100%;
-    grid-template-rows: 1fr auto;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
 }
 
 #header {
@@ -131,7 +120,6 @@ hr {
     border-bottom: 1px solid var(--border-color);
     transition: transform 0.2s;
     z-index: 10;
-    overflow-x: hidden;
     position: fixed;
     width: 100%;
     top: 0;
@@ -150,11 +138,14 @@ hr {
 }
 
 #sidebar {
-    grid-area: footer;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     border-top: 1px solid var(--border-color);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
 }
 
 .nav_content {
@@ -162,10 +153,9 @@ hr {
 }
 
 #content {
-    grid-area: content;
     margin-top: 0;
-    overflow: auto;
     transition: margin-top 0.4s;
+    padding-bottom: 64px;
 }
 
 .content--top {
@@ -179,7 +169,6 @@ hr {
     color: var(--text-color);
     padding: 10px;
     transition: margin-left 0.4s;
-    overflow-x: hidden;
 }
 
 .desktop {
@@ -335,25 +324,6 @@ hr {
     color: var(--dimmed-link-color);
 }
 
-::-webkit-scrollbar {
-    width: 6px;
-} /* this targets the default scrollbar (compulsory) */
-::-webkit-scrollbar-track {
-    background-color: var(--main-background-color);
-} /* the new scrollbar will have a flat appearance with the set background color */
-
-::-webkit-scrollbar-thumb {
-    background-color: #ff339a;
-} /* this will style the thumb, ignoring the track */
-
-::-webkit-scrollbar-button {
-    background-color: var(--border-color);
-} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
-
-::-webkit-scrollbar-corner {
-    background-color: black;
-}
-
 @media (--viewport-mobile) {
     #content {
         margin-bottom: 12px;
@@ -363,15 +333,7 @@ hr {
     }
 }
 
-@media (--viewport-desktop) {
-    #app {
-        overflow: initial;
-    }
-    #wrapper {
-        grid-template-areas: ". footer content .";
-        grid-template-columns: auto 240px 760px auto;
-        overflow: initial;
-    }
+@media (--viewport-desktop) {    
     #header_wrapper,
     .footer_container {
         margin: 0 auto;
@@ -384,14 +346,17 @@ hr {
         display: none;
     }
     #content {
+        margin-left: 320px;
         margin-bottom: 12px;
-        overflow: initial;
+        padding-bottom: 12px;
     }
     #sidebar {
+        left: 0;
+        top: 64px;
         flex-direction: column;
         justify-content: initial;
         border-top: initial;
-        margin-top: 64px;
+        width: 320px;
     }
     #sidebar a,
     .l a {