diff --git a/themes/maik-blog/assets/js/main.js b/themes/maik-blog/assets/js/main.js index 0e0dd76..bfe635e 100644 --- a/themes/maik-blog/assets/js/main.js +++ b/themes/maik-blog/assets/js/main.js @@ -35,7 +35,18 @@ window.addEventListener("load", () => { heading.classList.add("article-heading"); anchor.addEventListener("click", (e) => { + e.preventDefault(); + + window.history.replaceState({}, "", anchor.href); navigator.clipboard.writeText(anchor.href); + + document + .querySelectorAll(".current-heading") + .forEach((elem) => + elem.classList.remove("current-heading") + ); + + anchor.classList.add("current-heading"); }); } } diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss index fdc64cd..3554d4c 100644 --- a/themes/maik-blog/assets/scss/_main.scss +++ b/themes/maik-blog/assets/scss/_main.scss @@ -508,8 +508,14 @@ table { position: relative; text-decoration: none; + --background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E"); + + &.current-heading { + --background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22green%22%20stroke-width=%224%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-check%22%3E%3Cpolyline%20points=%2220%206%209%2017%204%2012%22%3E%3C/polyline%3E%3C/svg%3E"); + } + &:hover { - &::after { + &::before { content: " "; display: inline-block; position: absolute; @@ -517,7 +523,7 @@ table { transform: translateY(-50%); height: 100%; - background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E"); + background-image: var(--background-image); background-repeat: no-repeat; background-position: center; background-size: auto 50%; @@ -526,7 +532,7 @@ table { @media #{$media-size-tablet-min} { &:hover { - &::after { + &::before { right: 100%; width: 1.5em; } @@ -535,7 +541,7 @@ table { @media #{$media-size-tablet} { &:hover { - &::after { + &::before { left: 100%; width: 1.2em; }