Fix #3785

jgthms · Apr 17, 2024 · fb1dc09 · fb1dc09
1 parent a38cd56
commit fb1dc09
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/docs/_sass/home/amis.scss b/docs/_sass/home/amis.scss
@@ -5,27 +5,35 @@
   background-color: cv.getVar("scheme-main");
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  row-gap: 0.5rem;
+  gap: 0;
   position: relative;
   margin: 0 -1rem;
   justify-content: center;
 }
 
 .bd-ami {
+  background-color: var(--color);
   display: inline-flex;
   align-items: center;
-  border-radius: 0.25rem;
   justify-content: center;
   padding: 0.75rem;
   height: 5rem;
+  position: relative;
   vertical-align: top;
-  mix-blend-mode: luminosity;
   transition-duration: cv.getVar("duration");
-  transition-property: background-color, mix-blend-mode;
+  transition-property: background-color, transform;
+  transform-origin: center;
 
   &:hover {
-    background-color: var(--color);
-    mix-blend-mode: normal;
+    border-radius: 0.5rem;
+    transform: scale(1.2);
+    z-index: 1;
+    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
+  }
+
+  &:active {
+    transform: scale(1.15);
+    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -39,7 +47,6 @@
 .bd-ami-footer {
   border-radius: 0.25rem;
   height: 4rem;
-  mix-blend-mode: normal;
 }
 
 .bd-ami-footer img {

diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css
@@ -34429,27 +34429,34 @@ has-background-moon.is-hoverable:active {
   background-color: var(--bulma-scheme-main);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  row-gap: 0.5rem;
+  gap: 0;
   position: relative;
   margin: 0 -1rem;
   justify-content: center;
 }
 
 .bd-ami {
+  background-color: var(--color);
   display: inline-flex;
   align-items: center;
-  border-radius: 0.25rem;
   justify-content: center;
   padding: 0.75rem;
   height: 5rem;
+  position: relative;
   vertical-align: top;
-  mix-blend-mode: luminosity;
   transition-duration: var(--bulma-duration);
-  transition-property: background-color, mix-blend-mode;
+  transition-property: background-color, transform;
+  transform-origin: center;
 }
 .bd-ami:hover {
-  background-color: var(--color);
-  mix-blend-mode: normal;
+  border-radius: 0.5rem;
+  transform: scale(1.2);
+  z-index: 1;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
+}
+.bd-ami:active {
+  transform: scale(1.15);
+  box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
 }
 
 .bd-ami img {
@@ -34462,7 +34469,6 @@ has-background-moon.is-hoverable:active {
 .bd-ami-footer {
   border-radius: 0.25rem;
   height: 4rem;
-  mix-blend-mode: normal;
 }
 
 .bd-ami-footer img {

diff --git a/docs/assets/css/website.min.css b/docs/assets/css/website.min.css
diff --git a/docs/assets/javascript/home.js b/docs/assets/javascript/home.js
@@ -52,7 +52,7 @@ document.addEventListener("DOMContentLoaded", () => {
       circle: "b",
     },
     skeletons: {
-      startAngle: 0,
+      startAngle: -300,
       circle: "b",
     },
     dark: {
@@ -112,12 +112,20 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 
   const $dots = document.querySelectorAll(".js-dot");
+  const reducedMotion =
+    window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
+    window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
 
   $dots.forEach(($dot) => {
     const id = $dot.dataset.id;
-    setInterval(() => {
+
+    if (reducedMotion) {
       animate($dot, id);
-    }, 10);
+    } else {
+      setInterval(() => {
+        animate($dot, id);
+      }, 10);
+    }
   });
 
   // Grid