diff --git a/content/_index.md b/content/_index.md index 167f054..2732d63 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,4 +1,5 @@ +++ +insert_anchor_links = "right" +++ {% crt() %} diff --git a/sass/_icon.scss b/sass/_icon.scss new file mode 100644 index 0000000..340b93f --- /dev/null +++ b/sass/_icon.scss @@ -0,0 +1,7 @@ +i.icon { + display: inline-block; + font-style: normal; + font-variant: normal; + line-height: 1; + text-rendering: auto; +} diff --git a/sass/_main.scss b/sass/_main.scss index 3d12991..73d5a37 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -50,6 +50,7 @@ body { @keyframes highlight-in-out { 50% { + font-weight: bolder; letter-spacing: 0.125rem; } } @@ -77,17 +78,6 @@ h6 { line-height: normal; font-family: var(--font-serif); letter-spacing: -0.05em; - - .zola-anchor { - display: none; - visibility: hidden; - } - - &:hover .zola-anchor { - display: inline-block; - visibility: visible; - text-decoration: none; - } } h1 { @@ -240,10 +230,6 @@ pre { background-color: var(--fg-muted-4); width: 1rem; height: 1rem; - font-style: normal; - font-variant: normal; - line-height: 1; - text-rendering: auto; } } } diff --git a/sass/_zola-anchor.scss b/sass/_zola-anchor.scss new file mode 100644 index 0000000..0f6078f --- /dev/null +++ b/sass/_zola-anchor.scss @@ -0,0 +1,21 @@ +.zola-anchor { + margin: 0 0.25em; + + &:hover i { + background-color: var(--primary-color); + } + + i { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E"); + mask-size: cover; + transition: background-color var(--transition); + background-color: var(--fg-muted-4); + width: 1em; + height: 1em; + } +} + +:target .zola-anchor i { + background-color: var(--primary-color-alpha); +} diff --git a/sass/style.scss b/sass/style.scss index 2bc32dc..627fce0 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -14,6 +14,7 @@ @use "comments"; @use "crt"; @use "footer"; +@use "icon"; @use "johnvertisement"; @use "links"; @use "media"; @@ -22,3 +23,4 @@ @use "post-nav"; @use "statements"; @use "tags"; +@use "zola-anchor"; diff --git a/static/copy-button.js b/static/copy-button.js index deda191..67ae088 100644 --- a/static/copy-button.js +++ b/static/copy-button.js @@ -7,6 +7,8 @@ document.addEventListener("DOMContentLoaded", function () { let button = document.createElement("button"); let icon = document.createElement("i"); + icon.classList.add("icon"); + button.appendChild(icon); block.appendChild(button); diff --git a/templates/anchor-link.html b/templates/anchor-link.html new file mode 100644 index 0000000..982d193 --- /dev/null +++ b/templates/anchor-link.html @@ -0,0 +1 @@ +