👄 side

skins/5styles/css/base.scss

@@ -18,6 +18,11 @@
 @charset "utf-8";
 @import "../../../scss/reset";
 @import "vditor/src/assets/scss/classic";
+
+.fn__flex {
+  display: flex;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -26,47 +31,60 @@ body {
   color: #585858;
   background: #545454;
 }
+
 h1, h2, h3 {
   margin-top: 0px;
 }
+
 h1 {
   font-size: 2.4em;
 }
+
 h2 {
   font-size: 1.6em;
 }
+
 h3 {
   font-size: 1.4em;
 }
-p,ol,ul {
+
+ol, ul {
   margin: 0 0 10px 20px;
   line-height: 20px;
 }
+
 img {
   border: none;
 }
+
 a {
   color: #27789b;
   text-decoration: none;
   line-height: 22px;
 }
+
 a:hover {
   color: #442494;
 }
+
 .center {
   text-align: center;
 }
+
 .clear {
   clear: both;
   font-size: 0px;
   height: 0px;
 }
+
 #main {
   width: 100%;
 }
+
 #wrap {
   background-color: #f8f8f8;
 }
+
 /**/
 #top {
   background-image: linear-gradient(top, #FFFFFF, #E5E5E5);
@@ -79,6 +97,7 @@ a:hover {
   height: 26px;
   line-height: 26px;
 }
+
 #top a:hover, #top a.hover {
   background-color: #EEF2FA;
   border-left-color: #707070;
@@ -86,6 +105,7 @@ a:hover {
   margin: 0px;
   line-height: 26px;
 }
+
 #top a, #top span span {
   border-right: 1px solid #D9D9D9;
   color: #4C4C4C;
@@ -97,53 +117,69 @@ a:hover {
   text-shadow: 0 -1px 0 white;
   font-weight: normal;
 }
+
 .right {
   float: right;
 }
+
 .left {
   float: left;
 }
+
 .article-relative {
   line-height: 22px;
   margin-top: 24px;
 }
+
 .article-relative h4 {
   font-size: 12px;
 }
+
 .article-relative ul {
   margin: 0 0 10px 10px;
 }
+
 .article-relative li {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 #pagenavi {
   padding: 20px 0 10px;
 }
+
 #pagenavi span {
-	font-weight:bold}
+  font-weight: bold
+}
+
 #pagenavi span, #pagenavi a {
   margin: 0 4px;
   padding: 2px 7px;
   border: 1px solid #666;
   border-radius: 3px;
 }
+
 #pagenavi a:hover {
   background: #666;
   color: #f0f0f0;
 }
+
 #pagenavi em {
-	display:none}
+  display: none
+}
+
 .breakline {
   word-break: break-all;
   word-wrap: break-word;
 }
+
 .shortline {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
 #header {
   margin: 0;
   padding: 0;
@@ -151,32 +187,38 @@ a:hover {
   background: url(../images/header-bg.gif) repeat-x;
   text-decoration: none;
 }
+
 #header-left {
   float: left;
   margin: 0px;
   padding: 0px;
 }
+
 #header h1 {
   float: left;
   margin: 0;
   padding: 21px 0 20px 20px;
   font-size: 24px;
 }
+
 #header h1 a {
   color: #72d4ff;
   text-decoration: none;
 }
+
 .description {
   float: left;
   margin: 33px 0 0 10px;
   padding: 0px;
   color: #e0e0e0;
 }
+
 #header-right {
   float: right;
   margin: 0px;
   padding: 0;
 }
+
 .layout {
   margin: 0px 10px 0 auto;
   padding: 2px 0 0 54px;
@@ -184,6 +226,7 @@ a:hover {
   height: 19px;
   background: url(../images/style.gif) no-repeat 0px 0px;
 }
+
 .layout span {
   width: 10px;
   height: 10px;
@@ -191,34 +234,43 @@ a:hover {
   margin: 3px 2px 0 2px;
   cursor: pointer;
 }
+
 .themes1, .themes2, .themes3, .themes4, .themes5, .post .post-tltle a:hover, .post-comments, .post-date, .post-views, .post-cat, .post-author, .post-tag, #to-top, #footer-right a:hover, .navigation-top span, #sidebar ul li ul li, #sidebar ul li ul li:hover, #sidebar .comms li span, #sidebar .comms li span:hover {
   background-image: url(../images/icons.gif);
   background-repeat: no-repeat;
 }
+
 #sidebar ul li, .navigation-top, .postmetadata {
   background-image: url(../images/line.gif);
   background-repeat: repeat-x;
 }
+
 .themes5 {
   background-position: -7px -7px;
 }
+
 .themes4 {
   background-position: -7px -31px;
 }
+
 .themes3 {
   background-position: -7px -55px;
 }
+
 .themes2 {
   background-position: -7px -79px;
 }
+
 .themes1 {
   background-position: -7px -103px;
 }
