CSS Grid WIP

10 files changed, 675 insertions, 826 deletions

diff --git a/vnext/package.json b/vnext/package.json
index ead8a09f..3a54831d 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -41,6 +41,7 @@
     "mini-css-extract-plugin": "^0.4.5",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.4.0",
     "prop-types": "^15.6.2",
     "react-router-prop-types": "^1.0.4",
     "react-test-renderer": "^16.6.3",
diff --git a/vnext/src/App.js b/vnext/src/App.js
index a74934ab..6d254d14 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -150,7 +150,19 @@ export default class App extends React.Component {
                 <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
               </Switch>
             </section>
+            <aside id="sidebar">
+            SIDESIDESIDE
+            </aside>
           </div>
+          <div id="footer">
+            <div id="footer-right"> &middot;
+                <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
+                <a href="/help/tos" rel="nofollow">TOS</a>
+            </div>
+            <div id="footer-left">juick.com &copy; 2008-2018
+                <br />
+            </div>
+        </div>
         </>
       </Router>
     );
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 69477c16..43b4a676 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -66,7 +66,7 @@ export default class Header extends React.Component {
         this.wScrollBefore = this.wScrollCurrent;
     }
     render() {
-        return (<header ref={this.header}>{this.props.children}</header>);
+        return (<header id="header" ref={this.header}>{this.props.children}</header>);
     }
 }
 
diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css
new file mode 100644
index 00000000..291ca562
--- /dev/null
+++ b/vnext/src/components/Message.css
@@ -0,0 +1,193 @@
+article {
+    background: #fff;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+    line-height: 140%;
+    margin-bottom: 10px;
+    padding: 20px;
+}
+article time {
+    color: #999;
+    font-size: 10pt;
+}
+article p {
+    clear: left;
+    margin: 5px 0 15px 0;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+article .ir {
+    text-align: center;
+}
+article .ir a {
+    cursor: zoom-in;
+    display: block;
+}
+article .ir img {
+    max-width: 100%;
+}
+article > nav.l,
+.msg-cont > nav.l {
+    border-top: 1px solid #eee;
+    display: flex;
+    justify-content: space-around;
+    font-size: 10pt;
+}
+article > nav.l a,
+.msg-cont > nav.l a {
+    color: #888;
+    margin-right: 15px;
+}
+article .likes {
+    padding-left: 20px;
+}
+article .replies {
+    margin-left: 18px;
+}
+article .tags {
+    margin-top: 3px;
+}
+.msg-tags {
+    margin-top: 12px;
+    min-height: 1px;
+}
+article .tags > a,
+.badge,
+.msg-tags > a {
+    background: #eee;
+    border: 1px solid #eee;
+    color: #888;
+    display: inline-block;
+    font-size: 10pt;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    padding: 0 10px;
+}
+.l .msg-button {
+    align-items: center;
+    display: flex;
+    flex-basis: 0;
+    flex-direction: column;
+    flex-grow: 1;
+    padding-top: 12px;
+}
+.l .msg-button-icon {
+    font-weight: bold;
+}
+.msgthread {
+    margin-bottom: 0;
+}
+.msg-avatar {
+    float: left;
+    max-height: 48px;
+    margin-right: 10px;
+    max-width: 48px;
+}
+.msg-avatar img {
+    max-height: 48px;
+    vertical-align: top;
+    max-width: 48px;
+}
+.msg-cont {
+    background: #FFF;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+    line-height: 140%;
+    margin-bottom: 12px;
+    padding: 20px;
+    width: 640px;
+}
+.reply-new .msg-cont {
+    border-right: 5px solid #0C0;
+}
+.msg-ts {
+    font-size: small;
+    vertical-align: top;
+}
+.msg-ts,
+.msg-ts > a {
+    color: #999;
+}
+.msg-txt {
+    clear: both;
+    margin: 0 0 12px;
+    padding-top: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+.msg-media {
+    text-align: center;
+}
+.msg-links {
+    color: #999;
+    font-size: small;
+    margin: 5px 0 0 0;
+}
+.msg-comments {
+    color: #AAA;
+    font-size: small;
+    margin-top: 10px;
+    overflow: hidden;
+    text-indent: 10px;
+}
+.ta-wrapper {
+    border: 1px solid #DDD;
+    display: flex;
+    flex-grow: 1;
+}
+.msg-comment {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+}
+.msg-comment-hidden {
+    display: none;
+}
+.msg-comment textarea {
+    border: 0;
+    flex-grow: 1;
+    outline: none !important;
+    padding: 4px;
+    resize: vertical;
+    vertical-align: top;
+}
+.attach-photo {
+    cursor: pointer;
+}
+.attach-photo-active {
+    color: green;
+}
+.msg-comment input {
+    align-self: flex-start;
+    background: #EEE;
+    border: 1px solid #CCC;
+    color: #999;
+    margin: 0 0 0 6px;
+    position: sticky;
+    top: 70px;
+    vertical-align: top;
+    width: 50px;
+}
+.msg-recomms {
+    color: #AAA;
+    font-size: small;
+    margin-top: 10px;
+    overflow: hidden;
+    text-indent: 10px;
+}
+#replies .msg-txt,
+#private-messages .msg-txt {
+    margin: 0;
+}
+.title2 {
+    background: #fff;
+    margin: 20px 0;
+    padding: 10px 20px;
+    width: 640px;
+}
+.title2-right {
+    float: right;
+    line-height: 24px;
+}
+#content .title2 h2 {
+    font-size: x-large;
+    margin: 0;
+}
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index f303d5eb..aed2a9b1 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -9,6 +9,8 @@ import Avatar from './Avatar';
 
 import { format } from '../utils/embed';
 
