modified: src/main/webapp/skins/yilia/css/yilia.css

	modified:   src/main/webapp/skins/yilia/js/yilia.js
	modified:   src/main/webapp/skins/yilia/macro-comments.ftl

src/main/webapp/skins/yilia/css/yilia.css

@@ -18,7 +18,7 @@
  * skin yilia style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.1.0.0, Nov 2, 2015
+ * @version 1.2.0.0, Nov 3, 2015
 */
 /* start reset */
 html {
@@ -775,6 +775,49 @@ article.post {
 .post aside a:hover > strong {
     background-color: #4d4d4d;    
 }
+
+.comments {
+    margin: 60px 60px 0 50px;
+    padding: 0;
+    list-style: none;
+    position: relative;
+}
+
+.comments li {
+    margin-bottom: 30px;
+    padding-bottom: 30px;
+    border-bottom: 1px solid #ddd;
+}
+
+.comments .avatar {
+    position: absolute;
+    height: 60px;
+    width: 60px;
+    border-radius: 50%;
+    border: 3px solid #FFF;
+}
+
+.comments .content {
+    margin-left: 80px;
+    min-height: 66px;
+}
+
+.comments .post-meta {
+    margin-bottom: 9px;
+}
+
+.comments .content img {
+    vertical-align: sub;
+}
+
+.comments li.comment-body-ref {
+    position: absolute;
+    background-color: #FFF;
+    width: 80%;
+    margin-left: 80px;
+    padding: 10px;
+    border: 1px solid #ddd;
+}
 /* end article */
 
 /* start footer */

src/main/webapp/skins/yilia/js/yilia.js

@@ -17,7 +17,7 @@
  * @fileoverview util and every page should be used.
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.1.0.0, Nov 2, 2015
+ * @version 1.2.0.0, Nov 3, 2015
  */
 
 /**
@@ -31,19 +31,28 @@ var Yilia = {
     init: function () {
         Util.killIE();
         this.resetTags();
-        if ($("article").length > 0 && $("article.post").length === 0) {
+        
         $(window).scroll(function () {
+            if ($("article").length > 0 && $("article.post").length === 0) {
                 $("article:not(.show)").each(function () {
                     if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) {
                         $(this).addClass("show");
                     }
                 });
-            });
+            }
 
-            $(window).scroll();
-        } else if ($("article.post").length === 1) {
+            if ($(window).scrollTop() > $(window).height()) {
+                $(".icon-goup").show();
+            } else {
+                $(".icon-goup").hide();
+            }
+
+            if ($("article.post").length === 1) {
                 $("article.post").addClass('show');
             }
+        });
+
+        $(window).scroll();
     },
     resetTags: function () {
         $("a.tag").each(function (i) {

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

 <#macro comments commentList article>
-<ul class="comments fn-wrap" id="comments">
+<ul class="comments" id="comments">
     <#list commentList as comment>
-    <li id="${comment.oId}" class="fn-clear">
-        <div class="fn-left avatar-warp">
-            <img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
-        </div>
-        <div class="fn-left" style="width: 90%">
+    <li id="${comment.oId}">
+        <img class="avatar" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
+        <div class="content">
             <div class="fn-clear post-meta">
                 <span class="fn-left">
                     <#if "http://" == comment.commentURL>
@@ -116,9 +114,9 @@
                         });
                         var addComment = function (result, state) {
                             var commentable = $("#commentForm").length === 0 ? false : true;
-                            var commentHTML = '<li class="fn-clear" id="' + result.oId +
-                                    '"><div class="fn-left" style="width: 10%"><img class="avatar-48" title="'
-                                    + result.userName + '" src="' + result.commentThumbnailURL + '"></div><div class="fn-left" style="width: 90%">'
+                            var commentHTML = '<li id="' + result.oId +
+                                    '"><img class="avatar" title="'
+                                    + result.userName + '" src="' + result.commentThumbnailURL + '"><div class="content">'
                                     + '<div class="fn-clear post-meta"><span class="fn-left">' + result.replyNameHTML;
                             if (state !== "") {
                                 var commentOriginalCommentName = $("#" + page.currentCommentId).find(".post-meta a").first().text();
@@ -127,8 +125,6 @@
                                         + 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">' + commentOriginalCommentName + '</a>';
                             }
 
-
-
                             commentHTML += '<time>' + result.commentDate
                                     + '</time></span>';
                             if (commentable) {
@@ -147,7 +143,7 @@
                             Yilia.share();
                             page.load();
                             // emotions
-                            page.replaceCommentsEm("#comments .comment-content");
+                            page.replaceCommentsEm(".comments .comment-content");
                             <#nested>
                         })();
 </script>