From f72225103f8b3c94b87bbd3f6da5327e8896695f Mon Sep 17 00:00:00 2001 From: daudix Date: Thu, 18 Jul 2024 22:14:01 +0300 Subject: [PATCH] Don't use :has for copy code animation And move the main container to _general.scss --- content/_index.md | 1 + sass/_general.scss | 5 ++ .../{_containers.scss => _pre-container.scss} | 49 +++++++++---------- sass/style.scss | 2 +- templates/partials/copy_button.html | 8 +-- 5 files changed, 34 insertions(+), 31 deletions(-) rename sass/{_containers.scss => _pre-container.scss} (94%) diff --git a/content/_index.md b/content/_index.md index 03edbaa..a763259 100644 --- a/content/_index.md +++ b/content/_index.md @@ -207,4 +207,5 @@ As for the code formatter I use built-in VSCodium one. Prettier is good but I do - [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/). - [Jonathan Neal](https://jonneal.dev) for the [normalize.css](https://csstools.github.io/normalize.css/). - [Modern Font Stacks](https://modernfontstacks.com) for the system font stack. +- [TheEvilSkeleton](https://tesk.page) for helping to improve the look and accessibility. - Everyone who supported me and said good stuff <3 diff --git a/sass/_general.scss b/sass/_general.scss index 33e0df1..8eb517f 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -73,3 +73,8 @@ body { outline-offset: 0.25rem; } } + +.container { + margin: 0 auto; + width: min(var(--container-width), 90%); +} diff --git a/sass/_containers.scss b/sass/_pre-container.scss similarity index 94% rename from sass/_containers.scss rename to sass/_pre-container.scss index a9b19eb..addad43 100644 --- a/sass/_containers.scss +++ b/sass/_pre-container.scss @@ -1,8 +1,3 @@ -.container { - margin: 0 auto; - width: min(var(--container-width), 90%); -} - .pre-container { margin: 1rem 0 1rem; box-shadow: var(--edge-highlight), var(--shadow); @@ -15,16 +10,6 @@ padding: 0.25rem; height: 2.5rem; - &:has(button.active) { - animation: active-fill var(--transition-long); - - @keyframes active-fill { - to { - background-position-x: -200%; - } - } - } - span { vertical-align: middle; margin-inline-start: 0.75rem; @@ -58,17 +43,6 @@ transform: scale(var(--active)); } - &.active { - background-color: var(--primary-color-alpha); - - .icon { - $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); - -webkit-mask-image: $icon; - mask-image: $icon; - background-color: var(--primary-color); - } - } - .icon { $icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); -webkit-mask-image: $icon; @@ -79,6 +53,29 @@ height: 1rem; } } + + &.active { + animation: active-fill var(--transition-long); + + button { + &:hover { + background-color: var(--primary-color-alpha); + } + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--primary-color); + } + } + + @keyframes active-fill { + to { + background-position-x: -200%; + } + } + } } pre { diff --git a/sass/style.scss b/sass/style.scss index a9bdbb2..d0904ca 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -14,7 +14,6 @@ @use "buttons"; @use "code"; @use "comments"; -@use "containers"; @use "crt"; @use "external"; @use "footer"; @@ -27,6 +26,7 @@ @use "nav"; @use "not-found"; @use "post-nav"; +@use "pre-container"; @use "statements"; @use "table"; @use "tags"; diff --git a/templates/partials/copy_button.html b/templates/partials/copy_button.html index f2258af..091a049 100644 --- a/templates/partials/copy_button.html +++ b/templates/partials/copy_button.html @@ -41,21 +41,21 @@ container.appendChild(block); button.addEventListener("click", async () => { - await copyCode(block, button); + await copyCode(block, header); }); } }); - async function copyCode(block, button) { + async function copyCode(block, header) { let code = block.querySelector("code"); let text = code.innerText; await navigator.clipboard.writeText(text); - button.classList.add("active"); + header.classList.add("active"); setTimeout(() => { - button.classList.remove("active"); + header.classList.remove("active"); }, 800); } });