General layout for blog posts, CSS rules for comments

comments.css

---
---
#comments .comment {
    margin: 10px 0;
    border: 1px solid #cacaca;
}
#comments .comment .cmeta {
    height: 33px;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
    background: #f8f8f8;
    background: -moz-linear-gradient(#f8f8f8,#e1e1e1);
    background: -webkit-linear-gradient(#f8f8f8,#e1e1e1);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8',endColorstr='#e1e1e1')";
}

#comments .comment .cmeta p.author,
#comments .comment .cmeta p.date {
    margin: 0;
    height: 33px;
    line-height: 33px;
    font-family: Trebuchet MS, Lucida Grande, Arial, sans-serif;
    font-size: 14px;
    text-shadow: 1px 1px 0 rgba(255,255,255,.7);
}
#comments .comment .cmeta p.author {
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#comments .comment .cmeta p.date {float: right;}

#comments .cmeta p.author a, #comments .cmeta p.date a {
    color: #666;
    text-decoration: none;
}
#comments .cmeta p.author strong a {color: #222;}
#comments .comment .cmeta .gravatar {
    display: inline-block;
    margin-top: -2px;
    margin-right: 3px;
    padding: 1px;
    line-height: 1px;
    vertical-align: middle;
    font-size: 1px;
    background: #fff;
    border: 1px solid #c8c8c8;
}
#comments .comment .cmeta .gravatar img {border: 0;}
#comments .comment .cmeta .icon {
    display: inline-block;
    margin-top: -2px;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url({{ site.url }}/images/modules/comments/icons.png) 0 0 no-repeat;
}

#comments .comment .body {padding: 0 10px;}
#comments .comment .body > *:first-child {margin-top: 10px !important;}
#comments .comment .body > *:last-child {margin-bottom: 10px !important;}

post.html

---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }}</p>
{{ content }}
<p><a href="#">Наверх</a></p>

<div id="comments">
  <h2>Отправить комментарий</h2>
  <p>
    Комментарии блога предоставлены
    сервисом <a href="https://github.com/">GitHub</a>. Вы можете
    отправить комментарий
    с <a href="https://github.com/visconte/visconte.github.com/issues/{{ page.commentIssueId }}#discussion_bucket">данной страницы</a>
    (необходима <a href="https://github.com/signup/free">регистрация
    на GitHub</a>) или связаться со мной по <a href=""
    class="user-email">email</a>.
  </p>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://datejs.googlecode.com/svn/trunk/build/date-ru-RU.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">
$.ajax('https://api.github.com/repos/visconte/visconte.github.com/issues/{{ page.commentIssueId }}/comments', {
    dataType: 'json',
    headers: { Accept: 'application/vnd.github.html+json' },
    success: function(comments) {
        loadComments(comments);
    }
});

function loadComments(comments) {
    for (var i=0; i<comments.length; i++) {
        var cuser = comments[i].user.login;
        var cuserlink = 'https://www.github.com/' + cuser;
        var clink = 'https://github.com/visconte/visconte.github.com/issues/{{ page.commentIssueId }}#issuecomment-' + comments[i].id;
        var cbody = comments[i].body_html;
        var cavatarlink = comments[i].user.avatar_url;
        var cdate = Date.parse(comments[i].created_at).toString("MMMM d, yyyy HH:mm");

        $('#comments').append('\
<div class="comment">\
  <div class="cmeta">\
    <p class="author">\
      <span class="gravatar"><img height="20" width="20" src="' + cavatarlink + '"></span>\
      <strong><a href="' + cuserlink + '">' + cuser + '</a></strong>\
      <a href="' + clink + '">комментирует</a>\
    </p>\
    <p class="date"><a href="' + clink + '">' + cdate + '</a> <span class="icon"></span></p>\
  </div>\
  <div class="body">' + cbody + '</div>\
</div>')
    }
};

function UserEmail() {
    $.ajax('https://api.github.com/users/visconte', {
        dataType: 'json',
        success: function(info) {
            mailtoUser(info);
        }
    });
};
function mailtoUser(info) {
    var emaillink = 'mailto:' + info.email + '?subject={{ page.title }}';
    window.location.href = emaillink;
};

$(document).ready(function() {
    $('a[href$=".png"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"]').colorbox();

    $('a.user-email').click(function() {
        UserEmail();
        return false;
    });
});
</script>

<p><a href="#">Наверх</a></p>