+import './Message.css';
+
 const Message = React.memo(({ data, visitor, children, ...rest }) => {
     return (
         <div className="msg-cont">
diff --git a/vnext/src/index.js b/vnext/src/index.js
index d48d433a..74a332fd 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -30,4 +30,4 @@ const JuickApp = () => (
   </Suspense>
 );
 
-ReactDOM.render(<JuickApp />, document.getElementById('body'));
+ReactDOM.render(<JuickApp />, document.getElementById('app'));
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 29a8c374..595222ee 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -1,158 +1,105 @@
-/* #region generic */
+@custom-media --viewport-desktop (width >=62.5rem);
+:root {
+    --main-width: 960px;
+}
 
-html,
-body,
-div,
-h1,
-h2,
-ul,
-li,
-p,
-form,
-input,
-textarea,
-pre {
+html, body, div, h1, h2, ul, li, p, form, input, textarea, pre {
     margin: 0;
     padding: 0;
 }
-html,
-input,
-textarea,
-button {
+
+textarea {
+    overflow: auto;
+}
+
+html, input, textarea {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     font-size: 12pt;
     -webkit-font-smoothing: subpixel-antialiased;
 }
-h1,
-h2 {
+
+h1, h2 {
     font-weight: normal;
 }
+
 ul {
     list-style-type: none;
 }
+
 a {
     color: #069;
     text-decoration: none;
 }
-img,
-hr {
+
+img, hr {
     border: none;
 }
-hr {
-    background: #CCC;
-    height: 1px;
-    margin: 10px 0;
-}
-pre {
-    background: #222;
-    color: #0f0;
-    overflow-x: auto;
-    padding: 6px;
-    white-space: pre;
-}
-pre::selection {
-    background: #0f0;
-    color: #222;
-}
-pre::-moz-selection {
-    background: #0f0;
-    color: #222;
-}
-.u {
-    text-decoration: underline;
-}
 
-/* #endregion */
+#app {
+    background: #fdfdfe;
+    display: grid;
+    grid-template-areas: "header" "content" "footer";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(1fr, auto) auto;
+    min-height: 100vh;
+    font: -apple-system-body;
+    font-family: -apple-system, Segoe UI;
+    transition: margin-left 0.4s;
+}
 
-/* #region overall layout */
+#header {
+    grid-area: header;
+    background: #fff;
+    border-bottom: 1px solid #ccc;
+}
 
-html {
-    background: #f8f8f8;
+#sidebar {
+    border-right: 1px solid #ccc;
     color: #222;
-}
-#content {
-    margin: 0 auto;
-    width: 728px;
-    margin-top: 62px;
-}
-noscript article {
-    background-image: url("matrix.jpg");
-    background-color: #222;
-    background-size: cover;
-    color: #fff;
-    min-height: 480px;
-}
-*::selection {
-    background: #006699;
-    color: #fff;
-}
-#body > header {
+    transition: width 0.4s;
     position: fixed;
+    width: 0;
     top: 0;
-    width: 100%;
-    z-index: 10;
-    transition-duration: 0.4s;
-    transition-timing-function: ease-in-out;
-    transition-property: transform;
-}
-@supports (backdrop-filter: blur(10px)) {
-    body > header--background {
-        background: rgba(255, 255, 255, 0.8);
-        backdrop-filter: blur(10px);
-    }
-}
-#header_wrapper {
-    margin: 0 auto;
-    width: 1000px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 4px;
+    left: 0;
+    overflow-x: hidden;
+    height: 100%;
+    z-index: 1;
 }
-.header--background {
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
-    background: #fff;
+
+.nav_content {
+    padding: 10px;
 }
-.header--hidden {
-    transform: translateY(-100%);
+
+#wrapper {
+    background: #fefdfe;
+    grid-area: content;
+    height: 100%;
+    padding: 10px;
 }
+
 #footer {
-    color: #999;
-    font-size: 10pt;
-    margin: 40px;
-    padding: 10px 0;
+    grid-area: footer;
+    background: #f8f8f8;
+    border-top: 1px solid #ccc;
+    color: #222;
+    padding: 10px;
 }
 
-@media screen and (max-width: 850px) {
-    html {
-        text-size-adjust: 100%;
-    }
-    #body,
-    #topwrapper,
-    #footer {
-        margin: 0 auto;
-        min-width: 310px;
-        width: auto;
-    }
-    #body > header {
-        margin-bottom: 15px;
-    }
-    #content {
-        margin: 52px auto 0;
-    }
+.desktop {
+    display: none;
 }
 
