Browse files

add next / previous link, hide comments by default

  • Loading branch information...
1 parent b5cb70c commit e82d0be85467df0144b1e13e6434c9a19594a57c @waynezhang committed Nov 11, 2013
Showing with 88 additions and 29 deletions.
  1. +1 −0 _layouts/default.html
  2. +28 −8 _layouts/post.html
  3. +32 −16 media/css/style.css
  4. +27 −4 media/css/style.scss
  5. +0 −1 tags.markdown
View
1 _layouts/default.html
@@ -16,6 +16,7 @@
<!--[if IE 7]>
<link rel="stylesheet" href="/media/css/fontawesome-ie7.css">
<![endif]-->
+ <script src="/media/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/media/js/highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
View
36 _layouts/post.html
@@ -22,21 +22,41 @@
{{ content }}
</section>
{% if page.guid %}
- <div class="divider"></div>
- <section class="comment">
- <div id="disqus_thread"></div>
<script type="text/javascript">
- /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
- var disqus_shortname = '{{ site.disqus }}'; // required: replace example with your forum shortname
+ var disqus_shortname = '{{ site.disqus }}';
var disqus_identifier = '{{ page.guid }}';
- /* * * DON'T EDIT BELOW THIS LINE * * */
- (function() {
+ function leave_comment() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
- })();
+ $("#leave_comment_link").css("display", "none");
+ $("#collapse_comment_link").css("display", "");
+ };
+ function collapse_comment() {
+ // document.getElementById("disqus_thread").innerHTML = '';
+ $("#disqus_thread").slideUp(400, function() {
+ $("#disqus_thread").empty();
+ $("#leave_comment_link").css("display", "");
+ $("#collapse_comment_link").css("display", "none");
+ $("#disqus_thread").css("display", "");
+ });
+ };
</script>
+ <div class="divider">
+ <span>
+ {% if page.previous %}
+ <a href="{{ page.previous.url }}">Previous</a>
+ {% endif %}
+ {% if page.next %}
+ <a href="{{ page.next.url }}">Next</a>
+ {% endif %}
+ </span>
+ <span><a href="javascript:leave_comment();" id="leave_comment_link">Comments</a></span>
+ <span><a href="javascript:collapse_comment();" id="collapse_comment_link" style="display:none;">Collapse</a></span>
+ </div>
+ <section class="comment">
+ <div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>
{% endif %}
View
48 media/css/style.css
@@ -6,7 +6,7 @@
*
* @author linghua.zhang@me.com
* @link http://lhzhang.com/
- * @update 2013-11-06
+ * @update 2013-11-11
*
* |/ | (~ (~
* |\.|._)._)
@@ -40,19 +40,10 @@ hr {
color: #fff;
background-color: #333; }
-.divider {
- margin: 2em 0;
- color: #999;
- text-shadow: 1px 1px #fff; }
- .divider:after {
- display: block;
- content: '———— ✄ ————';
- text-align: center; }
-
-a, header #header h1 a, article .title a, article .meta .tags a {
+a, header #header h1 a, article .title a, article .meta .tags a, article .divider a {
text-decoration: none;
color: #bb2222; }
- a:hover, header #header h1 a:hover, article .title a:hover, article .meta .tags a:hover {
+ a:hover, header #header h1 a:hover, article .title a:hover, article .meta .tags a:hover, article .divider a:hover {
color: #dd1144; }
blockquote, pre code {
@@ -90,8 +81,8 @@ header {
header #header h1 {
font-family: "Titillium Web", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
header #header h1 a {
- color: #aaa;
- background-color: #f0f0f0;
+ color: #a9a9a9;
+ background-color: #e9e9e9;
display: block;
padding: 0 .5em;
border-radius: 4px; }
@@ -104,7 +95,7 @@ header {
top: 1em; }
header nav span {
margin: .5em; }
- header nav a, header nav #header h1 a, header #header h1 nav a, header nav article .title a, article .title header nav a, header nav article .meta .tags a, article .meta .tags header nav a {
+ header nav a, header nav #header h1 a, header #header h1 nav a, header nav article .title a, article .title header nav a, header nav article .meta .tags a, article .meta .tags header nav a, header nav article .divider a, article .divider header nav a {
font-family: "Titillium Web", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: #ccc; }
@@ -154,6 +145,31 @@ article {
margin: .5em auto; }
article .comment {
margin: 3em 0; }
+ article .divider {
+ margin: 2em 0; }
+ article .divider header #header h1 a, header #header h1 article .divider a, article .divider .meta .tags a, article .meta .tags .divider a, article .divider a {
+ color: #999999;
+ margin: 0 1em;
+ text-transform: uppercase; }
+ article .divider {
+ position: relative;
+ font-size: 1em;
+ z-index: 1;
+ overflow: hidden;
+ text-align: center; }
+ article .divider:before, article .divider:after {
+ position: absolute;
+ top: 51%;
+ overflow: hidden;
+ width: 49%;
+ height: 2px;
+ content: '\a0';
+ background-color: #f0f0f0; }
+ article .divider:before {
+ margin-left: -50%;
+ text-align: right; }
+ article .divider:after {
+ margin-left: 1%; }
footer {
width: 680px;
@@ -164,7 +180,7 @@ footer {
font-size: .9em;
text-align: center;
margin: 1em auto; }
- footer a, footer header #header h1 a, header #header h1 footer a, footer article .title a, article .title footer a, footer article .meta .tags a, article .meta .tags footer a {
+ footer a, footer header #header h1 a, header #header h1 footer a, footer article .title a, article .title footer a, footer article .meta .tags a, article .meta .tags footer a, footer article .divider a, article .divider footer a {
color: #cccccc; }
footer a:hover, footer header #header h1 a:hover, header #header h1 footer a:hover, footer article .meta .tags a:hover, article .meta .tags footer a:hover {
color: #999999; }
View
31 media/css/style.scss
@@ -3,7 +3,7 @@
*
* @author linghua.zhang@me.com
* @link http://lhzhang.com/
- * @update 2013-11-06
+ * @update 2013-11-11
*
* |/ | (~ (~
* |\.|._)._)
@@ -27,7 +27,6 @@ li { padding: .2em 0; }
hr { width: 4em; border: none; border-top: 1px dashed #d0d0d0; border-bottom: 1px dashed #f9f9f9; }
.center { text-align: center; }
::selection { color: #fff; background-color: #333; }
-.divider { margin: 2em 0; color: #999; text-shadow: 1px 1px #fff; &:after { display:block; content: '———— ✄ ————'; text-align: center; } }
a { text-decoration: none; color: #bb2222; &:hover { color: #dd1144; }; }
blockquote { background-color: #f8f8f8; padding: 0 1em; border: 1px dashed #eee !important; border-color: #e0e0e0 !important; font-size: 13px; font-family: #{$monospace}; line-height: 1.6; display: block; overflow: auto; }
pre code { @extend blockquote; }
@@ -47,7 +46,7 @@ header {
h1 {
font-family: #{$label-font};
a { @extend a;
- color: #aaa; background-color: #f0f0f0; display: block; padding: 0 .5em; border-radius: 4px;
+ color: #a9a9a9; background-color: #e9e9e9; display: block; padding: 0 .5em; border-radius: 4px;
&:hover { color: #fff; background-color: #dd2222; }
}
}
@@ -58,7 +57,9 @@ header {
position: relative;
top: 1em;
span { margin: .5em; }
- a { font-family: #{$label-font}; color: #ccc; }
+ a {
+ font-family: #{$label-font}; color: #ccc;
+ }
}
}
@@ -96,6 +97,28 @@ article {
.post { img { max-width: #{$page-width}px; display: block; margin: .5em auto; } }
.comment { margin: 3em 0; }
+ .divider {
+ margin: 2em 0;
+ a { @extend a; color: #999999; margin: 0 1em; text-transform: uppercase; }
+ }
+ .divider {
+ position: relative;
+ font-size: 1em;
+ z-index: 1;
+ overflow: hidden;
+ text-align: center;
+ }
+ .divider:before, .divider:after {
+ position: absolute;
+ top: 51%;
+ overflow: hidden;
+ width: 49%;
+ height: 2px;
+ content: '\a0';
+ background-color: #f0f0f0;
+ }
+ .divider:before { margin-left: -50%; text-align: right; }
+ .divider:after { margin-left: 1%; }
}
footer {
View
1 tags.markdown
@@ -21,7 +21,6 @@ layout: page
{% endfor %}
</ul>
-<script src="/media/js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/media/js/jquery.tagcloud.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
$.fn.tagcloud.defaults = {

0 comments on commit e82d0be

Please sign in to comment.