+
 #header-navi {
   float: right;
   margin: 14px 0 0 0;
   padding: 0px;
 }
+
 #header-navi li {
   margin: 0 5px;
   padding: 0;
@@ -226,27 +278,34 @@ a:hover {
   line-height: 24px;
   height: 24px;
 }
+
 #header-navi li a {
   color: #d8d8d8;
 }
+
 #header-navi li.selected a, #header li a:hover {
   color: #f2f2f2;
   background: url(../images/menu-li.gif) no-repeat bottom center;
   padding: 0px 0 4px 0;
 }
+
 .navigation-top {
   margin: 2px 0 0 0;
   line-height: 30px;
   background-position: bottom;
 }
+
 .navigation-top span {
   margin: 0 0 0 15px;
   padding: 0 0 0 20px;
-	background-position:-7px -322px}
+  background-position: -7px -322px
+}
+
 .post {
   margin: 5px 20px 15px 20px;
   padding: 0 0px 0 0;
 }
+
 .post .post-tltle {
   margin: 10px 0 0 0;
   padding: 2px 0;
@@ -254,51 +313,61 @@ a:hover {
   font-size: 1.6em;
   line-height: 36px;
 }
+
 .post .post-tltle a:hover {
   background-position: right -291px;
   padding: 0 43px 0 0px;
 }
+
 .postmetadata-top {
   margin: 0;
   padding: 0;
   line-height: 22px;
   font-size: 11px;
 }
+
 .post-comments {
   background-position: -7px -199px;
   padding: 0 0 0 13px;
   margin: 0 0 0 10px;
 }
+
 .post-date {
   background-position: -7px -222px;
   padding: 0 0 0 13px;
 }
+
 .post-views {
   margin: 0 0 0 10px;
   background-position: -7px -246px;
   padding: 0 0 0 13px;
 }
+
 .postmetadata {
   margin: 0px;
   padding: 0 0 4px 0;
   line-height: 24px;
   background-position: bottom;
 }
+
 .post-cat {
   margin: 0 10px 0 0;
   background-position: -7px -152px;
   padding: 0 0 0 13px;
 }
+
 .post-author {
   margin: 0 0 0 10px;
   background-position: -7px -269px;
   padding: 0 0 0 13px;
 }
+
 .post-tag {
   margin: 0 10px 0 0;
   background-position: -7px -125px;
   padding: 0 0 0 13px;
 }
+
 .vditor-reset {
   margin: 8px 0;
   padding: 0px;
@@ -307,20 +376,24 @@ a:hover {
   overflow: hidden;
   font-size: 12px;
 }
+
 .navigation {
   margin: 5px 15px 5px 15px;
   text-align: center;
   display: block;
 }
+
 #sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
+
 #sidebar ul li {
   padding: 5px 5px 5px 5px;
   background-position: bottom;
 }
+
 #sidebar ul li h3 {
   margin: 0px;
   padding: 0;
@@ -329,68 +402,94 @@ a:hover {
   color: #2cacda;
   line-height: 28px;
 }
+
 #sidebar ul li ul {
   margin: 0px;
   padding: 0;
 }
+
 #sidebar .slist li {
   margin: 0px 0;
   padding: 0 0 0 0px;
   line-height: 22px;
   background-position: -7px -387px;
 }
+
 #sidebar .slist li:hover {
   background-position: -7px -411px;
 }
+
 #sidebar ul li ul li a {
   padding: 0 0 0 15px;
   color: #666666;
 }
+
 #sidebar ul li ul li a:hover {
   color: #a165f1;
 }
+
 #sidebar .side-cat li {
   float: left;
   width: 50%;
 }
+
 #sidebar .side-cat {
   display: block;
 }
+
 #sidebar .side-cat span {
   float: left;
   line-height: 24px;
   white-space: nowrap;
   padding: 0 5px;
 }
+
 #sidebar .side-cat span:hover, #sidebar .side-cat span a:hover {
   background: #72d4ff;
   color: #fff;
 }
+
 #sidebar .comms li {
   background: none;
   padding: 0 0;
 }
+
 #sidebar .comms li:hover {
   background: none;
 }
-#sidebar .arrow a {
+
-	padding:0 0;
+#sidebar .fn__flex {
+  margin-bottom: 5px;
+  p {
+    margin: 0;
   }
+
+  a {
+    padding: 0px 0 0 5px;
+  }
+}
+
 #sidebar .arrow {
   padding: 0 0 0 13px;
   background-position: -7px -393px;
+  height: 13px;
+  margin-top: 4px;
 }
+
 #sidebar .arrow:hover {
   background-position: -7px -417px;
   color: #85bf73;
 }
+
 #sidebar #searchform {
   text-align: left;
 }
+
 #searchform {
   margin: 10px 0 0 0;
   padding: 0;
 }
+
 #searchform #s {
   margin: 0;
   padding: 1px 0 0 2px;
