diff --git a/_layouts/post.html b/_layouts/post.html
index f49b895..68af9dd 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -23,4 +23,6 @@ layout: default
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
+
+
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 26f21d7..1519a3c 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -98,6 +98,37 @@ strong {
font-size: 1.3rem;
}
+.post-content [id] {
+ position: relative;
+
+ &:hover .heading-link {
+ opacity: 1;
+ }
+}
+
+.post-content .heading-link {
+ display: block;
+ position: absolute;
+ width: 15px;
+ height: 15px;
+
+ left: -30px;
+ top: 10px;
+
+ padding-right: 30px;
+
+ background: url(/img/link.svg) no-repeat;
+ background-size: contain;
+
+ opacity: 0;
+
+ transition: opacity 0.3s ease;
+
+ &:hover {
+ border: none;
+ }
+}
+
article .image-caption {
display: block;
text-align: center;
diff --git a/img/link.svg b/img/link.svg
new file mode 100644
index 0000000..d098f35
--- /dev/null
+++ b/img/link.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/js/heading-links.js b/js/heading-links.js
new file mode 100644
index 0000000..2149fcd
--- /dev/null
+++ b/js/heading-links.js
@@ -0,0 +1,12 @@
+(function() {
+ var els = document.querySelectorAll('.post-content [id]');
+ var headings = Array.prototype.slice.call(els);
+
+ headings.forEach(function(head) {
+ var link = document.createElement('a');
+ link.className = 'heading-link';
+ link.href = '#' + head.id;
+
+ head.appendChild(link);
+ });
+}());