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

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