@@ -399,14 +498,16 @@ background: white;
   border: 1px solid #CBD8E5;
   line-height: 16px;
 }
+
 #searchsubmit {
   margin: 0;
-padding: 2px 0 0 0;
+  padding: 0;
   width: 54px;
   height: 18px;
   border: none;
   cursor: hand;
 }
+
 #footer {
   clear: both;
   margin: 0;
@@ -414,6 +515,7 @@ cursor: hand;
   background: url(../images/foot-bg.gif) repeat-x;
   height: 70px;
 }
+
 #footer-no {
   float: left;
   margin: 0;
@@ -422,28 +524,34 @@ cursor: hand;
   height: 70px;
   width: 73px;
 }
+
 #footer-link {
   float: left;
   margin: 20px 0 0 20px;
   color: #d8d8d8;
   display: inline;
 }
+
 #footer-link p {
   margin: 0px;
   padding: 0px;
   line-height: 18px;
 }
+
 #footer-link a {
   color: #85bf73;
   font: Arial, Helvetica, sans-serif;
 }
+
 #footer-link a:hover {
   color: #FFFF99;
 }
+
 #footer-right a {
   width: 31px;
   height: 52px;
 }
+
 #to-top {
   margin: 10px 30px 0 0;
   float: right;
@@ -451,13 +559,16 @@ cursor: hand;
   height: 52px;
   background-position: -8px -480px;
 }
+
 #footer-right a {
   width: 31px;
   height: 52px;
 }
+
 #footer-right a:hover {
   background-position: -8px -529px;
 }
+
 .comments {
   border-bottom: 1px solid #CCCCCC;
   border-top: 1px solid #CCCCCC;
@@ -465,12 +576,14 @@ cursor: hand;
   padding: 0 15px 15px;
   position: relative;
 }
+
 .comment-title {
   background-color: #E3E9FF;
   border-top: 1px solid #3366CC;
   padding: 3px 12px 3px 12px;
   position: relative;
 }
+
 .comment-body-ref {
   background-color: #FFFFFF;
   filter: alpha(opacity=90);
@@ -481,35 +594,42 @@ cursor: hand;
   width: 520px;
   z-index: 10;
 }
+
 .comment-body {
   margin-top: 15px;
 }
+
 .comment-author {
   float: left;
   text-align: center;
   width: 81px;
 }
+
 .comment-author div {
   background: url("../images/commentpoint.png") no-repeat scroll 100% 33% transparent;
   margin-top: 10px;
   padding-right: 14px;
 }
+
 .comment-author img {
   border: 1px solid #999999;
   height: 32px;
   padding: 1px;
   width: 32px;
 }
+
 .comment-author a {
   font-weight: bold;
   margin-right: 14px;
 }
+
 .comment-info {
   background: url("../images/comment.gif") no-repeat scroll 0 0 #EDEFF0;
   font-size: 12px;
   padding: 10px 15px 0;
   width: 75%;
 }
+
 .comment-content {
   background: url("../images/comment.gif") no-repeat scroll 100% 100% transparent;
   font-size: 12px;
@@ -519,14 +639,17 @@ cursor: hand;
   padding: 9px 15px 10px;
   word-wrap: break-word;
 }
+
 .comment-form {
   margin: 15px 0px;
   padding: 0 35px 15px;
   position: relative;
 }
+
 .comment-form img {
   cursor: pointer;
 }
+
 .comment-form input, .comment-form textarea {
   background: url("../images/textfield.gif") repeat-x scroll 50% 0 #FFFFFF;
   border: 1px solid #A6A6A6;
@@ -537,11 +660,13 @@ cursor: hand;
   padding: 2px 1px;
   width: 200px;
 }
+
 .comment-form textarea {
   font-size: 12px;
   height: auto;
   width: 100%;
 }
+
 .comment-form button {
   background: none repeat scroll 0 0 #B4D666;
   border-color: #B4D666 #81B840 #81B840 #B4D666;
@@ -555,15 +680,18 @@ cursor: hand;
   padding: 0px 6px;
   background-color: #ffffff;
 }
+
 .comment-form button:hover {
   background: none repeat scroll 0 0 #98C64C;
   border-color: #76B33A #98C64C #98C64C #76B33A;
   color: #074A7E;
 }
+
 .em-span {
   line-height: 24px;
   float: left;
 }
+
 .em-br {
   line-height: 24px;
 }

skins/5styles/side.ftl

@@ -66,12 +66,12 @@
 						<h3>${recentCommentsLabel}</h3>
 						<ul class="comms breakline">
 							<#list recentComments as comment>
-							<li>
+							<li class="fn__flex">
 								<span class="arrow">
+								</span>
 								<a  rel="nofollow" title="${comment.commentContent}" href="${servePath}${comment.commentSharpURL}">
 									${comment.commentContent}
 								</a>
-								</span>
 							</li>
 							</#list>
 						</ul>