Initial grid layout

11 files changed, 347 insertions, 288 deletions

diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 81c371a4..648a016c 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -1,3 +1,32 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+@custom-media --viewport-mobile (width < 62.5rem);
+
+:root {
+    --main-width: 1000px;
+    --main-background-color: #fdfdfe;
+    --background-color: #f8f8f8;
+    --border-color: #eee;
+    --text-background-color: #fff;
+    --text-color: #222;
+    --link-color: #3c77aa;
+    --dimmed-link-color: #88958d;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --main-background-color: #222;
+        --background-color: #333;
+        --text-background-color: #383838;
+        --border-color: #4c4c4c;
+        --text-color: #ccc;
+        --link-color: #c38855;
+        --dimmed-link-color: #88958d;
+    }
+}
+
+* {
+    box-sizing: border-box;
+}
+
 /* #region generic */
 
 html,
@@ -19,10 +48,34 @@ textarea {
     overflow: auto;
 }
 html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    background: var(--main-background-color);
+    text-size-adjust: 100%;
+    word-wrap: break-word;
+    color: var(--text-color);
+    line-height: 1.4;
+    -webkit-overflow-scrolling: touch;
+}
+
+button,
 input,
 textarea {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    font-size: 12pt;
+    font-size: 1em;
+    background-color: var(--text-background-color);
+    color: var(--text-color);
+}
+
+html,
+input,
+textarea,
+button {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 h1,
 h2 {
@@ -32,7 +85,7 @@ ul {
     list-style-type: none;
 }
 a {
-    color: #069;
+    color: var(--link-color);
     text-decoration: none;
 }
 img,
@@ -40,7 +93,7 @@ hr {
     border: none;
 }
 hr {
-    background: #CCC;
+    background: var(--border-color);
     height: 1px;
     margin: 10px 0;
 }
@@ -67,49 +120,54 @@ pre::-moz-selection {
 
 /* #region overall layout */
 
-html {
-    background: #fdfdfe;
-    color: #222;
+#app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 #wrapper {
-    margin: 0 auto;
-    width: 1000px;
-    margin-top: 52px;
+    display: grid;
+    grid-template-areas: "content" "footer";
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
 }
 #column {
-    float: left;
-    margin-left: 10px;
-    overflow: hidden;
-    padding-top: 10px;
-    width: 240px;
+    grid-area: footer;
 }
 #content {
-    float: right;
-    margin: 12px 0 0 0;
-    width: 728px;
+    grid-area: content;
+    margin-top: 0;
+    overflow: auto;
+}
+.content--top {
+    margin-top: 64px !important;
 }
 #minimal_content {
     margin: 0 auto;
     min-width: 310px;
     width: auto;
 }
+.desktop {
+    display: none;
+}
 *::selection {
-    background: #006699;
-    color: #fff;
+    background: var(--link-color);
+    color: var(--main-background-color);
 }
-body > header {
-    background: #fff;
-    border-bottom: 1px solid #eee;
+#header {
+    background: var(--text-background-color);
+    border-bottom: 1px solid var(--border-color);
+    transition: transform 0.2s;
+    z-index: 10;
+    overflow-x: hidden;
     position: fixed;
-    top: 0;
     width: 100%;
-    z-index: 10;
-    transition-duration: 0.5s;
-    transition-property: transform;
+    top: 0;
 }
 #header_wrapper {
-    margin: 0 auto;
-    width: 1000px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -119,40 +177,11 @@ body > header {
     transform: translateY(-100%);
 }
 #footer {
-    background: #f8f8f8;
-    clear: both;
     color: #999;
     font-size: 10pt;
-    margin: 40px;
     padding: 10px 0;
-}
-
-@media screen and (max-width: 850px) {
-    body {
-        text-size-adjust: 100%;
-    }
-    body,
-    #wrapper,
-    #topwrapper,
-    #content,
-    #footer {
-        float: none;
-        margin: 0 auto;
-        min-width: 310px;
-        width: auto;
-    }
-    #wrapper {
-        margin-top: 50px;
-    }
-    body > header {
-        margin-bottom: 15px;
-    }
-    #column {
-        float: none;
-        margin: 0 10px;
-        padding-top: 0;
-        width: auto;
-    }
+    display: flex;
+    flex-direction: column;
 }
 
 /* #endregion */
