Skip to content

Instantly share code, notes, and snippets.

@doismellburning
Created September 23, 2015 08:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save doismellburning/1cae9879443ad6108ab2 to your computer and use it in GitHub Desktop.
Save doismellburning/1cae9879443ad6108ab2 to your computer and use it in GitHub Desktop.
commit d2a403c85ef68c4119de9208c15e9c4dc5df9b9b
Author: Kristian Glass <git@doismellburning.co.uk>
Date: Fri Oct 31 00:36:56 2014 +0000
Magic anchor links
With thanks to http://ben.balter.com/2014/03/13/pages-anchor-links/
diff --git a/_config.yml b/_config.yml
index 1b00c31..ad61734 100644
--- a/_config.yml
+++ b/_config.yml
@@ -39,7 +39,9 @@ rdiscount:
extensions:
- autolink
- footnotes
+ - generate_toc
- smart
+ toc_token: "!!TOC"
pygments: false # default python pygments have been replaced by pygments.rb
paginate: 10 # Posts per page on the blog index
diff --git a/sass/custom/_styles.scss b/sass/custom/_styles.scss
index 5aaea35..c1ba5a5 100644
--- a/sass/custom/_styles.scss
+++ b/sass/custom/_styles.scss
@@ -15,3 +15,24 @@
margin: auto;
padding: auto;
}
+
+//
+// http://ben.balter.com/2014/03/13/pages-anchor-links/
+//
+
+.header-link {
+ opacity: 0;
+ text-decoration: none;
+
+ -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+ -moz-transition: opacity 0.2s ease-in-out 0.1s;
+ -ms-transition: opacity 0.2s ease-in-out 0.1s;
+}
+
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ opacity: 1;
+}
diff --git a/source/_includes/head.html b/source/_includes/head.html
index 7a727b2..d09fb22 100644
--- a/source/_includes/head.html
+++ b/source/_includes/head.html
@@ -27,4 +27,17 @@
<script src="{{ root_url }}/javascripts/octopress.js" type="text/javascript"></script>
{% include custom/head.html %}
{% include google_analytics.html %}
+ <script>
+ $(function() {
+ return $("h2, h3, h4, h5, h6").each(function(i, el) {
+ var $el, icon, id;
+ $el = $(el);
+ id = $el.prev().attr('name');
+ icon = '<span>&para;</span>';
+ if (id) {
+ return $el.append($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
+ }
+ });
+ });
+ </script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment