Layout changes from legacy site

4 files changed, 92 insertions, 122 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index f8788972..f06d482f 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -149,72 +149,70 @@ export default function App() {
     <Router>
       <>
         <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} />
-        <div id="wrapper">
-          <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
-            <Switch>
-              <Route exact path="/">
-                <Discussions visitor={visitor} />
-              </Route>
-              <Route exact path="/home">
-                <Home visitor={visitor} />
-              </Route>
-              <Route exact path="/discover">
-                <Discover visitor={visitor} />
-              </Route>
-              <Route exact path="/settings">
-                <Settings visitor={visitor} onChange={auth} />
-              </Route>
-              <Route exact path="/login">
-                <Login visitor={visitor} onAuth={auth} />
-              </Route>
-              <Route exact path="/post">
-                <Post visitor={visitor} />
-              </Route>
-              <Route exact path="/pm">
-                <Contacts visitor={visitor} />
-              </Route>
-              <Route exact path="/pm/:user">
-                <Chat connection={eventSource} visitor={visitor} />
-              </Route>
-              <Route exact path="/:user/friends">
-                <Friends />
-              </Route>
-              <Route exact path="/:user/readers">
-                <Readers />
-              </Route>
-              <Route exact path="/:user">
-                <Blog visitor={visitor} />
-              </Route>
-              <Route exact path="/tag/:tag">
-                <Tag visitor={visitor} />
-              </Route>
-              <Route exact path="/:user/:mid">
-                <Thread connection={eventSource} visitor={visitor} />
-              </Route>
-            </Switch>
-          </section>
-          {
-            visitor.uid > 0 &&
-            <aside id="sidebar">
-              <Link to="/?show=my">
-                <Icon name="ei-clock" size="s" />
-                <span className="desktop">My feed</span>
-              </Link>
-              <Link to="/pm">
-                <Icon name="ei-envelope" size="s" />
-                <span className="desktop">Messages</span>
-              </Link>
-              <Link to="/?show=discuss">
-                <Icon name="ei-bell" size="s" />
-                <span className="desktop">Discussions</span>
-              </Link>
-              <Link to="/settings" rel="nofollow">
-                <Icon name="ei-gear" size="s" />
-                <span className="desktop">Settings</span>
-              </Link>
-            </aside>
-          }
-        </div>
+        <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
+          <Switch>
+            <Route exact path="/">
+              <Discussions visitor={visitor} />
+            </Route>
+            <Route exact path="/home">
+              <Home visitor={visitor} />
+            </Route>
+            <Route exact path="/discover">
+              <Discover visitor={visitor} />
+            </Route>
+            <Route exact path="/settings">
+              <Settings visitor={visitor} onChange={auth} />
+            </Route>
+            <Route exact path="/login">
+              <Login visitor={visitor} onAuth={auth} />
+            </Route>
+            <Route exact path="/post">
+              <Post visitor={visitor} />
+            </Route>
+            <Route exact path="/pm">
+              <Contacts visitor={visitor} />
+            </Route>
+            <Route exact path="/pm/:user">
+              <Chat connection={eventSource} visitor={visitor} />
+            </Route>
+            <Route exact path="/:user/friends">
+              <Friends />
+            </Route>
+            <Route exact path="/:user/readers">
+              <Readers />
+            </Route>
+            <Route exact path="/:user">
+              <Blog visitor={visitor} />
+            </Route>
+            <Route exact path="/tag/:tag">
+              <Tag visitor={visitor} />
+            </Route>
+            <Route exact path="/:user/:mid">
+              <Thread connection={eventSource} visitor={visitor} />
+            </Route>
+          </Switch>
+        </section>
+        {
+          visitor.uid > 0 &&
+          <aside id="sidebar">
+            <Link to="/?show=my">
+              <Icon name="ei-clock" size="s" />
+              <span className="desktop">My feed</span>
+            </Link>
+            <Link to="/pm">
+              <Icon name="ei-envelope" size="s" />
+              <span className="desktop">Messages</span>
+            </Link>
+            <Link to="/?show=discuss">
+              <Icon name="ei-bell" size="s" />
+              <span className="desktop">Discussions</span>
+            </Link>
+            <Link to="/settings" rel="nofollow">
+              <Icon name="ei-gear" size="s" />
+              <span className="desktop">Settings</span>
+            </Link>
+          </aside>
+        }
       </>
     </Router>
   );
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 {
diff --git a/vnext/src/index.html b/vnext/src/index.html
index 7c408656..e69e1429 100644
--- a/vnext/src/index.html
+++ b/vnext/src/index.html
@@ -38,16 +38,14 @@
                 </nav>
             </div>
         </div>
-        <div id="wrapper">
-            <div id="content">
-                <noscript>
-                    <article>
-                        Javascript is required to use Juick from browser.<br /> Alternatively we have <a
-                            href="mailto:juick@juick.com">maillist-like</a>
-                        and <a href="xmpp:juick@juick.com">chat</a> interfaces.
-                    </article>
-                </noscript>
-            </div>
+        <div id="content">
+            <noscript>
+                <article>
+                    Javascript is required to use Juick from browser.<br /> Alternatively we have <a
+                        href="mailto:juick@juick.com">maillist-like</a>
+                    and <a href="xmpp:juick@juick.com">chat</a> interfaces.
+                </article>
+            </noscript>
         </div>
         <div id="footer">
             <div id="footer-right"> &middot;
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index 9bcca83b..06ad5270 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -1,3 +1,6 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+@custom-media --viewport-mobile (width < 62.5rem);
+
 .msg-cont .ir {
     padding: 12px;
 }
@@ -231,3 +234,9 @@ blockquote {
 .msg-cont .nsfw .ir img:hover {
     opacity: 1;
 }
+
+@media (--viewport-desktop) {
+    .msg-cont {
+        width: 640px;
+    }
+}