baalajimaestro/littlelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Stack Overflow + Tweaks

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

24
css/brands.css
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;

11
images/icons/stack-overflow.svg Normal file
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>
Side by side

After

Width:  |  Height:  |  Size: 779 B

7
index.html
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>