Fix some button stuff

Rupali59 · Apr 25, 2023 · 539cef0 · 539cef0
1 parent dcf5728
commit 539cef0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/src/components/nav.js b/src/components/nav.js
@@ -77,16 +77,20 @@ const StyledNav = styled.nav`
         top: 0;
         left: 0;
         z-index: -1;
-        transition: var(--transition);
+        @media (prefers-reduced-motion: no-preference) {
+          transition: var(--transition);
+        }
       }
 
       .logo-container {
         position: relative;
         z-index: 1;
         svg {
           fill: none;
-          transition: var(--transition);
           user-select: none;
+          @media (prefers-reduced-motion: no-preference) {
+            transition: var(--transition);
+          }
           polygon {
             fill: var(--navy);
           }

diff --git a/src/styles/GlobalStyle.js b/src/styles/GlobalStyle.js
@@ -370,8 +370,8 @@ const GlobalStyle = createGlobalStyle`
     overflow: hidden;
     z-index: -99;
 
-    &:focus,
-    &:active {
+    &:hover,
+    &:focus {
       background-color: var(--green);
       color: var(--navy);
       top: 0;
@@ -380,6 +380,8 @@ const GlobalStyle = createGlobalStyle`
       height: auto;
       overflow: auto;
       z-index: 99;
+      box-shadow: none;
+      transform: none;
     }
   }
 

diff --git a/src/styles/mixins.js b/src/styles/mixins.js
@@ -9,13 +9,11 @@ const button = css`
   font-family: var(--font-mono);
   line-height: 1;
   text-decoration: none;
-  cursor: pointer;
-  transition: var(--transition);
   padding: 1.25rem 1.75rem;
+  transition: var(--transition);
 
   &:hover,
-  &:focus,
-  &:active {
+  &:focus-visible {
     outline: none;
     box-shadow: 4px 4px 0 0 var(--green);
     transform: translate(-5px, -5px);
@@ -45,24 +43,22 @@ const mixins = {
     color: inherit;
     position: relative;
     transition: var(--transition);
+
     &:hover,
-    &:active,
-    &:focus {
+    &:focus-visible {
       color: var(--green);
       outline: 0;
     }
   `,
 
   inlineLink: css`
     display: inline-block;
-    text-decoration: none;
-    text-decoration-skip-ink: auto;
     position: relative;
-    transition: var(--transition);
     color: var(--green);
+    transition: var(--transition);
+
     &:hover,
-    &:focus,
-    &:active {
+    &:focus-visible {
       color: var(--green);
       outline: 0;
       &:after {
@@ -81,8 +77,10 @@ const mixins = {
       position: relative;
       bottom: 0.37em;
       background-color: var(--green);
-      transition: var(--transition);
       opacity: 0.5;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: var(--transition);
+      }
     }
   `,
 
@@ -98,11 +96,10 @@ const mixins = {
     font-family: var(--font-mono);
     line-height: 1;
     text-decoration: none;
-    cursor: pointer;
     transition: var(--transition);
+
     &:hover,
-    &:focus,
-    &:active {
+    &:focus-visible {
       outline: none;
       box-shadow: 3px 3px 0 0 var(--green);
       transform: translate(-4px, -4px);
@@ -122,11 +119,10 @@ const mixins = {
     font-family: var(--font-mono);
     line-height: 1;
     text-decoration: none;
-    cursor: pointer;
     transition: var(--transition);
+
     &:hover,
-    &:focus,
-    &:active {
+    &:focus-visible {
       outline: none;
       box-shadow: 4px 4px 0 0 var(--green);
       transform: translate(-5px, -5px);
@@ -141,7 +137,7 @@ const mixins = {
     transition: var(--transition);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       box-shadow: 0 20px 30px -15px var(--navy-shadow);
     }
   `,