@@ -178,8 +207,7 @@ body > header {
     display: flex;
 }
 #global a {
-    color: #88958d;
-    display: inline-block;
+    color: var(--dimmed-link-color);
     padding: 14px;
     border-bottom: 2px solid transparent;
 }
@@ -191,7 +219,7 @@ body > header {
     border-bottom: 2px solid transparent;
 }
 #header_wrapper a.active {
-    background: #f8f8f8;
+    background: var(--text-background-color);
     border-bottom: 2px solid #ff339a;
     pointer-events: none;
 }
@@ -202,8 +230,8 @@ body > header {
     cursor: pointer;
 }
 #search input {
-    background: #FFF;
-    border: 1px solid #ccc;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     outline: none !important;
     padding: 4px;
     -webkit-appearance: none;
@@ -216,11 +244,13 @@ body > header {
 
 .toolbar {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: space-around;
 }
 
+#global a,
 .toolbar a {
+    display: flex;
     padding: 14px;
     color: #88959d;
     align-items: center;
@@ -228,7 +258,7 @@ body > header {
     border-right: 2px solid transparent;
 }
 .toolbar > a:hover {
-    background-color: #f8f8f8;
+    background-color: var(--background-color);
     cursor: pointer;
     border-right: 2px solid #ff339a;
 }
@@ -243,22 +273,20 @@ body > header {
 }
 
 #column .tags {
-    background: #fff;
-    border: 1px solid #eee;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     padding: 6px;
     text-align: justify;
 }
 #column .inp {
-    background: #fff;
-    border: 1px solid #ddddd5;
+    background: var(--main-background-color);
+    border: 1px solid var(--border-color);
     outline: none !important;
     padding: 4px;
     width: 222px;
 }
 #column .tags h4 {
-    background: #eee;
-    border: 1px solid #eee;
     color: #88958d;
     display: block;
     text-align: center;
@@ -314,11 +342,12 @@ body > header {
 /* #region article, message internals */
 
 article {
-    background: #fff;
-    border: 1px solid #eee;
+    background: var(--text-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     margin-bottom: 10px;
     padding: 20px;
+    overflow: auto;
 }
 article time {
     color: #88958d;
@@ -336,7 +365,7 @@ article .ir img {
 }
 article > nav.l,
 .msg-cont > nav.l {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--border-color);
     display: flex;
     align-items: center;
     justify-content: space-around;
@@ -396,8 +425,8 @@ article .tags > a::before,
     max-width: 48px;
 }
 .msg-cont {
-    background: #FFF;
-    border: 1px solid #eee;
+    background: var(--text-background-color);
+    border: 1px solid var(--border-color);
     line-height: 140%;
     margin-bottom: 12px;
     padding: 20px;
@@ -463,17 +492,6 @@ article .tags > a::before,
 .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;
@@ -486,7 +504,7 @@ article .tags > a::before,
     margin: 0;
 }
 .title2 {
-    background: #fff;
+    background: var(--text-background-color);
     margin: 20px 0;
     padding: 10px 20px;
     width: 640px;
@@ -500,73 +518,6 @@ article .tags > a::before,
     margin: 0;
 }
 
-@media screen and (max-width: 850px) {
-    #header_wrapper {
-        width: auto;
-    }
-    #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) {
-    #search {
-        display: none;
-    }
-    .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;
-    }
-    .icon-title {
-        display: none;
-    }
-}
-
 /* #endregion */
 
 /* #region user-generated texts */
