From b7b95e6653d5225e7998aabc9d91ece1dec00595 Mon Sep 17 00:00:00 2001 From: David Lapshin Date: Thu, 9 May 2024 23:32:09 +0300 Subject: [PATCH] Only target needed elements for transitioning, more fail-proof reduced motion setting --- content/blog/the-quill-of-duck/index.md | 6 +++++- sass/_article-list.scss | 4 ++-- sass/_buttons.scss | 3 ++- sass/_comments.scss | 13 +++++++------ sass/_footer.scss | 5 +++-- sass/_main.scss | 8 +++++--- sass/_media.scss | 3 ++- sass/_nav.scss | 3 ++- sass/_post-nav.scss | 2 +- sass/_tags.scss | 5 +++-- sass/_variables.scss | 10 ++++++---- 11 files changed, 38 insertions(+), 24 deletions(-) diff --git a/content/blog/the-quill-of-duck/index.md b/content/blog/the-quill-of-duck/index.md index ff018fc..cffd974 100644 --- a/content/blog/the-quill-of-duck/index.md +++ b/content/blog/the-quill-of-duck/index.md @@ -9,8 +9,12 @@ tags = ["Demo", "Test"] archive = "This page is, in fact, not archived." toc = true disclaimer = """ -See [demo](@/demo/index.md) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments. +See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. This page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments. """ +[extra.comments] +host = "toot.community" +user = "sungsphinx" +id = "111789185826519979" +++ ![Quill](quill.png) diff --git a/sass/_article-list.scss b/sass/_article-list.scss index ac3a2c6..5d160f8 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -5,7 +5,8 @@ &.draft { transform: scale(0.95); opacity: 0.6; - transition: var(--transition-longer); + transition-duration: var(--transition-longer); + transition-property: transform, opacity, outline, outline-offset; outline: 2px dashed var(--fg-muted-2); outline-offset: 1rem; border-radius: 1rem; @@ -23,7 +24,6 @@ position: absolute; top: 0; right: 0; - transition: var(--transition); box-shadow: var(--edge-highlight); border-radius: 999px; padding: 0.25rem 0.75rem; diff --git a/sass/_buttons.scss b/sass/_buttons.scss index d07ea7d..cfd141c 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -8,7 +8,8 @@ .inline-button { display: inline-block; - transition: var(--transition); + transition-duration: var(--transition); + transition-property: background-color, transform, box-shadow; cursor: pointer; box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner); diff --git a/sass/_comments.scss b/sass/_comments.scss index 7c6c639..e0aac8f 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -47,7 +47,8 @@ section#comments { .avatar { all: unset; - transition: var(--transition); + transition-duration: var(--transition); + transition-property: transform, box-shadow; box-shadow: var(--edge-highlight), var(--shadow); border-radius: var(--rounded-corner); background-position: 50%; @@ -77,7 +78,8 @@ section#comments { font-weight: bold; .instance { - transition: var(--transition); + transition-duration: var(--transition); + transition-property: background-color, transform, box-shadow; box-shadow: var(--edge-highlight); border-radius: 999px; background-color: var(--fg-muted-1); @@ -96,8 +98,6 @@ section#comments { } &.op { - -webkit-backdrop-filter: unset; - backdrop-filter: unset; box-shadow: none; background-color: transparent; color: var(--primary-color); @@ -144,7 +144,8 @@ section#comments { .boosts, .faves { display: inline-block; - transition: var(--transition); + transition-duration: var(--transition); + transition-property: box-shadow, transform, background-color; margin-right: 0.25rem; border-radius: 999px; background-color: transparent; @@ -154,7 +155,7 @@ section#comments { svg { vertical-align: -0.125em; - transition: var(--transition-longer); + transition: transform var(--transition-longer); margin-inline-end: 0.25rem; } diff --git a/sass/_footer.scss b/sass/_footer.scss index afbe4a4..e95b0ea 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -45,7 +45,8 @@ a { display: inline-flex; - transition: var(--transition); + transition-duration: var(--transition); + transition-property: box-shadow, background-color; border-radius: 999px; padding: 0.5rem; @@ -64,7 +65,7 @@ i { display: inline-block; - transition: var(--transition); + transition: background-color var(--transition); background-color: var(--fg-muted-4); width: 1.5rem; height: 1.5rem; diff --git a/sass/_main.scss b/sass/_main.scss index 73d5a37..fa3c907 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -192,7 +192,8 @@ pre { position: absolute; top: 0.5rem; right: 0.5rem; - transition: var(--transition); + transition-duration: var(--transition); + transition-property: background-color, transform; cursor: pointer; border-radius: 50%; background-color: var(--fg-muted-1); @@ -226,7 +227,7 @@ pre { -webkit-mask-image: 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"); display: inline-block; mask-image: 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"); - transition: var(--transition); + transition: background-color var(--transition); background-color: var(--fg-muted-4); width: 1rem; height: 1rem; @@ -277,7 +278,8 @@ pre { kbd { display: inline-block; - transition: var(--transition); + transition-duration: var(--transition); + transition-property: transform, box-shadow, background-color; cursor: pointer; box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); border-radius: var(--rounded-corner-small); diff --git a/sass/_media.scss b/sass/_media.scss index e27a200..54cd6a4 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -1,5 +1,6 @@ img { - transition: var(--transition-longer); + transition-duration: var(--transition-longer); + transition-property: transform, box-shadow, border-radius; &:not(.no-hover) { cursor: zoom-in; diff --git a/sass/_nav.scss b/sass/_nav.scss index df6f5ee..f6f207a 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -32,7 +32,8 @@ } a { - transition: var(--transition); + transition-duration: var(--transition); + transition-property: box-shadow, background-color, color; border-radius: 999px; padding: 0.325rem 0.75rem; color: var(--fg-muted-4); diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index 33022bc..3863f1d 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -27,7 +27,7 @@ } .post-title { - transition: var(--transition); + transition: color var(--transition); color: var(--fg-color); } } diff --git a/sass/_tags.scss b/sass/_tags.scss index 6bc48b4..4bb7ed4 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -5,7 +5,7 @@ li { display: inline-block; - transition: var(--transition); + transition: transform var(--transition); margin: 0 0.25rem 0.5rem 0; &:active { @@ -14,7 +14,8 @@ } .tag { - transition: var(--transition); + transition-duration: var(--transition); + transition-property: background-color, color; box-shadow: var(--edge-highlight); border-radius: 999px; background-color: var(--fg-muted-1); diff --git a/sass/_variables.scss b/sass/_variables.scss index 985cb31..42315ad 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -38,10 +38,12 @@ --transition: 0.2s; @media (prefers-reduced-motion) { - // VARIABLES - --transition-long: 0; - --transition-longer: 0; - --transition: 0; + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } } @media (prefers-color-scheme: dark) {