Add permalinks for headings

This commit is contained in:
Andrea Cardaci 2018-05-24 12:27:09 +02:00
parent 2d1c051d1c
commit 5a6b10911b
2 changed files with 31 additions and 4 deletions

View File

@ -19,5 +19,14 @@
</head>
<body>
{{ content }}
<script>
// add permalink on headings
document.querySelectorAll('h2, h3, h4, h5, h5').forEach((heading) => {
const link = document.createElement('a');
link.className = 'permalink';
link.href = `#${heading.id}`;
heading.appendChild(link);
});
</script>
</body>
</html>

View File

@ -46,11 +46,29 @@ a:hover {
color: $hover;
}
// fragment targets
// permalink on headings
*:target {
h2, h3, h4, h5, h5 {
.permalink {
margin-left: 5px;
text-decoration: none;
visibility: hidden;
&::before {
content: "#";
}
}
&:target {
border-left: 5px solid $accent;
padding-left: 5px;
}
&:hover {
.permalink {
visibility: visible;
}
}
}
// binary list and search