From 18d46bd04d17866846edc7ef4951c39e48e624cb Mon Sep 17 00:00:00 2001
From: Seth Cottle <SethCottle@gmail.com>
Date: Mon, 4 Mar 2024 10:41:31 -0500
Subject: [PATCH] Stack Overflow + Tweaks

Added Stack Overflow, renamed Steam Dark to Steam Alt to match the defined pattern we're already using for alternate buttons. Added stroke for accessibility.
---
 css/brands.css                  | 24 ++++++++++++++++++------
 images/icons/stack-overflow.svg | 11 +++++++++++
 index.html                      |  7 +++++--
 3 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 images/icons/stack-overflow.svg

diff --git a/css/brands.css b/css/brands.css
index 3e2eeea..3bc142c 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -884,13 +884,14 @@ button:hover,
   filter: brightness(90%);
 }
 
-/* Steam Dark */
-.button.button-steam-dark {
-  color: #ffffff;
-  background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
+/* Stack Overflow */
+.button.button-stack-overflow {
+  color: #000000;
+  background-color: #FFFFFF;
+  border: 1px solid #000000;
 }
-.button.button-steam-dark:hover,
-.button.button-steam-dark:focus {
+.button.button-stack-overflow:hover,
+.button.button-stack-overflow:focus {
   filter: brightness(90%);
 }
 
@@ -904,6 +905,17 @@ button:hover,
   filter: brightness(90%);
 }
 
+/* Steam Alt */
+.button.button-steam-alt {
+  color: #ffffff;
+  background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
+  border: 1px solid #FFFFFF;
+}
+.button.button-steam-alt:hover,
+.button.button-steam-alt:focus {
+  filter: brightness(90%);
+}
+
 /* Strava */
 .button.button-strava {
   color: #ffffff;
diff --git a/images/icons/stack-overflow.svg b/images/icons/stack-overflow.svg
new file mode 100644
index 0000000..e548a79
--- /dev/null
+++ b/images/icons/stack-overflow.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4003_8711)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9487 15.4707H21.081V24H1.89001V15.4707H4.02235V21.8677H18.9487V15.4707Z" fill="#BBBBBB"/>
+<path d="M6.34616 14.8368L16.8188 17.0379L17.2591 14.9444L6.78639 12.7422L6.34616 14.8368ZM7.73199 9.82211L17.4333 14.3403L18.3371 12.4001L8.63552 7.88188L7.73199 9.82211ZM10.4164 5.06255L18.641 11.9114L20.0107 10.2666L11.7861 3.41794L10.4164 5.06255ZM15.7253 0L14.0078 1.27746L20.3948 9.86495L22.1123 8.58769L15.7253 0ZM6.15466 19.7353H16.8163V17.603H6.15466V19.7353Z" fill="#F58025"/>
+</g>
+<defs>
+<clipPath id="clip0_4003_8711">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/index.html b/index.html
index 0394e47..35c2bc8 100644
--- a/index.html
+++ b/index.html
@@ -325,12 +325,15 @@
         <!-- Square -->
         <a class="button button-square" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/square.svg" alt="">Buy with Square</a><br>
 
-        <!-- Steam Dark -->
-        <a class="button button-steam-dark" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
+        <!-- Stack Overflow -->
+        <a class="button button-stack-overflow" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/stack-overflow.svg" alt="">Stack Overflow</a><br>
 
         <!-- Steam -->
         <a class="button button-steam" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
 
+        <!-- Steam Alt -->
+        <a class="button button-steam-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/steam.svg" alt="">Steam</a><br>
+
         <!-- Strava -->
         <a class="button button-strava" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/strava.svg" alt="">Strava</a><br>