Add heading id links
This commit is contained in:
parent
f3d5929613
commit
f577d6c9c5
@ -23,4 +23,6 @@ layout: default
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="/js/heading-links.js"></script>
|
||||
</div>
|
||||
|
@ -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;
|
||||
|
3
img/link.svg
Normal file
3
img/link.svg
Normal 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>
|
After Width: | Height: | Size: 865 B |
12
js/heading-links.js
Normal file
12
js/heading-links.js
Normal 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);
|
||||
});
|
||||
}());
|
Loading…
Reference in New Issue
Block a user