Switch back to grid layout

1 files changed, 40 insertions, 53 deletions

diff --git a/vnext/src/index.css b/vnext/src/index.css
index 14810bc2..1d9292a2 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -48,7 +48,7 @@ html,
 body {
     width: 100%;
     height: 100%;
-    overscroll-behavior-y: none;
+    overscroll-behavior: none;
 }
 
 body {
@@ -124,12 +124,21 @@ hr {
     border: none;
 }
 
+#app {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+        "header"
+        "content"
+        "footer";
+}
+
 #header {
+    grid-area: header;
     background: var(--text-background-color);
     border-bottom: 1px solid var(--border-color);
-    z-index: 10;
-    position: fixed;
-    width: 100%;
+    position: sticky;
     top: 0;
 }
 
@@ -142,17 +151,16 @@ hr {
 }
 
 #sidebar {
-    position: fixed;
+    grid-area: footer;
+    position: sticky;
     bottom: 0;
-    left: 0;
-    width: 100%;
+    background: var(--text-background-color);
     z-index: 10;
 }
 
 #sidebar_wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+    display: inline-block;
+    width: 100%;
 }
 
 .nav_content {
@@ -160,8 +168,7 @@ hr {
 }
 
 #content {
-    margin-top: 64px !important;
-    padding-bottom: 64px;
+    grid-area: content;
 }
 
 .desktop {
@@ -190,20 +197,14 @@ hr {
 }
 
 #ctitle {
-    display: flex;
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-#ctitle a {
-    border-bottom: 2px solid transparent;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    padding: 24px;
 }
 
 #global {
     display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
 }
 
 .l {
@@ -211,13 +212,9 @@ hr {
     flex-flow: row wrap;
 }
 
-#global a,
-#ctitle a {
+#global > a {
     display: flex;
     align-items: center;
-}
-
-#global a {
     color: var(--dimmed-link-color);
     padding: 14px 16px;
 }
@@ -231,7 +228,7 @@ hr {
     vertical-align: middle;
 }
 
-#sidebar_wrapper > a:hover {
+#global > a:hover {
     background-color: var(--background-color);
     border-top: 2px solid #ff339a;
     cursor: pointer;
@@ -250,15 +247,11 @@ hr {
     font-weight: 400;
 }
 
-#global a,
-#ctitle a,
 .l a,
 .msg-button {
     border-bottom: 2px solid transparent;
 }
 
-#global a:hover,
-#ctitle a:hover,
 .l a:hover,
 .msg-button:hover {
     background-color: var(--background-color);
@@ -763,19 +756,18 @@ blockquote {
         display: none;
     }
 
-    #content {
-        width: 640px;
-        margin-bottom: 12px;
-        padding-bottom: 12px;
+    #app {
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 300px auto;
+        grid-template-areas:
+            "sidebar header header"
+            "sidebar content content"
+            "sidebar content content";
     }
 
     #sidebar {
-        position: sticky;
-        padding: 12px;
-        margin-top: 66px;
+        grid-area: sidebar;
         height: 100%;
-        z-index: auto;
-        overflow-y: auto;
     }
 
     article,
@@ -785,28 +777,23 @@ blockquote {
     }
 
     #sidebar_wrapper {
-        width: 300px;
-        overflow-y: auto;
-        height: 100%;
-        position: fixed;
-        flex-direction: column;
-        justify-content: start;
+        padding: 12px;
+        display: inline-block;
+        position: sticky;
+        top: 0;
     }
 
-    #sidebar_wrapper a,
     .l a {
         border-right: 2px solid transparent;
     }
 
-    #sidebar_wrapper > a:hover {
+    #global > a:hover {
         border-top: initial;
         border-right: 2px solid #ff339a;
     }
 
-    #header_wrapper,
-    #content_wrapper {
-        width: 1000px;
-        margin: 0 auto;
+    #global {
+        flex-direction: column;
     }
 
     #content_wrapper {