New layout WIP

1 files changed, 15 insertions, 31 deletions

diff --git a/vnext/src/index.css b/vnext/src/index.css
index 83a9a0e6..505298cc 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -3,6 +3,10 @@
     --main-width: 1000px;
 }
 
+* {
+    box-sizing: border-box;
+}
+
 html,
 body,
 div,
@@ -89,7 +93,6 @@ hr {
     grid-template-areas: "header" "content" "footer";
     grid-template-columns: 100%;
     grid-template-rows: auto 1fr auto;
-    transition: margin-left 0.2s;
     min-height: 100%;
     max-height: 100%;
 }
@@ -101,6 +104,7 @@ hr {
     transition: transform 0.2s;
     overflow-x: hidden;
 }
+
 .header--hidden {
     transform: translateY(-100%);
 }
@@ -114,25 +118,25 @@ hr {
 }
 
 #sidebar {
-    display: none;
+    grid-area: footer;
+    display: flex;
+    flex-direction: row;
 }
 
 .nav_content {
     padding: 10px;
 }
 
-#wrapper {
+#content {
     background: #fefdfe;
     grid-area: content;
     margin-top: 12px;
-    overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    transition: margin-left 0.4s;
 }
 
 #footer {
-    grid-area: footer;
+    display: none;
     background: #f8f8f8;
     border-top: 1px solid #ccc;
     color: #363636;
@@ -287,42 +291,22 @@ hr {
 
 @media (--viewport-desktop) {
     #app {
-        grid-template-areas: "header header" "content content" "footer footer";
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: min-content minmax(min-content, 1fr) min-content;
+        grid-template-areas: "header header header header""moo footer content zoo";
+        grid-template-columns: auto 240px 760px auto;
+        grid-template-rows: auto 1fr;
     }
     #header_wrapper,
     .footer_container {
         margin: 0 auto;
         width: var(--main-width);
     }
-    #wrapper {
-        justify-self: center;
-        width: var(--main-width);
-        display: grid;
-        grid-template-columns: 240px minmax(1fr, max-content);
-        grid-template-rows: auto;
-        grid-template-areas: "nav feed";
-    }
     .desktop {
         display: block;
     }
     .mobile {
         display: none;
     }
-    #content {
-        grid-area: feed;
-        width: 758px;
-        min-height: 100vh;
-    }
     #sidebar {
-        border: 0;
-        display: block;
-        grid-area: nav;
-        top: inherit;
-        left: inherit;
-        z-index: inherit;
-        overflow-x: inherit;
-        width: 240px;
+        flex-direction: column;
     }
-}
+}
\ No newline at end of file