@@ -687,7 +638,7 @@ blockquote {
 /* #region popup dialog (lightbox) */
 
 #dialogb {
-    background: #222;
+    background: var(--text-color);
     height: 100%;
     left: 0;
     opacity: 0.6;
@@ -741,7 +692,7 @@ blockquote {
     padding-right: 6px;
 }
 .dialoglogin {
-    background: #fff;
+    background: var(--text-background-color);
     padding: 25px;
     width: 300px;
 }
@@ -765,24 +716,24 @@ blockquote {
 }
 .signinput,
 .signsubmit {
-    border: 1px solid #CCC;
+    border: 1px solid var(--border-color);
     margin: 3px 0;
     padding: 3px;
 }
 .signinput {
-    width: 292px;
+    width: 100%;
 }
 .signsubmit {
     width: 70px;
 }
 .dialogshare {
-    background: #fff;
+    background: var(--text-background-color);
     min-width: 300px;
     overflow: auto;
     padding: 20px;
 }
 .dialogl {
-    background: #fff;
+    background: var(--text-background-color);
     border: 1px solid #DDD;
     margin: 3px 0 20px;
     padding: 5px;
@@ -795,7 +746,7 @@ blockquote {
     display: block;
 }
 .dialogtxt {
-    background: #fff;
+    background: var(--text-background-color);
     padding: 20px;
 }
 
@@ -842,37 +793,17 @@ blockquote {
 
 /* #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;
-    }
-    #footer div {
-        float: none;
-        margin: 10px 0;
-    }
-}
 
 /* #endregion */
 
 /* #region settings */
 
 fieldset {
-    border: 1px dotted #ccc;
+    border: 1px dotted var(--border-color);
     margin-top: 25px;
 }
 
@@ -937,3 +868,102 @@ article.nsfw .ir img:hover {
 }
 
 /* #endregion */
+
+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;
+    background: #EEE;
+    border: 1px solid #CCC;
+    color: #999;
+    position: sticky;
+    top: 70px;
+    vertical-align: top;
+    width: 50px;
+}
+
+@media (--viewport-mobile) {
+    #content {
+        margin-bottom: 12px;
+    }
+    #sidebar {
+        background: var(--text-background-color);
+    }
+}
+
+@media (--viewport-desktop) {
+    #app {
+        overflow: initial;
+    }
+    #wrapper {
+        grid-template-areas: ". footer content .";
+        grid-template-columns: auto 240px 760px auto;
+        overflow: initial;
+    }
+    #header_wrapper,
+    .footer_container {
+        margin: 0 auto;
+        width: var(--main-width);
+    }
+    .desktop {
+        display: block;
+    }
+    .mobile {
+        display: none;
+    }
+    #content {
+        margin-bottom: 12px;
+        overflow: initial;
+    }
+    .toolbar {
+        flex-direction: column;
+        justify-content: initial;
+        border-top: initial;
+        margin-top: 64px;
+    }
+    .toolbar a,
+    .l a {
+        border-right: 2px solid transparent;
+    }
+    #sidebar > a:hover {
+        border-top: initial;
+        border-right: 2px solid #ff339a;
+    }
+}
+::-webkit-scrollbar {
+    width: 12px;
+} /* 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;
+}
diff --git a/src/main/resources/help b/src/main/resources/help
-Subproject ce103cd9a2a8a200c6ebb3b41525e7c8f639d98
+Subproject eb9734e24867c70a9cf7309786ebc1db058bea3
diff --git a/src/main/resources/templates/layouts/default.html b/src/main/resources/templates/layouts/default.html
index 575e7707..5974e19b 100644
--- a/src/main/resources/templates/layouts/default.html
+++ b/src/main/resources/templates/layouts/default.html
@@ -1,49 +1,52 @@
 <!DOCTYPE html>
 <html prefix="og: http://ogp.me/ns#">
+
 <head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <script type="text/javascript" src="{{ beans.webApp.scriptsUrl }}"></script>
-    <link rel="stylesheet" type="text/css" href="{{ beans.webApp.styleUrl }}"/>
+    <link rel="stylesheet" type="text/css" href="{{ beans.webApp.styleUrl }}" />
     {% block headers %}
     {{ headers | default('') | raw }}
     {% endblock %}
     <title>{{ title | default('Juick') }}</title>
     <meta property="og:type" content="{{ ogtype | default('website') }}" />
     <meta property="fb:app_id" content="130568668304" />
-    <meta name="viewport" content="width=device-width,initial-scale=1"/>
-    <meta name="msapplication-config" content="//i.juick.com/browserconfig.xml"/>
-    <meta name="msapplication-TileColor" content="#ffffff"/>
-    <meta name="msapplication-TileImage" content="//i.juick.com/ms-icon-144x144.png"/>
-    <meta name="theme-color" content="#ffffff"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="msapplication-config" content="//i.juick.com/browserconfig.xml" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-TileImage" content="//i.juick.com/ms-icon-144x144.png" />
+    <meta name="theme-color" content="#ffffff" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <link rel="apple-touch-icon" sizes="57x57" href="//i.juick.com/apple-icon-57x57.png"/>
-    <link rel="apple-touch-icon" sizes="60x60" href="//i.juick.com/apple-icon-60x60.png"/>
-    <link rel="apple-touch-icon" sizes="72x72" href="//i.juick.com/apple-icon-72x72.png"/>
-    <link rel="apple-touch-icon" sizes="76x76" href="//i.juick.com/apple-icon-76x76.png"/>
-    <link rel="apple-touch-icon" sizes="114x114" href="//i.juick.com/apple-icon-114x114.png"/>
-    <link rel="apple-touch-icon" sizes="120x120" href="//i.juick.com/apple-icon-120x120.png"/>
-    <link rel="apple-touch-icon" sizes="144x144" href="//i.juick.com/apple-icon-144x144.png"/>
-    <link rel="apple-touch-icon" sizes="152x152" href="//i.juick.com/apple-icon-152x152.png"/>
-    <link rel="apple-touch-icon" sizes="180x180" href="//i.juick.com/apple-icon-180x180.png"/>
-    <link rel="icon" type="image/png" sizes="32x32" href="//i.juick.com/favicon-32x32.png"/>
-    <link rel="icon" type="image/png" sizes="96x96" href="//i.juick.com/favicon-96x96.png"/>
-    <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png"/>
-    <link rel="manifest" href="//i.juick.com/manifest.json"/>
+    <link rel="apple-touch-icon" sizes="57x57" href="//i.juick.com/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="//i.juick.com/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="//i.juick.com/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="//i.juick.com/apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="//i.juick.com/apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="//i.juick.com/apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="//i.juick.com/apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="//i.juick.com/apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="//i.juick.com/apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="//i.juick.com/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="//i.juick.com/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png" />
+    <link rel="manifest" href="//i.juick.com/manifest.json" />
 </head>
-<body id="body" {% if visitor.uid > 0 %}data-hash="{{visitor.authHash}}"{% endif %}>
-{% include "views/partial/navigation" %}
-<div id="wrapper">
-    <section id="content"
-             {% if msg | default('') is not empty %}data-mid="{{ msg.mid }}"{% endif %}>
-    {% block content %}
-    {% endblock %}
-    </section>
-    <aside id="column">
-        {% block column %}
-        {% endblock %}
-    </aside>
-</div>
-{% include "views/partial/footer" %}
+
+<body id="body" {% if visitor.uid > 0 %}data-hash="{{visitor.authHash}}" {% endif %}>
+    <div id="app">
+        {% include "views/partial/navigation" %}
+        <div id="wrapper">
+            <section id="content" {% if msg | default('') is not empty %}data-mid="{{ msg.mid }}" {% endif %} class="content--top">
+                {% block content %}
+                {% endblock %}
+            </section>
+            <aside id="column">
+                {% block column %}
+                {% endblock %}
+            </aside>
+        </div>
+    </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/src/main/resources/templates/views/help.html b/src/main/resources/templates/views/help.html
index 3a022497..169ccb3f 100644
--- a/src/main/resources/templates/views/help.html
+++ b/src/main/resources/templates/views/help.html
@@ -6,5 +6,7 @@
 {% endblock %}
 
 {% block "column" %}
+<div class="toolbar">
 {{ navigation | raw }}
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/main/resources/templates/views/partial/footer.html b/src/main/resources/templates/views/partial/footer.html
index 785514bf..671b9b6a 100644
--- a/src/main/resources/templates/views/partial/footer.html
+++ b/src/main/resources/templates/views/partial/footer.html
@@ -1,16 +1,16 @@
 <div id="footer">
-    <div id="footer-right">         &middot;
-        <a href="/help/contacts" rel="nofollow">{{ i18n("messages","link.contacts") }}</a> &middot;
-        <a href="/help/tos" rel="nofollow">{{ i18n("messages","link.tos") }}</a>
-    </div>
+    <div id="footer-left">juick.com &copy; 2008-2020
+        {% if links | default ('')  is not empty %}
+        <br/>{{ i18n("messages","label.sponsors") }}: {{ links | raw }}
+        {% endif %}
+    </div>    
     <div id="footer-social">
         <a href="https://twitter.com/Juick" rel="nofollow"><i data-icon="ei-sc-twitter" data-size="m"></i></a>
         <a href="https://vk.com/juick" rel="nofollow"><i data-icon="ei-sc-vk" data-size="m"></i></a>
         <a href="https://www.facebook.com/JuickCom" rel="nofollow"><i data-icon="ei-sc-facebook" data-size="m"></i></a>
     </div>
-    <div id="footer-left">juick.com &copy; 2008-2020
-        {% if links | default ('')  is not empty %}
-        <br/>{{ i18n("messages","label.sponsors") }}: {{ links | raw }}
-        {% endif %}
+    <div id="footer-right">         &middot;
+        <a href="/help/contacts" rel="nofollow">{{ i18n("messages","link.contacts") }}</a> &middot;
+        <a href="/help/tos" rel="nofollow">{{ i18n("messages","link.tos") }}</a>
     </div>
 </div>
diff --git a/src/main/resources/templates/views/partial/homecolumn.html b/src/main/resources/templates/views/partial/homecolumn.html
index 5b13dd66..6f92f8ba 100644
--- a/src/main/resources/templates/views/partial/homecolumn.html
+++ b/src/main/resources/templates/views/partial/homecolumn.html
@@ -1,15 +1,18 @@
 <div class="toolbar">
     <a href="/?show=top" title="Top">
-        <i data-icon="ei-heart" data-size="s"></i>Top
+        <i data-icon="ei-heart" data-size="s"></i>
+        <span class="desktop">Top</span>
     </a>
     <a href="/?show=all" title="{{ i18n("messages", "link.allMessages") }}">
-    <i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}
+    <i data-icon="ei-search" data-size="s"></i>
+        <span class="desktop">{{ i18n("messages","link.allMessages") }}</span>
     </a>
     <a href="/?show=photos" title="{{ i18n("messages", "link.withPhotos") }}">
-    <i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages", "link.withPhotos") }}
+    <i data-icon="ei-camera" data-size="s"></i>
+        <span class="desktop">{{ i18n("messages", "link.withPhotos") }}</span>
     </a>
 </div>
-<div class="tags">
+<div class="tags desktop">
     <h4>{{ i18n("messages","link.trends") }}</h4>
     {% include "views/partial/tags" %}
     {% if showAdv | default(false) %}
@@ -18,4 +21,7 @@
         <img src="https://ru.jooble.org/css/images/logos/jooble_80x30.png" alt="Работа в России"/>
     </a>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
+<span class="desktop">
+    {% include "views/partial/footer" %}
+</span>
\ No newline at end of file
diff --git a/src/main/resources/templates/views/partial/navigation.html b/src/main/resources/templates/views/partial/navigation.html
index a3621bef..f3d43641 100644
--- a/src/main/resources/templates/views/partial/navigation.html
+++ b/src/main/resources/templates/views/partial/navigation.html
@@ -1,4 +1,4 @@
-<header>
+<div id="header">
     <div id="header_wrapper">
         {% if visitor.uid > 0 %}
         <div id="ctitle">
@@ -12,7 +12,7 @@
         {% else %}
         <div id="logo"><a href="/{% if visitor.uid > 0 %}?show=my{% endif %}">Juick</a></div>
         {% endif %}
-        <div id="search">
+        <div id="search" class="desktop">
             <form action="/">
                 <input name="search" class="text"
                        placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
@@ -21,23 +21,23 @@
         <nav id="global">
             <a href="/">
                 <i data-icon="ei-bell" data-size="s"></i>
-                <span class="icon-title">{{ i18n("messages","link.discuss") }}</span>{% if visitor.unreadCount > 0 %}<span class="badge">{{ visitor.unreadCount }}</span>{% endif %}
+                <span class="icon-title desktop">{{ i18n("messages","link.discuss") }}</span>{% if visitor.unreadCount > 0 %}<span class="badge">{{ visitor.unreadCount }}</span>{% endif %}
             </a>
             <a href="/?show=all" rel="nofollow">
                 <i data-icon="ei-search" data-size="s"></i>
-                <span class="icon-title">{{ i18n("messages","link.allMessages") }}</span>
+                <span class="icon-title desktop">{{ i18n("messages","link.allMessages") }}</span>
             </a>
                 {% if visitor.uid > 0 %}
             <a id="post" href="/post">
                 <i data-icon="ei-pencil" data-size="s"></i>
-                <span class="icon-title">{{ i18n("messages","link.postMessage") }}</span>
+                <span class="icon-title desktop">{{ i18n("messages","link.postMessage") }}</span>
             </a>
             {% else %}
             <a class="a-login" href="/login" rel="nofollow">
                 <i data-icon="ei-user" data-size="s"></i>
-                <span class="icon-title">{{ i18n("messages", "link.Login") }}</span>
+                <span class="icon-title desktop">{{ i18n("messages", "link.Login") }}</span>
             </a>
             {% endif %}
         </nav>
     </div>
-</header>
+</div>
diff --git a/src/main/resources/templates/views/partial/settings_tabs.html b/src/main/resources/templates/views/partial/settings_tabs.html
index 60337d92..00f7068a 100644
--- a/src/main/resources/templates/views/partial/settings_tabs.html
+++ b/src/main/resources/templates/views/partial/settings_tabs.html
@@ -5,4 +5,7 @@
         <a href="/settings?page=about">{{ i18n("messages","link.settings.about") }}</a>
         <a href="/logout"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.logout") }}</a>
     </div>
-</div>
\ No newline at end of file
+</div>
+<span class="desktop">
+    {% include "views/partial/footer" %}
+</span>
\ No newline at end of file
diff --git a/src/main/resources/templates/views/partial/tagcolumn.html b/src/main/resources/templates/views/partial/tagcolumn.html
index c411c3c4..4d8ad160 100644
--- a/src/main/resources/templates/views/partial/tagcolumn.html
+++ b/src/main/resources/templates/views/partial/tagcolumn.html
@@ -23,3 +23,6 @@
     {% endif %}
 </div>
 {% endif %}
+<span class="desktop">
+    {% include "views/partial/footer" %}
+</span>
\ No newline at end of file
diff --git a/src/main/resources/templates/views/partial/usercolumn.html b/src/main/resources/templates/views/partial/usercolumn.html
index 5d1aaff6..4beefd8a 100644
--- a/src/main/resources/templates/views/partial/usercolumn.html
+++ b/src/main/resources/templates/views/partial/usercolumn.html
@@ -1,60 +1,69 @@
-{% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %}
-<div id="ctitle">
-    <a href="/{{ user.name }}">
-        <img src="{{ user.avatar }}" alt=""/>{{ user.name }}
-    </a>
-</div>
 <div class="toolbar">
-    {% if isSubscribed %}
-    <a href="/post?body=U+%40{{ user.name }}" title="Подписан">
-        <i data-icon="ei-check" data-size="s"></i>Subscribed
-    </a>
-    {% else %}
-    <a href="/post?body=S+%40{{ user.name }}" title="Подписаться">
-        <i data-icon="ei-plus" data-size="s"></i>Subscribe
-    </a>
+    {% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %}
+    <div id="ctitle">
+        <a href="/{{ user.name }}">
+            <img src="{{ user.avatar }}" alt="" />{{ user.name }}
+        </a>
+    </div>
+    <div class="toolbar">
+        {% if isSubscribed %}
+        <a href="/post?body=U+%40{{ user.name }}" title="Подписан">
+            <i data-icon="ei-check" data-size="s"></i>Subscribed
+        </a>
+        {% else %}
+        <a href="/post?body=S+%40{{ user.name }}" title="Подписаться">
+            <i data-icon="ei-plus" data-size="s"></i>Subscribe
+        </a>
+        {% endif %}
+        {% if isInBL %}
+        <a href="/post?body=BL+%40{{ user.name }}" title="Разблокировать">
+            <i data-icon="ei-close-o" data-size="s"></i>Unblock
+        </a>
+        {% else %}
+        <a href="/post?body=BL+%40{{ user.name }}" title="Заблокировать">
+            <i data-icon="ei-close" data-size="s"></i>Block
+        </a>
+        {% endif %}
+        {% if not isInBLAny %}
+        <a href="/pm/sent?uname={{ user.name }}" title="Написать приватное сообщение">
+            <i data-icon="ei-envelope" data-size="s"></i>PM
+        </a>
+        {% endif %}
+    </div>
     {% endif %}
-    {% if isInBL %}
-    <a href="/post?body=BL+%40{{ user.name }}" title="Разблокировать">
-        <i data-icon="ei-close-o" data-size="s"></i>Unblock
+    {% if visitor is not empty and visitor.uid == user.uid %}
+    <a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>
+        <span class="desktop">{{ i18n("messages","link.my") }}</span>
     </a>
-    {% else %}
-    <a href="/post?body=BL+%40{{ user.name }}" title="Заблокировать">
-        <i data-icon="ei-close" data-size="s"></i>Block
+    <a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>
+        <span class="desktop">{{ i18n("messages","link.privateMessages") }}</span>
     </a>
-    {% endif %}
-    {% if not isInBLAny %}
-    <a href="/pm/sent?uname={{ user.name }}" title="Написать приватное сообщение">
-        <i data-icon="ei-envelope" data-size="s"></i>PM
+    <a href="/?show=discuss"><i data-icon="ei-bell" data-size="s"></i>
+        <span class="desktop">{{ i18n("messages","link.discuss") }}</span>
     </a>
     {% endif %}
-</div>
-{% endif %}
-<div class="toolbar">
-    {% if visitor is not empty and visitor.uid == user.uid %}
-    <a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a>
-    <a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a>
-    <a href="/?show=discuss"><i data-icon="ei-bell" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a>
-    {% endif %}
     {% if visitor is not empty and visitor.uid == user.uid and false %}
     <a href="/?show=mycomments" rel="nofollow">{{ i18n("messages","blog.comments") }}</a>
     <a href="/?show=unanswered" rel="nofollow">Неотвеченные</a>
     {% endif %}
     {% if visitor is not empty and visitor.uid == user.uid %}
 
-        <a href="/settings" rel="nofollow">
-            <i data-icon="ei-gear" data-size="s"></i>{{ i18n("messages","link.settings") }}
-            {% if not visitor.verified %}
-            <span style="color:red;"><i data-icon="ei-exclamation" data-size="s"></i></span>
-            {% endif %}
-        </a>
+    <a href="/settings" rel="nofollow">
+        <i data-icon="ei-gear" data-size="s"></i>
+        <span class="desktop">{{ i18n("messages","link.settings") }}</span>
+        {% if not visitor.verified %}
+        <span style="color:red;"><i data-icon="ei-exclamation" data-size="s"></i></span>
+        {% endif %}
+    </a>
     {% endif %}
 </div>
-<form action="/{{ user.name }}/">
-    <p><input type="text" name="search" class="inp" placeholder="{{ i18n('messages','label.search') }}"/></p>
+<form action="/{{ user.name }}/" class="desktop" style="padding: 6px;">
+    <p><input type="text" name="search" class="inp" placeholder="{{ i18n('messages','label.search') }}" /></p>
 </form>
-{% include "views/partial/usertags" %}
-<div id="ustats">
+<span class="desktop" style="padding: 6px;">
+    {% include "views/partial/usertags" %}
+</span>
+<div id="ustats" class="desktop" style="padding: 6px;">
     <ul>
         <li><a href="/{{ user.name }}/friends">{{ i18n("messages","blog.iread") }}: {{ statsIRead }}</a></li>
         <li><a href="/{{ user.name }}/readers">{{ i18n("messages","blog.readers") }}: {{ statsMyReaders }}</a></li>
@@ -68,12 +77,15 @@
     <div class="iread">
         {% for u in iread %}
         <span>
-                <a href="/{{ u.name }}/">
-                    <img src="//i.juick.com/as/{{ u.uid }}.png" alt="{{ u.name }}"/>
-                </a>
-            </span>
+            <a href="/{{ u.name }}/">
+                <img src="//i.juick.com/as/{{ u.uid }}.png" alt="{{ u.name }}" />
+            </a>
+        </span>
         {% endfor %}
     </div>
     {% endif %}
 
 </div>
+<span class="desktop">
+    {% include "views/partial/footer" %}
+</span>
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 5ecc5eb5..f20b9ff0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -48,7 +48,7 @@ module.exports = (env, argv) => {
                             loader: 'postcss-loader', options: {
                                 plugins: () => [
                                     require('stylelint')(),
-                                    require('postcss-preset-env')()
+                                    require('postcss-preset-env')({ stage: 0, autoprefixer: { grid: true } })
                                 ]
                             }
                         }