-/* #endregion */
-
-/* #region header internals */
+.card {
+    padding: 6px 24px;
+}
 
 #logo {
     height: 36px;
     width: 110px;
 }
+
 #logo a {
-    background: url("logo@2x.png") no-repeat;
+    background: url("//i.juick.com/logo.png") no-repeat;
     background-size: cover;
     border: 0;
     display: block;
@@ -162,718 +109,89 @@ noscript article {
     white-space: nowrap;
     width: 110px;
 }
-#global {
-    display: flex;
-}
-#global a {
-    color: #888;
-    display: inline-block;
-    font-size: 13pt;
-    padding: 14px 6px;
-}
-#global li {
-    display: inline-block;
-}
-#ctitle a {
-    padding: 14px;
-}
-#global a:hover,
-#ctitle a:hover,
-.l a:hover {
-    color: #069;
-    cursor: pointer;
-}
-#search input {
-    background: #FFF;
-    border: 1px solid #ccc;
-    outline: none !important;
-    padding: 4px;
-    -webkit-appearance: none;
-    border-radius: 0;
-}
-
-/* #endregion */
-
-/* #region left column internals */
-
-.toolbar {
-    border-top: 1px solid #CCC;
-}
 
 #ctitle {
+    display: flex;
     font-size: 14pt;
 }
+
 #ctitle img {
     margin-right: 5px;
     vertical-align: middle;
-    width: 48px;
-}
-#ustats li {
-    font-size: 10pt;
-    margin: 3px 0;
-}
-#column table.iread {
-    width: 100%;
-}
-#column table.iread td {
-    text-align: center;
+    max-width: 48px;
+    max-height: 48px;
 }
-#column table.iread img {
-    height: 48px;
-    width: 48px;
-}
-
-/* #endregion */
-
-/* #region main content */
-#content > p,
-#content > h1,
-#content > h2,
-#minimal_content > p,
-#minimal_content > h1,
-#minimal_content > h2 {
-    margin: 1em 0;
-}
-.page {
-    background: #eee;
-    padding: 6px;
-    text-align: center;
-}
-
-.page a {
-    color: #888;
-}
-
-/* #endregion */
-
-/* #region article, message internals */
 
-article,
-.msg-cont {
-    background: #fff;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
-    line-height: 140%;
-    margin-bottom: 10px;
-    padding: 20px;
-}
-article time,
-.msg-cont time {
-    color: #999;
-    font-size: 10pt;
-}
-article p,
-.msg-cont p {
-    clear: left;
-    margin: 5px 0 15px 0;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-}
-article .ir,
-.msg-cont .ir {
-    text-align: center;
-}
-article .ir a,
-.msg-cont .ir a {
-    cursor: zoom-in;
-    display: block;
-}
-article .ir img,
-.msg-cont .ir img {
-    max-width: 100%;
-}
-article > nav.l,
-.msg-cont > nav.l {
-    border-top: 1px solid #eee;
+#global {
     display: flex;
-    justify-content: space-around;
-    font-size: 10pt;
 }
