Community https://github.com/b3log/solo/issues/12686

Community/css/base.scss

@@ -20,12 +20,12 @@
  * skin community style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 2.0.0.0, Feb 21, 2019
+ * @version 2.1.0.0, Mar 1, 2019
  */
-
 @import "../../../scss/reset-content";
 @import "../../../scss/reset";
 @import "vditor/src/assets/scss/classic";
+
 .left {
   float: left;
 }
@@ -47,6 +47,7 @@
 .none {
   display: none;
 }
+
 body {
   background-color: #EFEFEF;
   color: #555555;
@@ -66,6 +67,7 @@ a:active, a:visited {
 a:hover {
   text-decoration: underline;
 }
+
 img {
   max-width: 100%;
   vertical-align: middle;
@@ -75,6 +77,7 @@ img {
   overflow: hidden;
   font-size: 12px;
 }
+
 .content {
   width: 940px;
   margin: 0 auto;
@@ -289,7 +292,7 @@ a.header-title {
 .article-footer h3 {
   background: url("../images/indentline-light.png") repeat-x scroll left bottom transparent;
   font-size: 17px;
-    padding: 25px 0 10px;
+  padding: 10px 0;
 }
 
 .article-footer ul {
@@ -323,6 +326,7 @@ a.header-title {
   padding: 0 3px;
   text-decoration: none;
 }
+
 .pagination a.selected {
   font-weight: bold;
 }
@@ -357,6 +361,9 @@ a.header-title {
 .article-relative {
   margin-top: 20px;
   width: 360px;
+  li {
+    list-style: none;
+  }
 }
 
 .article-relative h4 {
@@ -374,6 +381,7 @@ a.header-title {
   padding-top: 30px;
   position: relative;
 }
+
 #comments > div {
   margin-top: 10px;
 }
@@ -455,7 +463,8 @@ a.header-title {
   padding: 10px 7px;
   background-color: #FFFFFF;
   font-family: Arial, Helvetica, sans-serif;
-    width: 723px;
+  width: 100%;
+  box-sizing: border-box;
   border: 1px solid #DDDDDD;
   font-size: 12px;
   height: 16px;
@@ -475,6 +484,7 @@ a.header-title {
 #commentValidate, #commentValidateReply {
   width: 240px;
 }
+
 /* footer secondary */
 .footer-secondary {
   background: url("../images/indentline-light.png") repeat-x scroll left top #DEDEDE;
@@ -501,12 +511,6 @@ a.header-title {
   word-wrap: break-word;
 }
 
-.most-view-count-articles a {
-    font: 18px 微软雅黑;
-    margin-right: 20px;
-    font-weight: bold;
-}
-
 .most-view-count-articles sup {
   font-size: 12px;
   color: #555555;
@@ -546,8 +550,8 @@ a.header-title {
 }
 
 .footer-block {
-    margin-right: 20px;
+  margin: 0 10px 20px 10px;
-    width: 220px;
+  width: 22%;
 }
 
 .footer-block h4 {
@@ -654,6 +658,7 @@ a.header-title {
   background-repeat: no-repeat;
   float: left;
 }
+
 .read-more-icon {
   background-position: 0 -22px;
   height: 12px;

Community/side.ftl

@@ -33,7 +33,7 @@
         <#if 0 != mostViewCountArticles?size>
         <h4>${mostViewCountArticlesLabel}</h4>
         <div class="arrow-right"></div>
-        <div class="most-view-count-articles">
+        <div class="most-view-count-articles article-footer">
             <ul>
                 <#list mostViewCountArticles as article>
                 <li>
@@ -44,6 +44,23 @@
                 </#list>
             </ul>
         </div>
+        <#if 0 != mostCommentArticles?size>
+        <div class="clear"></div>
+        <div class="hr"></div>
+        <h4>${mostCommentArticlesLabel}</h4>
+        <div class="arrow-right"></div>
+        <div class="most-view-count-articles article-footer">
+            <ul>
+                <#list mostCommentArticles as article>
+                    <li>
+                        <a rel="nofollow" title="${article.articleTitle}" href="${servePath}${article.articlePermalink}">
+                            <sup>[${article.articleCommentCount}]</sup>${article.articleTitle}
+                        </a>
+                    </li>
+                </#list>
+            </ul>
+        </div>
+        </#if>
         <div class="clear"></div>
         <#if 0 != recentComments?size>
         <div class="hr"></div>
@@ -72,22 +89,6 @@
 </div>
 <div class="footer-widgets">
     <div class="content">
-        <#if 0 != mostCommentArticles?size>
-        <div class="left footer-block">
-            <h4>${mostCommentArticlesLabel}</h4>
-            <ul>
-                <#list mostCommentArticles as article>
-                <li>
-                    <sup>[${article.articleCommentCount}]</sup>
-                    <a rel="nofollow" title="${article.articleTitle}" href="${servePath}${article.articlePermalink}">
-                        ${article.articleTitle}
-                    </a>
-                </li>
-                </#list>
-            </ul>
-        </div>
-        </#if>
-
         <#if 0 != mostUsedCategories?size>
             <div class="left footer-block">
                 <h4><span class="left">${categoryLabel}</span></h4>