From 5b9ff2057da620d82e9fdb29aeefaa8e0502ba2c Mon Sep 17 00:00:00 2001
From: Seth Cottle <SethCottle@gmail.com>
Date: Sun, 22 Dec 2019 22:04:37 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20New=20Brands?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added CSS for SoundCloud & Spectrum.
- Added SVG icons for SoundCloud & Spectrum.
- Added example buttons to index.html.
- Fixed typo on README.md.
---
 README.md            |  2 +-
 css/brands.css       | 16 ++++++++++++++++
 icons/soundcloud.svg |  2 ++
 icons/spectrum.svg   |  5 +++++
 index.html           |  8 ++++++++
 5 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 icons/soundcloud.svg
 create mode 100644 icons/spectrum.svg

diff --git a/README.md b/README.md
index ff37580..9a13c96 100644
--- a/README.md
+++ b/README.md
@@ -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)
 
-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)
 
diff --git a/css/brands.css b/css/brands.css
index 2fa0bd3..dde0cf4 100644
--- a/css/brands.css
+++ b/css/brands.css
@@ -173,6 +173,22 @@ button:hover,
 .button.button-snapchat:focus {
   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 */
 .button.button-spotify {
   color: #FFFFFF;
diff --git a/icons/soundcloud.svg b/icons/soundcloud.svg
new file mode 100644
index 0000000..1f428ad
--- /dev/null
+++ b/icons/soundcloud.svg
@@ -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>
\ No newline at end of file
diff --git a/icons/spectrum.svg b/icons/spectrum.svg
new file mode 100644
index 0000000..7875b8d
--- /dev/null
+++ b/icons/spectrum.svg
@@ -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>
diff --git a/index.html b/index.html
index efe8cdf..fa599e9 100644
--- a/index.html
+++ b/index.html
@@ -92,6 +92,14 @@
         <a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Pinterest</a>
           <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 -->
         <a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a>
           <br>