New layout WIP

5 files changed, 18 insertions, 36 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 1f7e715e..51c255a6 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -79,7 +79,7 @@ export default function App() {
   return (
     <Router>
       <>
-        <Header>
+        <div id="header">
           <div id="header_wrapper">
             {
               visitor.uid > 0 ?
@@ -121,7 +121,7 @@ export default function App() {
               }
             </nav>
           </div>
-        </Header>
+        </div>
         <section id="content">
           <Switch>
             <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} />
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
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 26cf26f6..e48d004c 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -21,4 +21,4 @@ const JuickApp = () => (
     </React.StrictMode>
 );
 
-ReactDOM.render(<JuickApp />, document.getElementById('wrapper'));
+ReactDOM.render(<JuickApp />, document.getElementById('app'));
diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
index 48f89360..b25879d4 100644
--- a/vnext/src/ui/Header.js
+++ b/vnext/src/ui/Header.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 const elClassHidden = 'header--hidden';
 
 const header = document.getElementById('header');
-header.removeChild(document.getElementById('header_wrapper'));
 
 export default function Header({ children }) {
     let dHeight = useRef(0);
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index 18d3d0d5..58829336 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -165,7 +165,6 @@ blockquote {
     align-items: center;
     justify-content: center;
     padding: 12px;
-    margin: 30px -3px 15px -3px;
 }
 .embedContainer > * {
     box-sizing: border-box;