'Jump to comments' button; paragraph links.

9 anos atrás · 8d87906b13
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -10,7 +10,9 @@
        <link rel="stylesheet" href="/static/main.css" />
        <link rel="stylesheet" href="/static/syntax.css" /> <!-- shamelessly stolen from https://github.com/mojombo/tpw/blob/master/css/syntax.css -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
        <script src="/static/main.js"></script>
    </head>
    <body>
        <div id="banner" class="banner-{% if page.title == "Home" %}large{% else %}small{% endif %}">
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -7,12 +7,13 @@ layout: base
    <ul id="post-info">
        <li><span><i class="fa fa-tag"></i> Tags:</span> {{ page.tags | join: ", " }}</li>
        <li><span><i class="fa fa-clock-o"></i> Date:</span> {{ page.date | date: "%B %-d, %Y" }}</li>
        <li><span><i class="fa fa-comments"></i></span> <a href="#disqus_thread">Jump to comments</a></li>
    </ul>
    <div id="post">
        {{ content }}
    </div>
    <div id="disqus_thread"></div>
    <script type="text/javascript">
    <script>
        var disqus_shortname = 'earwig';
        var disqus_identifier = '{{ page.id }}';
        var disqus_title = '{{ page.title }}';
--- a/index.html
+++ b/index.html
@@ -150,7 +150,7 @@ title: Home
        </td>
    </tr>
 </table>
 <script type="text/javascript">
 <script>
    var disqus_shortname = 'earwig';
    var disqus_title = '{{ page.title }}';
    var disqus_url = 'http://earwig.github.com{{ page.url }}';
--- a/static/main.css
+++ b/static/main.css
@@ -6,8 +6,7 @@ body {
    font-size: 16px;
 }

 a:link { color: #3d7751; text-decoration: none; }
 a:visited { color: #3d7751; text-decoration: none; }
 a:link, a:visited { color: #3d7751; text-decoration: none; }
 a:hover { color: #041; text-decoration: underline; }
 a:active { color: #403; text-decoration: underline; }

@@ -152,6 +151,21 @@ pre code {
    color: #888;
 }

 .para-link {
    margin-left: 0.5em;
    padding: 0 0.25em 0 0.3em;
 }

 .para-link:link, .para-link:visited {
    color: #A00;
    text-decoration: none;
 }

 .para-link:hover, .para-link:active {
    background-color: #A00;
    color: white;
 }

 #footer {
    color: #444;
    font-size: 85%;
--- a/static/main.js
+++ b/static/main.js
@@ -0,0 +1,10 @@
 $(document).ready(function() {
    $("#post").find("h1, h2, h3, h4, h5, h6").hover(function() {
        $(this).append($("<a>")
            .attr("href", "#" + this.id)
            .attr("class", "para-link")
            .text("¶"));
    }, function() {
        $(this).find(".para-link").remove();
    });
 });