diff options
| author | Sangeeth Sudheer <git@sangeeth.dev> | 2024-11-17 16:24:22 +0530 |
|---|---|---|
| committer | Sangeeth Sudheer <git@sangeeth.dev> | 2024-11-17 16:27:18 +0530 |
| commit | 047cecf5e03e27c57026b4c7a8d50a5e0bfc6c3c (patch) | |
| tree | 3cb37c0694ef5abeab09062a222498385fc9a835 | |
| parent | f025f972e0b1ffb8df288be632bb3c34a58b66e8 (diff) | |
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.
| -rw-r--r-- | assets/css/main.css | 15 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-heading.html | 4 |
2 files changed, 18 insertions, 1 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index d95ca04..4bcad33 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; -}
\ No newline at end of file +} diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..44430d6 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,4 @@ +<h{{ .Level }} class="heading" id="{{ .Anchor }}"> + {{ .Text }} + <a href="#{{ .Anchor }}">#</a> +</h{{ .Level }}> |