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.
This commit is contained in:
Seth Cottle 2024-03-04 10:41:31 -05:00
parent 4b55e9b85f
commit 18d46bd04d
3 changed files with 34 additions and 8 deletions

View file

@ -884,13 +884,14 @@ button:hover,
filter: brightness(90%); filter: brightness(90%);
} }
/* Steam Dark */ /* Stack Overflow */
.button.button-steam-dark { .button.button-stack-overflow {
color: #ffffff; color: #000000;
background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085); background-color: #FFFFFF;
border: 1px solid #000000;
} }
.button.button-steam-dark:hover, .button.button-stack-overflow:hover,
.button.button-steam-dark:focus { .button.button-stack-overflow:focus {
filter: brightness(90%); filter: brightness(90%);
} }
@ -904,6 +905,17 @@ button:hover,
filter: brightness(90%); 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 */ /* Strava */
.button.button-strava { .button.button-strava {
color: #ffffff; color: #ffffff;

View file

@ -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>

After

Width:  |  Height:  |  Size: 779 B

View file

@ -325,12 +325,15 @@
<!-- Square --> <!-- 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> <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 --> <!-- Stack Overflow -->
<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> <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 --> <!-- 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> <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 --> <!-- 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> <a class="button button-strava" href="#" target="_blank" rel="noopener" role="button"><img class="icon" src="images/icons/strava.svg" alt="">Strava</a><br>