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

Get rid of overcomplicated transition properties

Browse Source 
Not a single time this been useful, quite the opposite; it was very
annoying
This commit is contained in:
daudix
2024-06-15 02:18:13 +03:00
parent 5aa00a628b
commit 018fcf813c
12 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
sass/_article-list.scss
View File

@ -5,8 +5,7 @@
&.draft { &.draft {
transform: scale(0.95); transform: scale(0.95);
opacity: 0.6; opacity: 0.6;
transition-duration: var(--transition-longer); transition: var(--transition-longer);
transition-property: transform, opacity, outline, outline-offset;
outline: 2px dashed var(--fg-muted-2); outline: 2px dashed var(--fg-muted-2);
outline-offset: 1rem; outline-offset: 1rem;
border-radius: 1rem; border-radius: 1rem;

3
sass/_buttons.scss
View File

@ -8,8 +8,7 @@
.inline-button { .inline-button {
display: inline-block; display: inline-block;
transition-duration: var(--transition); transition: var(--transition);
transition-property: background-color, transform, box-shadow;
cursor: pointer; cursor: pointer;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);

8
sass/_comments.scss
View File

@ -44,7 +44,7 @@ section#comments {
height: 4rem; height: 4rem;
.avatar { .avatar {
transition-duration: var(--transition); transition: var(--transition);
margin: 0; margin: 0;
background-size: cover; background-size: cover;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
@ -68,8 +68,7 @@ section#comments {
font-weight: bold; font-weight: bold;
.instance { .instance {
transition-duration: var(--transition); transition: var(--transition);
transition-property: background-color, transform, box-shadow;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 999px; border-radius: 999px;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
@ -134,8 +133,7 @@ section#comments {
.boosts, .boosts,
.faves { .faves {
display: inline-block; display: inline-block;
transition-duration: var(--transition); transition: var(--transition);
transition-property: box-shadow, transform, background-color;
margin-right: 0.25rem; margin-right: 0.25rem;
border-radius: 999px; border-radius: 999px;
background-color: transparent; background-color: transparent;

5
sass/_containers.scss
View File

@ -13,8 +13,7 @@
top: 0.5rem; top: 0.5rem;
right: 0.5rem; right: 0.5rem;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
transition-duration: var(--transition); transition: var(--transition);
transition-property: background-color, transform;
cursor: pointer; cursor: pointer;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border: none; 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"); $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; -webkit-mask-image: $icon;
mask-image: $icon; mask-image: $icon;
transition: background-color var(--transition); transition: var(--transition);
background-color: var(--fg-muted-4); background-color: var(--fg-muted-4);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

5
sass/_footer.scss
View File

@ -45,8 +45,7 @@
a { a {
display: inline-flex; display: inline-flex;
transition-duration: var(--transition); transition: var(--transition);
transition-property: box-shadow, background-color, transform;
border-radius: 999px; border-radius: 999px;
padding: 0.5rem; padding: 0.5rem;
@ -64,7 +63,7 @@
} }
.icon { .icon {
transition: background-color var(--transition); transition: var(--transition);
background-color: var(--fg-muted-4); background-color: var(--fg-muted-4);
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

6
sass/_input.scss
View File

@ -3,8 +3,7 @@ input[type="checkbox"] {
-webkit-appearance: none; -webkit-appearance: none;
position: relative; position: relative;
appearance: none; appearance: none;
transition-duration: var(--transition); transition: var(--transition);
transition-property: border, background-color;
border: 0.15rem solid var(--fg-muted-3); border: 0.15rem solid var(--fg-muted-3);
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
width: 1rem; width: 1rem;
@ -15,8 +14,7 @@ input[type="checkbox"] {
position: absolute; position: absolute;
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
transition-duration: var(--transition); transition: var(--transition);
transition-property: transform, opacity;
background-color: white; background-color: white;
content: ""; content: "";
} }

3
sass/_media.scss
View File

@ -1,6 +1,5 @@
img { img {
transition-duration: var(--transition-longer); transition: var(--transition-longer);
transition-property: transform, box-shadow, border-radius;
&:not(.no-hover, &[src*="#no-hover"]) { &:not(.no-hover, &[src*="#no-hover"]) {
cursor: zoom-in; cursor: zoom-in;

11
sass/_nav.scss
View File

@ -33,8 +33,7 @@
a { a {
position: relative; position: relative;
transition-duration: var(--transition); transition: var(--transition);
transition-property: box-shadow, background-color, color, transform;
border-radius: 999px; border-radius: 999px;
padding: 0.325rem 0.75rem; padding: 0.325rem 0.75rem;
color: var(--fg-muted-4); color: var(--fg-muted-4);
@ -58,8 +57,7 @@
top: -0.5rem; top: -0.5rem;
right: 1.5rem; right: 1.5rem;
left: 1.5rem; left: 1.5rem;
transition-duration: var(--transition); transition: var(--transition);
transition-property: right, left, border-bottom, border-radius;
border-bottom: 0.25rem solid var(--fg-muted-2); border-bottom: 0.25rem solid var(--fg-muted-2);
border-radius: 0 0 0.25rem 0.25rem; border-radius: 0 0 0.25rem 0.25rem;
content: ""; content: "";
@ -82,8 +80,7 @@
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
z-index: 999; z-index: 999;
transition-duration: var(--transition); transition: var(--transition);
transition-property: transform, opacity;
background: var(--bg-color), var(--primary-color); background: var(--bg-color), var(--primary-color);
pointer-events: none; pointer-events: none;
@ -129,7 +126,7 @@
-webkit-mask-image: $icon; -webkit-mask-image: $icon;
vertical-align: -0.125em; vertical-align: -0.125em;
mask-image: $icon; mask-image: $icon;
transition: background-color var(--transition); transition: var(--transition);
background-color: var(--fg-muted-4); background-color: var(--fg-muted-4);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

2
sass/_post-nav.scss
View File

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

5
sass/_tags.scss
View File

@ -5,7 +5,7 @@
li { li {
display: inline-block; display: inline-block;
transition: transform var(--transition); transition: var(--transition);
margin: 0 0.25rem 0.5rem 0; margin: 0 0.25rem 0.5rem 0;
&:active { &:active {
@ -14,8 +14,7 @@
} }
.tag { .tag {
transition-duration: var(--transition); transition: var(--transition);
transition-property: background-color, color;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 999px; border-radius: 999px;
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);

3
sass/_typography.scss
View File

@ -60,8 +60,7 @@ mark {
kbd { kbd {
display: inline-block; display: inline-block;
transition-duration: var(--transition); transition: var(--transition);
transition-property: transform, box-shadow, background-color;
cursor: pointer; cursor: pointer;
box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3);
border-radius: var(--rounded-corner-small); border-radius: var(--rounded-corner-small);

4
sass/_zola-anchor.scss
View File

@ -11,7 +11,7 @@ h6 {
.zola-anchor { .zola-anchor {
opacity: 0; opacity: 0;
transition: opacity var(--transition); transition: var(--transition);
margin: 0 0.25em; margin: 0 0.25em;
&:hover .icon { &:hover .icon {
@ -24,7 +24,7 @@ h6 {
-webkit-mask-size: cover; -webkit-mask-size: cover;
mask-image: $icon; mask-image: $icon;
mask-size: cover; mask-size: cover;
transition: background-color var(--transition); transition: var(--transition);
background-color: var(--fg-muted-4); background-color: var(--fg-muted-4);
width: 1em; width: 1em;
height: 1em; height: 1em;