mirror of
https://github.com/tomfran/typo.git
synced 2025-04-25 21:19:55 +03:00
Add article heading anchors
Adds heading anchors (#) that appear when user hovers over headings in articles. Clicking the anchor will scroll viewport until heading is aligned to top and update the address bar with the hash. This makes it easy to copy URLs that link to a specific heading in the article.
This commit is contained in:
parent
4e760d1c8d
commit
62972cfe7a
2 changed files with 18 additions and 1 deletions
|
@ -37,6 +37,19 @@ h6 {
|
|||
margin-bottom: var(--hx-margin-bottom);
|
||||
}
|
||||
|
||||
.heading {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--content-secondary);
|
||||
visibility: hidden;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: var(--p-margin-top);
|
||||
margin-bottom: var(--p-margin-bottom);
|
||||
|
@ -527,4 +540,4 @@ blockquote {
|
|||
blockquote p {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
4
layouts/_default/_markup/render-heading.html
Normal file
4
layouts/_default/_markup/render-heading.html
Normal file
|
@ -0,0 +1,4 @@
|
|||
<h{{ .Level }} class="heading" id="{{ .Anchor }}">
|
||||
{{ .Text }}
|
||||
<a href="#{{ .Anchor }}">#</a>
|
||||
</h{{ .Level }}>
|
Loading…
Add table
Add a link
Reference in a new issue