ghostcms/solo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Solo] Add anchor link to content headings, visible on hover

Browse Source
This commit is contained in:
Evan Wondrasek 2022-11-28 21:53:44 -08:00
parent ed296cb505
commit c8fceff537
2 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/screen.css
View File

@ -767,6 +767,22 @@ hr {
} }
} }
.anchor-link {
opacity: 0;
text-decoration: none;
margin-left: 0em;
}
h1:hover .anchor-link,
h2:hover .anchor-link,
h3:hover .anchor-link,
h4:hover .anchor-link,
h5:hover .anchor-link,
h6:hover .anchor-link {
opacity: 1;
text-decoration: none;
}
/* Custom CTA /* Custom CTA
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

15
assets/js/main.js
View File

@ -52,3 +52,18 @@ function initParallax() {
(function () { (function () {
pagination(true, initParallax); pagination(true, initParallax);
})(); })();
(function (window, document) {
var addAnchors = () => {
var headings = document.querySelectorAll('.gh-content h1, .gh-content h2, .gh-content h3, gh-.content h4, .gh-content h5, .gh-content h6')
headings.forEach((heading) => {
heading.insertAdjacentHTML('beforeend', `
<a href="#${heading.id}" class="anchor-link">
<svg width="1em" height="0.85em" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
</a>
`)
})
}
document.addEventListener('DOMContentLoaded', addAnchors)
})(window, document);