-article > nav.l a,
-.msg-cont > nav.l a {
-    color: #888;
-    margin-right: 15px;
-}
-article .likes {
-    padding-left: 20px;
-}
-article .replies {
-    margin-left: 18px;
-}
-article .tags {
-    margin-top: 3px;
-}
-.msg-tags {
-    margin-top: 12px;
-    min-height: 1px;
-}
-article .tags > a,
-.badge,
-.msg-tags > a {
-    background: #eee;
-    border: 1px solid #eee;
+
+#global a {
     color: #888;
-    cursor: pointer;
     display: inline-block;
-    font-size: 10pt;
-    margin-bottom: 5px;
-    margin-right: 5px;
-    padding: 0 10px;
-}
-.l .msg-button {
-    align-items: center;
-    display: flex;
-    flex-basis: 0;
-    flex-direction: column;
-    flex-grow: 1;
-    padding-top: 12px;
-}
-.l .msg-button-icon {
-    font-weight: bold;
-}
-.msgthread {
-    margin-bottom: 0;
-}
-.msg-avatar {
-    min-height: 48px;
-    margin-right: 10px;
-    min-width: 48px;
-}
-.msg-avatar img {
-    height: 48px;
-    vertical-align: top;
-    width: 48px;
-}
-.msg-cont {
-    background: #FFF;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
-    line-height: 140%;
-    margin-bottom: 12px;
-    padding: 20px;
-}
-.reply-new .msg-cont {
-    border-right: 5px solid #0C0;
-}
-.msg-ts {
-    font-size: small;
-    vertical-align: top;
-}
-.msg-ts,
-.msg-ts > a {
-    color: #999;
-}
-.msg-txt {
-    clear: both;
-    margin: 0 0 12px;
-    padding-top: 10px;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-}
-.msg-media {
-    text-align: center;
-}
-.msg-links {
-    color: #999;
-    font-size: small;
-    margin: 5px 0 0 0;
-}
-.msg-comments {
-    color: #AAA;
-    font-size: small;
-    margin-top: 10px;
-    overflow: hidden;
-    text-indent: 10px;
-}
-.msg-comment-hidden {
-    display: none;
-}
-.msg-comment input {
-    align-self: flex-start;
-    background: #EEE;
-    border: 1px solid #CCC;
-    color: #999;
-    margin: 0 0 0 6px;
-    position: sticky;
-    top: 70px;
-    vertical-align: top;
-    width: 50px;
-}
-.msg-recomms {
-    color: #AAA;
-    font-size: small;
-    margin-top: 10px;
-    overflow: hidden;
-    text-indent: 10px;
-}
-#replies .msg-cont {
-    margin: 0;
-    box-shadow: none;
-    border-bottom: 1px #eee solid;
-}
-#replies .msg-txt,
-#private-messages .msg-txt {
-    margin: 0;
-}
-.title2 {
-    background: #fff;
-    margin: 20px 0;
-    padding: 10px 20px;
-    width: 640px;
-}
-.title2-right {
-    float: right;
-    line-height: 24px;
-}
-#content .title2 h2 {
-    font-size: x-large;
-    margin: 0;
-}
-
-@media screen and (max-width: 850px) {
-    #header_wrapper {
-        width: auto;
-    }
-    #content {
-        width: 100%;
-    }
-    #global {
-        justify-content: space-around;
-        flex-grow: 1;
-    }
-    #search {
-        padding: 4px;
-    }
-    article {
-        overflow: auto;
-    }
-    article p {
-        margin: 10px 0 8px 0;
-    }
-    .msg,
-    .msg-cont {
-        min-width: 280px;
-        width: auto;
-    }
-    .msg-cont {
-        margin: 8px 0;
-    }
-    .msg-media {
-        overflow: auto;
-    }
-    .title2 h2 {
-        font-size: large;
-    }
-    .msg-comment {
-        flex-direction: column;
-    }
-    .msg-comment input {
-        align-self: flex-end;
-        margin: 6px 0 0 0;
-        width: 100px;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    #content {
-        margin-top: 104px;
-        width: 100%;
-    }
-    #search {
-        display: none;
-    }
-    #global a {
-        padding: 14px 2px;
-        font-size: 11pt;
-    }
-    .msg-cont > nav.l,
-    article > nav.l {
-        font-size: 9pt;
-    }
-    .msg-txt {
-        padding-top: 5px;
-    }
-    .title2 {
-        font-size: 11pt;
-        width: auto;
-    }
-    #content .title2 h2 {
-        font-size: 11pt;
-    }
-    .title2-right {
-        line-height: initial;
-    }
-}
-
-/* #endregion */
-
-/* #region user-generated texts */
-
-q:before,
-q:after {
-    content: "";
-}
-q,
-blockquote {
-    border-left: 3px solid #CCC;
-    color: #666;
-    display: block;
-    margin: 10px 0 10px 10px;
-    padding-left: 10px;
-}
-
-/* #endregion */
-
-/* #region new message form internals */
-
-#newmessage {
-    background: #E5E5E0;
-    margin-bottom: 20px;
-    padding: 15px;
-}
-#newmessage textarea {
-    border: 1px solid #CCC;
-    box-sizing: border-box;
-    margin: 0 0 5px 0;
-    margin-top: 20px;
-    max-height: 6em;
-    min-width: 280px;
-    padding: 4px;
-    width: 100%;
-}
-#newmessage input {
-    border: 1px solid #CCC;
-    margin: 5px 0;
-    padding: 2px 4px;
-}
-#newmessage .img {
-    width: 500px;
-}
-#newmessage .tags {
-    width: 500px;
-}
-#newmessage .subm {
-    background: #EEEEE5;
-    width: 150px;
-}
-@media screen and (max-width: 850px) {
-    #newmessage .img,
-    #newmessage .tags {
-        width: 100%;
-    }
-}
-
-/* #endregion */
-
-/* #region user lists */
-
-.users {
-    margin: 10px 0;
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-}
-.users > span {
-    overflow: hidden;
-    padding: 6px 0;
-    width: 200px;
-}
-.users img {
-    height: 32px;
-    margin-right: 6px;
-    vertical-align: middle;
-    width: 32px;
+    font-size: 13pt;
+    padding: 14px 16px;
 }
 
