feat: hover, focus, and active style improvements

inclusive-design · Jun 21, 2023 · c9c8b12 · c9c8b12
1 parent 2f87ced
commit c9c8b12
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/src/assets/styles/base/_base.scss b/src/assets/styles/base/_base.scss
@@ -28,13 +28,39 @@ a {
   text-decoration: underline;
 }
 
-a:hover,
-a:focus {
-  background: var(--fl-linkColor, var(--accent, var(--yellow-500)));
-  color: var(--fl-bgColor, currentColor);
-  outline: none;
+main,
+footer {
+  a {
+    border-radius: 5px;
+  }
+
+  a:hover,
+  a:focus,
+  a:active {
+    outline-style: solid;
+    outline-width: 4px;
+  }
+
+  a:hover {
+    color: var(--fl-bgColor, currentColor);
+    background: var(--fl-linkColor, var(--accent, var(--yellow-500))) !important;
+    outline-color: var(--fl-linkColor, var(--accent, var(--yellow-500)));
+  }
+
+  a:focus {
+    outline-color: var(--fl-linkColor, var(--indigo-800));
+    outline-offset: 2px;
+    outline-width: 2px;
+  }
+
+  a:active {
+    color: var(--fl-bgColor, var(--white));
+    background: var(--fl-linkColor, var(--indigo-800));
+    outline-color: var(--fl-linkColor, var(--indigo-800));
+  }
 }
 
+
 a[hreflang],
 a[download],
 a[rel='external'] {

diff --git a/src/assets/styles/pages/_home.scss b/src/assets/styles/pages/_home.scss
@@ -35,6 +35,10 @@
   }
 }
 
+#what-is-inclusive-design + * {
+  z-index: 1;
+}
+
 .page--home .entry + .entry {
   margin-top: rem(24);
 }