💄 #12389 responsive

src/main/webapp/skins/Medium/css/base.css

@@ -1147,11 +1147,18 @@ blockquote {
     border: 1px solid rgba(0, 0, 0, 0.09);
     border-radius: 3px;
     padding: 10px;
-    margin: 0 0 20px;
+    margin: 0 0 5px;
     width: 100%;
     box-sizing: border-box;
 }
 
+.captcha {
+    height: 35px;
+    margin: -5px 0 0 7px;
+    border: 1px solid rgba(0, 0, 0, 0.04);
+    border-radius: 3px;
+}
+
 #submitCommentButton,
 #submitCommentButtonReply {
     background-color: #fff;
@@ -1280,3 +1287,71 @@ blockquote {
     border-bottom: 1px solid rgba(0,0,0,0.05);
     padding: 40px 0 35px
 }
+
+
+@media (max-width: 768px) {
+    .header {
+        text-align:left
+    }
+
+    .header__logo,
+    .post__side,.article__next,#articleBottomShare,#articleShare,
+    .article__comment .comment__avatar {
+        display: none
+    }
+
+    .post {
+        margin: 50px 20px 20px
+    }
+
+    .article__toolbar {
+        padding-left: 20px;
+        box-sizing: border-box
+    }
+
+    .article__item {
+        width: 100%;
+        margin-bottom: 20px
+    }
+
+    .article__wrap {
+        margin: 0
+    }
+
+    .article__comment {
+        width: 100%
+    }
+
+    .article__main {
+        height: auto !important
+    }
+
+    .footer .fn-right {
+        float: none
+    }
+
+    .footer__tag {
+        display: block
+    }
+
+    .footer__tag>div {
+        margin: 0 0 50px
+    }
+
+    .footer__tag>div:last-child {
+        margin: 0
+    }
+
+    .pagination__item {
+        margin: 0
+    }
+
+    .emotions span {
+        margin: 0;
+        transform: scale(0.7);
+    }
+
+    .article__comment .comment__body {
+        padding-left: 0;
+    }
+}

src/main/webapp/skins/Medium/macro-comments.ftl

@@ -12,17 +12,17 @@
                 <#if !isLoggedIn>
                 <tr>
                     <td>
-                        <input placeholder="${commentNameLabel}" type="text" class="normalInput" id="commentName"/>
+                        <input placeholder="${commentNameLabel}" type="text" class="comment__textarea" id="commentName"/>
                     </td>
                 </tr>
                 <tr>
                     <td>
-                        <input placeholder="${commentEmailLabel}" type="email" class="normalInput" id="commentEmail"/>
+                        <input placeholder="${commentEmailLabel}" type="email" class="comment__textarea" id="commentEmail"/>
                     </td>
                 </tr>
                 <tr>
                     <td>
-                        <input placeholder="${commentURLLabel}" type="url" id="commentURL"/>
+                        <input placeholder="${commentURLLabel}" type="url" class="comment__textarea" id="commentURL"/>
                     </td>
                 </tr>
                 </#if>
@@ -54,7 +54,7 @@
                 <#if !isLoggedIn>
                 <tr>
                     <td>
-                        <input style="width:50%" placeholder="${captchaLabel}" type="text" class="normalInput"
+                        <input style="width:50%" placeholder="${captchaLabel}" type="text" class="comment__textarea"
                                id="commentValidate"/>
                         <img class="captcha" id="captcha" alt="validate" src="${servePath}/captcha.do"/>
                     </td>

src/main/webapp/skins/Medium/page.ftl

@@ -19,15 +19,20 @@
 </#if>
     <div class="wrapper content">
         <article class="post">
-            <div class="content-reset">
+            <section class="content-reset">
             ${page.pageContent}
-            </div>
-        <@comments commentList=pageComments article=page></@comments>
+            </section>
+
         </article>
     </div>
-<#include "bottom.ftl">
 </div>
+<div class="article__bottom">
+<@comments commentList=pageComments article=page></@comments>
+</div>
+<div style="margin: 0 20px">
+<#include "bottom.ftl">
 <#include "footer.ftl">
+</div>
 <@comment_script oId=page.oId></@comment_script>
 </body>
 </html>