diff --git a/themes/maik-blog/assets/js/main.js b/themes/maik-blog/assets/js/main.js index f5eb154..0e0dd76 100644 --- a/themes/maik-blog/assets/js/main.js +++ b/themes/maik-blog/assets/js/main.js @@ -1,20 +1,42 @@ window.addEventListener("load", () => { + // Enlarged floating figures for (let figure of document.getElementsByTagName("figure")) { - if (figure.classList.contains("post-cover") || figure.classList.contains("portfolio-cover")) - continue + if ( + figure.classList.contains("post-cover") || + figure.classList.contains("portfolio-cover") + ) + continue; figure.addEventListener("click", () => { - figure.classList.toggle("floated-focus") - }) + figure.classList.toggle("floated-focus"); + }); } - document.addEventListener('keydown', (e) => { - if (e.keyCode !== 27) - return + document.addEventListener("keydown", (e) => { + if (e.keyCode !== 27) return; for (let figure of document.getElementsByClassName("floated-focus")) { - figure.classList.remove("floated-focus") + figure.classList.remove("floated-focus"); } + }); - }) -}) + // Add anchors to article headings + for (let article of document.getElementsByTagName("article")) { + for (let heading of article.querySelectorAll( + "h1, h2, h3, h4, h5, h6" + )) { + if (!heading.id) continue; + + let anchor = document.createElement("a"); + anchor.innerHTML = heading.innerHTML; + anchor.href = "#" + heading.id; + heading.innerHTML = ""; + heading.appendChild(anchor); + heading.classList.add("article-heading"); + + anchor.addEventListener("click", (e) => { + navigator.clipboard.writeText(anchor.href); + }); + } + } +}); diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss index 67722df..284c32a 100644 --- a/themes/maik-blog/assets/scss/_main.scss +++ b/themes/maik-blog/assets/scss/_main.scss @@ -477,4 +477,46 @@ table { display: inline; } } -} \ No newline at end of file +} + +.article-heading { + a { + position: relative; + text-decoration: none; + + &:hover { + &::after { + content: " "; + display: inline-block; + position: absolute; + top: 50%; + 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-repeat: no-repeat; + background-position: center; + background-size: auto 50%; + } + } + + @media #{$media-size-tablet-min} { + &:hover { + &::after { + right: 100%; + width: 1.5em; + + } + } + } + + @media #{$media-size-tablet} { + &:hover { + &::after { + left: 100%; + width: 1.2em; + } + } + } + } +} diff --git a/themes/maik-blog/assets/scss/_variables.scss b/themes/maik-blog/assets/scss/_variables.scss index 59bd8b4..97087a1 100644 --- a/themes/maik-blog/assets/scss/_variables.scss +++ b/themes/maik-blog/assets/scss/_variables.scss @@ -15,7 +15,9 @@ $dark-color-secondary: #73747b; $dark-border-color: #4a4b50; $media-size-phone: "(max-width: 684px)"; +$media-size-phone-min: "(min-width: 684px)"; $media-size-tablet: "(max-width: 900px)"; +$media-size-tablet-min: "(min-width: 900px)"; $media-size-medium: "(max-width: 1200px)"; $media-size-medium-min: "(min-width: 1200px)";