From 018fcf813ca6190dd3787a9348b01dfab91ef25b Mon Sep 17 00:00:00 2001 From: daudix Date: Sat, 15 Jun 2024 02:18:13 +0300 Subject: [PATCH] Get rid of overcomplicated transition properties Not a single time this been useful, quite the opposite; it was very annoying --- sass/_article-list.scss | 3 +-- sass/_buttons.scss | 3 +-- sass/_comments.scss | 8 +++----- sass/_containers.scss | 5 ++--- sass/_footer.scss | 5 ++--- sass/_input.scss | 6 ++---- sass/_media.scss | 3 +-- sass/_nav.scss | 11 ++++------- sass/_post-nav.scss | 2 +- sass/_tags.scss | 5 ++--- sass/_typography.scss | 3 +-- sass/_zola-anchor.scss | 4 ++-- 12 files changed, 22 insertions(+), 36 deletions(-) diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 552eb75..ccf66fe 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -5,8 +5,7 @@ &.draft { transform: scale(0.95); opacity: 0.6; - transition-duration: var(--transition-longer); - transition-property: transform, opacity, outline, outline-offset; + transition: var(--transition-longer); outline: 2px dashed var(--fg-muted-2); outline-offset: 1rem; border-radius: 1rem; diff --git a/sass/_buttons.scss b/sass/_buttons.scss index cfd141c..d07ea7d 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -8,8 +8,7 @@ .inline-button { display: inline-block; - transition-duration: var(--transition); - transition-property: background-color, transform, box-shadow; + transition: var(--transition); cursor: pointer; box-shadow: var(--edge-highlight); border-radius: var(--rounded-corner); diff --git a/sass/_comments.scss b/sass/_comments.scss index 5b95829..07b9036 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -44,7 +44,7 @@ section#comments { height: 4rem; .avatar { - transition-duration: var(--transition); + transition: var(--transition); margin: 0; background-size: cover; background-color: var(--fg-muted-1); @@ -68,8 +68,7 @@ section#comments { font-weight: bold; .instance { - transition-duration: var(--transition); - transition-property: background-color, transform, box-shadow; + transition: var(--transition); box-shadow: var(--edge-highlight); border-radius: 999px; background-color: var(--fg-muted-1); @@ -134,8 +133,7 @@ section#comments { .boosts, .faves { display: inline-block; - transition-duration: var(--transition); - transition-property: box-shadow, transform, background-color; + transition: var(--transition); margin-right: 0.25rem; border-radius: 999px; background-color: transparent; diff --git a/sass/_containers.scss b/sass/_containers.scss index 4c30cc9..28b2389 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -13,8 +13,7 @@ top: 0.5rem; right: 0.5rem; backdrop-filter: var(--blur); - transition-duration: var(--transition); - transition-property: background-color, transform; + transition: var(--transition); cursor: pointer; box-shadow: var(--edge-highlight); border: none; @@ -49,7 +48,7 @@ $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; mask-image: $icon; - transition: background-color var(--transition); + transition: var(--transition); background-color: var(--fg-muted-4); width: 1rem; height: 1rem; diff --git a/sass/_footer.scss b/sass/_footer.scss index d12c107..63fa12d 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -45,8 +45,7 @@ a { display: inline-flex; - transition-duration: var(--transition); - transition-property: box-shadow, background-color, transform; + transition: var(--transition); border-radius: 999px; padding: 0.5rem; @@ -64,7 +63,7 @@ } .icon { - transition: background-color var(--transition); + transition: var(--transition); background-color: var(--fg-muted-4); width: 1.5rem; height: 1.5rem; diff --git a/sass/_input.scss b/sass/_input.scss index e1b0122..ee8e6d2 100644 --- a/sass/_input.scss +++ b/sass/_input.scss @@ -3,8 +3,7 @@ input[type="checkbox"] { -webkit-appearance: none; position: relative; appearance: none; - transition-duration: var(--transition); - transition-property: border, background-color; + transition: var(--transition); border: 0.15rem solid var(--fg-muted-3); background-color: var(--fg-muted-1); width: 1rem; @@ -15,8 +14,7 @@ input[type="checkbox"] { position: absolute; transform: scale(0); opacity: 0; - transition-duration: var(--transition); - transition-property: transform, opacity; + transition: var(--transition); background-color: white; content: ""; } diff --git a/sass/_media.scss b/sass/_media.scss index 131c588..d0146b0 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -1,6 +1,5 @@ img { - transition-duration: var(--transition-longer); - transition-property: transform, box-shadow, border-radius; + transition: var(--transition-longer); &:not(.no-hover, &[src*="#no-hover"]) { cursor: zoom-in; diff --git a/sass/_nav.scss b/sass/_nav.scss index 181dc28..e467501 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -33,8 +33,7 @@ a { position: relative; - transition-duration: var(--transition); - transition-property: box-shadow, background-color, color, transform; + transition: var(--transition); border-radius: 999px; padding: 0.325rem 0.75rem; color: var(--fg-muted-4); @@ -58,8 +57,7 @@ top: -0.5rem; right: 1.5rem; left: 1.5rem; - transition-duration: var(--transition); - transition-property: right, left, border-bottom, border-radius; + transition: var(--transition); border-bottom: 0.25rem solid var(--fg-muted-2); border-radius: 0 0 0.25rem 0.25rem; content: ""; @@ -82,8 +80,7 @@ transform: translateY(-100%); opacity: 0; z-index: 999; - transition-duration: var(--transition); - transition-property: transform, opacity; + transition: var(--transition); background: var(--bg-color), var(--primary-color); pointer-events: none; @@ -129,7 +126,7 @@ -webkit-mask-image: $icon; vertical-align: -0.125em; mask-image: $icon; - transition: background-color var(--transition); + transition: var(--transition); background-color: var(--fg-muted-4); width: 1rem; height: 1rem; diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index 3863f1d..33022bc 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -27,7 +27,7 @@ } .post-title { - transition: color var(--transition); + transition: var(--transition); color: var(--fg-color); } } diff --git a/sass/_tags.scss b/sass/_tags.scss index 4bb7ed4..6bc48b4 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -5,7 +5,7 @@ li { display: inline-block; - transition: transform var(--transition); + transition: var(--transition); margin: 0 0.25rem 0.5rem 0; &:active { @@ -14,8 +14,7 @@ } .tag { - transition-duration: var(--transition); - transition-property: background-color, color; + transition: var(--transition); box-shadow: var(--edge-highlight); border-radius: 999px; background-color: var(--fg-muted-1); diff --git a/sass/_typography.scss b/sass/_typography.scss index c5f24ac..93d6adb 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -60,8 +60,7 @@ mark { kbd { display: inline-block; - transition-duration: var(--transition); - transition-property: transform, box-shadow, background-color; + transition: var(--transition); 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/_zola-anchor.scss b/sass/_zola-anchor.scss index e00ad6a..0b34140 100644 --- a/sass/_zola-anchor.scss +++ b/sass/_zola-anchor.scss @@ -11,7 +11,7 @@ h6 { .zola-anchor { opacity: 0; - transition: opacity var(--transition); + transition: var(--transition); margin: 0 0.25em; &:hover .icon { @@ -24,7 +24,7 @@ h6 { -webkit-mask-size: cover; mask-image: $icon; mask-size: cover; - transition: background-color var(--transition); + transition: var(--transition); background-color: var(--fg-muted-4); width: 1em; height: 1em;