hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Only target needed elements for transitioning, more fail-proof reduced motion setting

Browse Source
This commit is contained in:
David Lapshin
2024-05-09 23:32:09 +03:00
parent 1f7dab1f59
commit b7b95e6653
11 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_article-list.scss
View File

@ -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;

3
sass/_buttons.scss
View File

@ -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);

13
sass/_comments.scss
View File

@ -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;
}

5
sass/_footer.scss
View File

@ -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;

8
sass/_main.scss
View File

@ -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);

3
sass/_media.scss
View File

@ -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;

3
sass/_nav.scss
View File

@ -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);

2
sass/_post-nav.scss
View File

@ -27,7 +27,7 @@
}
.post-title {
transition: var(--transition);
transition: color var(--transition);
color: var(--fg-color);
}
}

5
sass/_tags.scss
View File

@ -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);

10
sass/_variables.scss
View File

@ -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) {