-/* #endregion */
-
-/* #region signup form */
-
-.signup-h1 > img {
-    margin-right: 10px;
-    vertical-align: middle;
-}
-.signup-h1 {
-    font-size: x-large;
-    margin: 20px 0 10px 0;
-}
-.signup-h2 {
-    font-size: large;
-    margin: 10px 0 5px 0;
-}
-.signup-hr {
-    margin: 20px 0;
+#global li {
+    display: inline-block;
 }
 
-/* #endregion */
-
-/* #region PM */
-
-.newpm {
-    margin: 20px 60px 30px 60px;
-}
-.newpm textarea {
-    resize: vertical;
-    width: 100%;
-}
-.newpm-send input {
-    width: 100px;
+#ctitle a {
+    padding: 4px 20px;
 }
 
-/* #endregion */
-
-/* #region popup dialog (lightbox) */
-
-#dialogb {
-    background: #222;
-    height: 100%;
-    left: 0;
-    opacity: 0.6;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 10;
-}
-#dialogt {
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-#dialogw {
-    z-index: 11;
-    max-width: 96%;
-    max-height: calc(100% - 100px);
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-#dialogw a {
-    display: block;
-}
-#dialogw img {
-    max-height: 100%;
-    max-height: 90vh;
-    max-width: 100%;
-}
-#dialog_header {
-    width: 100%;
-    height: 44px;
-    position: fixed;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-}
-.header_image {
-    background: rgba(0, 0, 0, 0.28);
-}
-#dialogc {
+#global a:hover, #global li:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
+    background-color: #ec4b98;
+    color: #fff;
     cursor: pointer;
-    color: #ccc;
-    padding-right: 6px;
-}
-.dialoglogin {
-    background: #fff;
-    padding: 25px;
-    width: 300px;
-}
-.dialog-opened {
-    overflow: hidden;
-}
-#signfb,
-#signvk {
-    display: block;
-    line-height: 32px;
-    margin: 10px 0;
-    text-decoration: none;
-    width: 100%;
-}
-#signvk {
-    margin-bottom: 30px;
-}
-.dialoglogin form {
-    margin-top: 7px;
-}
-.signinput,
-.signsubmit {
-    border: 1px solid #CCC;
-    margin: 3px 0;
-    padding: 3px;
-}
-.signinput {
-    width: 292px;
-}
-.signsubmit {
-    width: 70px;
-}
-.dialogshare {
-    background: #fff;
-    min-width: 300px;
-    overflow: auto;
-    padding: 20px;
-}
-.dialogl {
-    background: #fff;
-    border: 1px solid #DDD;
-    margin: 3px 0 20px;
-    padding: 5px;
-}
-.dialogshare li {
-    float: left;
-    margin: 5px 10px 0 0;
-}
-.dialogshare a {
-    display: block;
-}
-.dialogtxt {
-    background: #fff;
-    padding: 20px;
-}
-
-@media screen and (max-width: 480px) {
-    .dialog-opened {
-        position: fixed;
-        width: 100%;
-    }
 }
 
-/* #endregion */
-
-/* #region misc */
-
-#wsthread {
-    background: #CCC;
-    bottom: 20px;
-    cursor: pointer;
-    display: none;
-    padding: 5px 10px;
-    position: fixed;
-    right: 20px;
-}
-.sharenew {
-    display: inline-block;
-    line-height: 32px;
-    min-height: 32px;
-    min-width: 200px;
-    padding: 0 12px 0 37px;
-}
 .icon {
     margin-top: -2px;
     vertical-align: middle;
 }
-.icon--ei-link {
-    margin-top: -1px;
-}
-.icon--ei-comment {
-    margin-top: -5px;
-}
-.newmessage {
-    /* textarea on the /post page */
-    border: 1px solid #DDD;
-    padding: 2px;
-    resize: vertical;
-    width: 100%;
-}
-
-/* #endregion */
 
-/* #region footer internals */
 
-#footer-social {
-    float: left;
-}
-#footer-social a {
-    border: 0;
-    display: inline-block;
-}
-#footer-left {
-    margin-left: 286px;
-    margin-right: 350px;
-}
-#footer-right {
-    float: right;
-}
-
-@media screen and (max-width: 850px) {
-    #footer {
-        margin: 0 10px;
+@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;
     }
-    #footer div {
-        float: none;
-        margin: 10px 0;
+    #header_wrapper, .footer_container {
+        margin: 0 auto;
+        width: var(--main-width);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    #wrapper {
+        justify-self: center;
+        width: var(--main-width);
+        display: grid;
+        grid-gap: 10px;
+        grid-template-columns: 200px minmax(auto, max-content);
+        grid-template-areas: "nav feed";
+    }
+    .desktop {
+        display: block;
+    }
+    .mobile {
+        display: none;
     }
