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

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)

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;

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

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

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;

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

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;

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

sass/_post-nav.scss

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

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

sass/_variables.scss

@@ -38,10 +38,12 @@
 	--transition: 0.2s;
 
 	@media (prefers-reduced-motion) {
-		// VARIABLES
+		*,
-		--transition-long: 0;
+		*::before,
-		--transition-longer: 0;
+		*::after {
-		--transition: 0;
+			animation: none !important;
+			transition: none !important;
+		}
 	}
 
 	@media (prefers-color-scheme: dark) {