From ae5e73d51e1b892d462bccff51d97ce4435bae80 Mon Sep 17 00:00:00 2001
From: Seth Cottle <SethCottle@gmail.com>
Date: Mon, 1 May 2023 12:13:53 -0400
Subject: [PATCH] Auto Resize Button Height + Focus States

Button height will now auto adjust when there is a line break to help account for localization. Link colors will now properly change when using `skeleton-auto.css` to be more accessible colors when in dark or light theme. Focus states will now appear for `pressed` and keyboard navigation for accessibility improvements.
---
 css/brands.css        | 13 ++++++++-----
 css/skeleton-auto.css | 20 +++++++++++++++++++-
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/css/brands.css b/css/brands.css
index 93bfa4e..a73b54e 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -33,23 +33,26 @@
 button {
   display: inline-block;
   text-decoration: none;
-  height: 48px;
+  height: 100%;
   text-align: center;
   vertical-align: middle;
   font-size: 18px;
   width: 300px;
   font-weight: 700;
-  line-height: 48px;
+  line-height: 20px;
+  padding: 14px 12px 12px 12px;
   letter-spacing: 0.1px;
   white-space: wrap;
+  outline: none;
   border-radius: 8px;
   cursor: pointer;
-}
+  
+}     
 button:hover,
 .button:focus {
-  color: #333;
+  color: #212121;
   border-color: #888;
-  outline: 0;
+  outline: #7AB8FF solid 3px
 }
 .button.button-primary {
   color: #fff;
diff --git a/css/skeleton-auto.css b/css/skeleton-auto.css
index 6226e24..56f49cb 100644
--- a/css/skeleton-auto.css
+++ b/css/skeleton-auto.css
@@ -125,11 +125,29 @@ p {
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 a {
-  color: #4899F7;
+  color: #2457F5;
+}
+a:hover {
+  color: #083BDA; 
+}
+a:focus {
+  outline: #7AB8FF solid 2px;
+  border-radius: 2px;
+}         
+
+/* Link Color Dark Theme */
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #4899F7;
 }
 a:hover {
   color: #7AB8FF;
 }
+a:focus {
+  outline: #7AB8FF solid 2px;
+  border-radius: 2px;
+}
+}
 
 /* Code
 –––––––––––––––––––––––––––––––––––––––––––––––––– */