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> </head>
<body> <body>
{{ content }} {{ 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> </body>
</html> </html>

View File

@ -46,11 +46,29 @@ a:hover {
color: $hover; color: $hover;
} }
// fragment targets // permalink on headings
*:target { h2, h3, h4, h5, h5 {
border-left: 5px solid $accent; .permalink {
padding-left: 5px; 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 // binary list and search