-}
-
-/* #endregion */
-
-/* #region settings */
-
-fieldset {
-    border: 1px dotted #ccc;
-    margin-top: 25px;
-}
-
-/* #endregion */
-
-/* #region embeds */
-
-.embedContainer {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: 30px -3px 15px -3px;
-}
-.embedContainer > * {
-    box-sizing: border-box;
-    flex-grow: 1;
-    margin: 3px;
-    min-width: 49%;
-}
-.embedContainer > .compact {
-    flex-grow: 0;
-}
-.embedContainer .picture img {
-    display: block;
-}
-.embedContainer img,
-.embedContainer video {
-    max-width: 100%;
-    max-height: 80vh;
-}
-.embedContainer > .audio,
-.embedContainer > .youtube {
-    min-width: 90%;
-}
-.embedContainer audio {
-    width: 100%;
-}
-.embedContainer iframe {
-    overflow: hidden;
-    resize: vertical;
-    display: block;
-}
-
-/* #endregion */
-
-/* #region nsfw */
-
-article.nsfw .embedContainer img,
-article.nsfw .embedContainer video,
-article.nsfw .embedContainer iframe,
-article.nsfw .ir img {
-    opacity: 0.1;
-}
-article.nsfw .embedContainer img:hover,
-article.nsfw .embedContainer video:hover,
-article.nsfw .embedContainer iframe:hover,
-article.nsfw .ir img:hover {
-    opacity: 1;
-}
-
-/* #endregion */
+    .msgs {
+        grid-area: "feed";
+    }
+    #sidebar {
+        border: 0;
+        position: static;
+        grid-area: nav;
+        width: auto;
+        top: inherit;
+        left: inherit;
+        z-index: inherit;
+        overflow-x: inherit;
+    }
+}
\ No newline at end of file
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index b26d181f..3b8480d7 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html prefix="og: http://ogp.me/ns#">
+
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -29,29 +30,29 @@
 </head>
 
 <body>
-    <div id="body">
-    <div id="header">
-        <div id="header_wrapper">
-            <div id="logo"><a href="/">Juick</a></div>
+    <div id="app">
+        <div id="header">
+            <div id="header_wrapper">
+                <div id="logo"><a href="/">Juick</a></div>
+            </div>
         </div>
-    </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>
-    <div id="footer">
-        <div id="footer-right"> &middot;
-            <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
-            <a href="/help/tos" rel="nofollow">TOS</a>
+        <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-left">juick.com &copy; 2008-2018
-            <br />
-            <!-- EXT_FOOTER -->
+        <div id="footer">
+            <div id="footer-right"> &middot;
+                <a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
+                <a href="/help/tos" rel="nofollow">TOS</a>
+            </div>
+            <div id="footer-left">juick.com &copy; 2008-2018
+                <br />
+                <!-- EXT_FOOTER -->
+            </div>
         </div>
     </div>
 </body>
diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index 35a698e0..3a9b2678 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
+const postcssPresetEnv = require('postcss-preset-env');
 
 module.exports = (env, argv) => {
     const dev = argv.mode !== 'production';
@@ -43,7 +44,7 @@ module.exports = (env, argv) => {
                         {
                             loader: 'postcss-loader', options: {
                                 plugins: () => [
-                                    require('autoprefixer')({})
+                                    postcssPresetEnv({ stage: 0, autoprefixer: { grid: true } })
                                 ]
                             }
                         }
diff --git a/vnext/yarn.lock b/vnext/yarn.lock
index d292460c..98c0bc5e 100644
--- a/vnext/yarn.lock
+++ b/vnext/yarn.lock
@@ -840,6 +840,11 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@csstools/convert-colors@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
+
 "@types/node@*":
   version "10.12.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.0.tgz#ea6dcbddbc5b584c83f06c60e82736d8fbb0c235"
@@ -1782,7 +1787,7 @@ browserslist@^4.0.0, browserslist@^4.1.0:
     electron-to-chromium "^1.3.80"
     node-releases "^1.0.0-alpha.14"
 
-browserslist@^4.3.3:
+browserslist@^4.3.3, browserslist@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.3.4.tgz#4477b737db6a1b07077275b24791e680d4300425"
   integrity sha512-u5iz+ijIMUlmV8blX82VGFrB9ecnUg5qEt55CMZ/YJEhha+d8qpBfOFuutJ6F/VKRXjZoD33b6uvarpPxcl3RA==
@@ -1922,6 +1927,11 @@ caniuse-lite@^1.0.30000899:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000902.tgz#74eaf6ed7f1d31e5148725081c9df60051c5e2b3"
   integrity sha512-EZG6qrRHkW715hOFjOrshH2JygbLfhaC8NjjkE5EdGJZhCYbtnJMaRdicB+2AP8xKX3QzW9g3mkDUTHUoBG5rQ==
 
+caniuse-lite@^1.0.30000905:
+  version "1.0.30000910"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000910.tgz#755d5181d4b006e5a2b59b1ffa05d0a0470039f5"
+  integrity sha512-u/nxtHGAzCGZzIxt3dA/tpSPOcirBZFWKwz1EPz4aaupnBI2XR0Rbr74g0zc6Hzy41OEM4uMoZ38k56TpYAWjQ==
+
 capture-exit@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -2383,6 +2393,13 @@ css-loader@^1.0.1:
     postcss-value-parser "^3.3.0"
     source-list-map "^2.0.0"
 
+css-prefers-color-scheme@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+  integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
+  dependencies:
+    postcss "^7.0.5"
+
 css-select-base-adapter@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
@@ -2448,6 +2465,11 @@ css-what@2.1, css-what@^2.1.2:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
   integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
 
+cssdb@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.2.0.tgz#89623ec696121d0688080ccdcd4627c7e6c6ee0d"
+  integrity sha512-27CuM+rp1/HIH4hkiOvrRUjgv31WamWk7+XSGz7OP/uWR8EOMeXOh4Ncpa/Eq1eO/1eRhQx7HWj8KEbt4nKQBA==
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -3641,6 +3663,11 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
+flatten@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+  integrity sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=
+
 flush-write-stream@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
@@ -5455,6 +5482,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash._reinterpolate@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -5485,6 +5517,21 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.template@^4.2.4:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  integrity sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
+  integrity sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=
+  dependencies:
+    lodash._reinterpolate "~3.0.0"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -6579,6 +6626,14 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-attribute-case-insensitive@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.0.tgz#807b6a797ad8bf1c821b2d51cf641e9dd3837624"
+  integrity sha512-K/zqdg0/UgUgC8qR0lDuxYzmowPpnvrrNC5YuoqzhHMubR9AuhsPlpVu3jjkLHgDAzR+ohD/m7//iGnN9WxbzQ==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
 postcss-calc@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.0.tgz#cf0e78e1d7d9f75119b833abc786fa4b61afedda"
@@ -6589,6 +6644,48 @@ postcss-calc@^7.0.0:
     postcss-selector-parser "^5.0.0-rc.3"
     postcss-value-parser "^3.3.0"
 
+postcss-color-functional-notation@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+  integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-gray@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-hex-alpha@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.2.tgz#e9b1886bb038daed33f6394168c210b40bb4fdb6"
+  integrity sha512-8bIOzQMGdZVifoBQUJdw+yIY00omBd2EwkJXepQo9cjp1UOHHHoeRDeSzTP6vakEpaRc6GAIOfvcQR7jBYaG5Q==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-mod-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-color-rebeccapurple@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+  integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
 postcss-colormin@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.2.tgz#93cd1fa11280008696887db1a528048b18e7ed99"
@@ -6608,6 +6705,37 @@ postcss-convert-values@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-custom-media@^7.0.7:
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.7.tgz#bbc698ed3089ded61aad0f5bfb1fb48bf6969e73"
+  integrity sha512-bWPCdZKdH60wKOTG4HKEgxWnZVjAIVNOJDvi3lkuTa90xo/K0YHa2ZnlKLC5e2qF8qCcMQXt0yzQITBp8d0OFA==
+  dependencies:
+    postcss "^7.0.5"
+
+postcss-custom-properties@^8.0.9:
+  version "8.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.9.tgz#8943870528a6eae4c8e8d285b6ccc9fd1f97e69c"
+  integrity sha512-/Lbn5GP2JkKhgUO2elMs4NnbUJcvHX4AaF5nuJDaNkd2chYW1KA5qtOGGgdkBEWcXtKSQfHXzT7C6grEVyb13w==
+  dependencies:
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-custom-selectors@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+  integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
+postcss-dir-pseudo-class@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+  integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
 postcss-discard-comments@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.1.tgz#30697735b0c476852a7a11050eb84387a67ef55d"
@@ -6636,6 +6764,75 @@ postcss-discard-overridden@^4.0.1:
   dependencies:
     postcss "^7.0.0"
 
+postcss-double-position-gradients@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+  integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
+  dependencies:
+    postcss "^7.0.5"
+    postcss-values-parser "^2.0.0"
+
+postcss-env-function@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+  integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-focus-visible@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+  integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-focus-within@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+  integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-font-variant@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc"
+  integrity sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-gap-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+  integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-image-set-function@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+  integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-initial@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.0.tgz#1772512faf11421b791fb2ca6879df5f68aa0517"
+  integrity sha512-WzrqZ5nG9R9fUtrA+we92R4jhVvEB32IIRTzfIG/PLL8UV4CvbF1ugTEHEFX6vWxl41Xt5RTCJPEZkuWzrOM+Q==
+  dependencies:
+    lodash.template "^4.2.4"
+    postcss "^7.0.2"
+
+postcss-lab-function@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+  integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
+  dependencies:
+    "@csstools/convert-colors" "^1.4.0"
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
 postcss-load-config@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
@@ -6654,6 +6851,20 @@ postcss-loader@^3.0.0:
     postcss-load-config "^2.0.0"
     schema-utils "^1.0.0"
 
+postcss-logical@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+  integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-media-minmax@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+  integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
+  dependencies:
+    postcss "^7.0.2"
+
 postcss-merge-longhand@^4.0.9:
   version "4.0.9"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.9.tgz#c2428b994833ffb2a072f290ca642e75ceabcd6f"
@@ -6747,6 +6958,13 @@ postcss-modules-values@^1.3.0:
     icss-replace-symbols "^1.1.0"
     postcss "^6.0.1"
 
+postcss-nesting@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
+  integrity sha512-WSsbVd5Ampi3Y0nk/SKr5+K34n52PqMqEfswu6RtU4r7wA8vSD+gM8/D9qq4aJkHImwn1+9iEFTbjoWsQeqtaQ==
+  dependencies:
+    postcss "^7.0.2"
+
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
@@ -6837,6 +7055,77 @@ postcss-ordered-values@^4.1.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-overflow-shorthand@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+  integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-page-break@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+  integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-place@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+  integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-values-parser "^2.0.0"
+
+postcss-preset-env@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.4.0.tgz#f5466550b177454fc98ca5054b4478e8e5caa714"
+  integrity sha512-0jCyY/T9kWv1i2abt5DOOoh0uHJia0HUTWMV72Tw75tGx3pH628oSS8WBMCE5L1Ou3LvoAl9pe07u8g/afvc3A==
+  dependencies:
+    autoprefixer "^9.3.1"
+    browserslist "^4.3.4"
+    caniuse-lite "^1.0.30000905"
+    css-prefers-color-scheme "^3.0.0"
+    cssdb "^4.2.0"
+    postcss "^7.0.5"
+    postcss-attribute-case-insensitive "^4.0.0"
+    postcss-color-functional-notation "^2.0.1"
+    postcss-color-gray "^5.0.0"
+    postcss-color-hex-alpha "^5.0.2"
+    postcss-color-mod-function "^3.0.3"
+    postcss-color-rebeccapurple "^4.0.1"
+    postcss-custom-media "^7.0.7"
+    postcss-custom-properties "^8.0.9"
+    postcss-custom-selectors "^5.1.2"
+    postcss-dir-pseudo-class "^5.0.0"
+    postcss-double-position-gradients "^1.0.0"
+    postcss-env-function "^2.0.2"
+    postcss-focus-visible "^4.0.0"
+    postcss-focus-within "^3.0.0"
+    postcss-font-variant "^4.0.0"
+    postcss-gap-properties "^2.0.0"
+    postcss-image-set-function "^3.0.1"
+    postcss-initial "^3.0.0"
+    postcss-lab-function "^2.0.1"
+    postcss-logical "^3.0.0"
+    postcss-media-minmax "^4.0.0"
+    postcss-nesting "^7.0.0"
+    postcss-overflow-shorthand "^2.0.0"
+    postcss-page-break "^2.0.0"
+    postcss-place "^4.0.1"
+    postcss-pseudo-class-any-link "^6.0.0"
+    postcss-replace-overflow-wrap "^3.0.0"
+    postcss-selector-matches "^4.0.0"
+    postcss-selector-not "^4.0.0"
+
+postcss-pseudo-class-any-link@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+  integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
+  dependencies:
+    postcss "^7.0.2"
+    postcss-selector-parser "^5.0.0-rc.3"
+
 postcss-reduce-initial@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.2.tgz#bac8e325d67510ee01fa460676dc8ea9e3b40f15"
@@ -6857,6 +7146,29 @@ postcss-reduce-transforms@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-replace-overflow-wrap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+  integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
+  dependencies:
+    postcss "^7.0.2"
+
+postcss-selector-matches@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+  integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
+postcss-selector-not@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0"
+  integrity sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==
+  dependencies:
+    balanced-match "^1.0.0"
+    postcss "^7.0.2"
+
 postcss-selector-parser@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
@@ -6900,6 +7212,15 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss-values-parser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.0.tgz#1ba42cae31367c44f96721cb5eb99462bfb39705"
+  integrity sha512-cyRdkgbRRefu91ByAlJow4y9w/hnBmmWgLpWmlFQ2bpIy2eKrqowt3VeYcaHQ08otVXmC9V2JtYW1Z/RpvYR8A==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss@^6.0.1, postcss@^6.0.23:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"