thereadme/theread.me
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add heading id links

Browse Source
This commit is contained in:
Mahdi Dibaiee
2015-07-31 10:21:07 +04:30
parent f3d5929613
commit f577d6c9c5
4 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/post.html
View File

@@ -23,4 +23,6 @@ layout: default
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})(); })();
</script> </script>
<script src="/js/heading-links.js"></script>
</div> </div>

31
_sass/_layout.scss
View File

@@ -98,6 +98,37 @@ strong {
font-size: 1.3rem; 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 { article .image-caption {
display: block; display: block;
text-align: center; text-align: center;

3
img/link.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="8" data-icon="link-intact" viewBox="0 0 8 8">
<path d="M5.875.031c-.184.01-.354.03-.531.094-.27.095-.531.25-.75.469a.5.5 0 1 0 .688.688c.101-.101.245-.173.375-.219.352-.126.78-.064 1.063.219.395.389.4 1.037 0 1.438l-1.5 1.5c-.434.434-.799.483-1.063.469-.264-.015-.406-.125-.406-.125a.504.504 0 1 0-.5.875s.34.222.844.25c.504.028 1.197-.165 1.813-.781l1.5-1.5c.78-.78.785-2.041 0-2.813-.279-.279-.606-.452-.969-.531-.181-.039-.379-.041-.563-.031zm-2 2.313c-.501-.019-1.186.155-1.781.75l-1.5 1.5c-.78.78-.785 2.041 0 2.813.557.557 1.355.722 2.063.469.27-.095.531-.25.75-.469a.5.5 0 1 0-.688-.688c-.101.101-.245.173-.375.219-.352.126-.78.064-1.063-.219-.395-.389-.4-1.037 0-1.438l1.5-1.5c.405-.405.752-.448 1.031-.438.279.011.469.094.469.094a.5.5 0 1 0 .438-.875s-.343-.199-.844-.219z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 865 B

12
js/heading-links.js Normal file
View File

@@ -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);
});
}());