From 047cecf5e03e27c57026b4c7a8d50a5e0bfc6c3c Mon Sep 17 00:00:00 2001 From: Sangeeth Sudheer Date: Sun, 17 Nov 2024 16:24:22 +0530 Subject: 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. --- assets/css/main.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'assets/css/main.css') 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 +} -- cgit v1.2.3