ardour/manual
13
0
Fork 0
Code Pull Requests Releases Activity

Add Heading Links (css/js) (#268)

Browse Source 
This adds a simple JS script (and css) to create and add links to
headings (on hover).
This commit is contained in:
Pat David 2024-08-18 10:53:32 -05:00 committed by GitHub
parent 7fd1c0ad3c
commit 9b348e61a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
page-template.html
View File

@ -108,8 +108,23 @@
document.querySelector('.previous a').click()
}
}
})
});
// Add links to headings automatically
window.onload = (e) => {
document.querySelectorAll('h2, h3, h4, h5, h6').forEach( el => {
let a = document.createElement('a');
let slug = el.id !== ''
? el.id
: el.innerText;
el.id = slug;
a.href = `#${slug}`;
a.innerText = ' 🔗';
el.appendChild( a );
});
};
</script>
</body>
</html>

10
source/css/screen.css
View File

@ -20,6 +20,16 @@ body {
line-height: 1.8em;
}
/* Style heading link */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
visibility: hidden;
text-decoration: none;
}
h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a {
visibility: visible;
}
h1, h2, h3, h4 {
font-weight: normal;
padding-bottom: .3ex;