️ New Brands

- Added CSS for SoundCloud & Spectrum.
- Added SVG icons for SoundCloud & Spectrum.
- Added example buttons to index.html.
- Fixed typo on README.md.
This commit is contained in:
Seth Cottle 2019-12-22 22:04:37 -05:00
parent 899971780b
commit 5b9ff2057d
5 changed files with 32 additions and 1 deletions

View file

@ -11,7 +11,7 @@ LittleLink has more than 18 company button styles you can use and we'll be throw
![Performance](https://cdn.cottle.cloud/littlelink/performance.png) ![Performance](https://cdn.cottle.cloud/littlelink/performance.png)
Using [Skeleton](http://getskeleton.com/) let us build something that loads quickly & doesn't have any of the unnecessary bloat you would get from using a large framework for requires simplicity. LittleLink scored a 99/100 in performance when tested with Lighthouse. Using [Skeleton](http://getskeleton.com/) let us build something that loads quickly & doesn't have any of the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity. LittleLink scored a 99/100 in performance when tested with Lighthouse.
![Publish](https://cdn.cottle.cloud/littlelink/fork-edit-publish.png) ![Publish](https://cdn.cottle.cloud/littlelink/fork-edit-publish.png)

View file

@ -173,6 +173,22 @@ button:hover,
.button.button-snapchat:focus { .button.button-snapchat:focus {
filter: brightness(90%) } filter: brightness(90%) }
/* SoundCloud */
.button.button-soundcloud {
color: #FFFFFF;
background-color: #ff5500 }
.button.button-soundcloud:hover,
.button.button-soundcloud:focus {
filter: brightness(90%) }
/* Spectrum */
.button.button-spectrum {
color: #FFFFFF;
background-color: #7b16ff }
.button.button-spectrum:hover,
.button.button-spectrum:focus {
filter: brightness(90%) }
/* Spotify */ /* Spotify */
.button.button-spotify { .button.button-spotify {
color: #FFFFFF; color: #FFFFFF;

2
icons/soundcloud.svg Normal file
View file

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" data-prefix="littlelink" data-icon="soundcloud" class="svg-inline soundcloud" role="img" viewBox="0 0 640 512">
<path fill="#FFFFFF" d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2.8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1.6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7.6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3.1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"/></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

5
icons/spectrum.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg">
<g id="logo">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" fill="#FFFFFF"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 390 B

View file

@ -92,6 +92,14 @@
<a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Pinterest</a> <a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Pinterest</a>
<br> <br>
<!-- SoundCloud -->
<a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a>
<br>
<!-- Spectrum -->
<a class="button button-spectrum" href="#"><img class="icon" src="icons/spectrum.svg">Spectrum</a>
<br>
<!-- Figma --> <!-- Figma -->
<a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a> <a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a>
<br> <br>