Styling glossary buttons to match dashboard buttons

WebDevStudios · May 20, 2024 · 28562b6 · 28562b6
1 parent cf3498d
commit 28562b6
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/style.css b/style.css
@@ -15,25 +15,36 @@
     margin-bottom: 2rem;
 }
 
-.wds-site-glossary-page .back-to-glossary-link {
-    color: #000;
-    background: rgba(5, 6, 15, .05);
+.wds-site-glossary-page .back-to-glossary-link,
+.wds-site-glossary-page .back-to-glossary-link:hover,
+.wds-site-glossary-page .back-to-glossary-link:active,
+.wds-site-glossary-page .back-to-glossary-link:focus {
+    color: #fff;
+    background: #f3713c;
     border: none;
-    font-weight: 700;
 }
 
-.wds-site-glossary-page .back-to-glossary-link:hover {
-    color: #000;
-    background: rgba(5, 6, 15, .1);
+.wds-site-glossary-page .back-to-glossary-link:hover,
+.wds-site-glossary-page .back-to-glossary-link:active,
+.wds-site-glossary-page .back-to-glossary-link:focus {
+    box-shadow: 0 0 0 1px rgba(5, 6, 15, .05);
 }
 
 .wds-site-glossary-page .alphabet-links {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: flex-start;
     align-items: center;
     margin-bottom: 2rem;
 }
 
+@media screen and (min-width: 768px) {
+    .wds-site-glossary-page .alphabet-links {
+        justify-content: space-between;
+    }
+
+}
+
 .wds-site-glossary-page .alphabet-links a {
     color: #000;
     text-decoration: none;
@@ -48,8 +59,7 @@
     background: rgba(5, 6, 15, .05);
 }
 
-.wds-site-glossary-page .alphabet-links a:focus,
-.wds-site-glossary-page .back-to-glossary-link:focus {
+.wds-site-glossary-page .alphabet-links a:focus {
     color: #000;
     box-shadow: 0 0 0 1px rgb(5, 6, 15), 0 0 2px 1px rgba(5, 6, 15, .05);
 }