From 29c56f051b69902c5a2288344ce19a7e46053f25 Mon Sep 17 00:00:00 2001
From: Dan Leech <hi@danleech.com>
Date: Mon, 19 Dec 2016 19:42:25 +0000
Subject: [PATCH] Makes some minor changes to the sidebar

---
 404.html        | 40 ++++++++++++++++++++++------------------
 index.html      | 40 ++++++++++++++++++++++------------------
 src/header.html | 40 ++++++++++++++++++++++------------------
 3 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/404.html b/404.html
index 325f200e..85850892 100644
--- a/404.html
+++ b/404.html
@@ -32,7 +32,7 @@
         }
         body {
             background-color: #FFF;
-            color: #666;
+            color: #757575;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
             -webkit-font-feature-settings: "dlig", "kern", "liga";
                     font-feature-settings: "dlig", "kern", "liga";
@@ -43,10 +43,13 @@
             -moz-osx-font-smoothing: grayscale;
         }
         a {
-            color: #333;
+            color: #424242;
         }
         a:focus, a:hover {
-            color: #999;
+            color: #BDBDBD;
+        }
+        p {
+            margin: 1.5rem 0 0;
         }
         .navbar {
             font-size: 0.75rem;
@@ -61,8 +64,7 @@
             text-transform: uppercase;
         }
         .button {
-            background-color: #6C6;
-            border-bottom: 0.125rem solid rgba(0,0,0,0.25);
+            background-color: #00C853;
             border-radius: 0.125rem;
             color: #FFF;
             display: block;
@@ -72,18 +74,17 @@
             text-decoration: none;
         }
         .button:focus, .button:hover {
-            background-color: #5B5;
+            background-color: #00E676;
             color: #FFF;
         }
-        .button:active {
-            border-bottom: 0.125rem solid rgba(0,0,0,0);
-            transform: translateY(0.125rem);
+        .button--primary {
+            margin-bottom: 0.375rem;
         }
         .button--secondary {
-            background-color: #999;
+            background-color: #0091EA;
         }
         .button--secondary:focus, .button--secondary:hover {
-            background-color: #888;
+            background-color: #00B0FF;
         }
         .search-field {
             -webkit-appearance: none;
@@ -94,7 +95,7 @@
             border: none;
             border-bottom: 1px solid #EEE;
             box-sizing: border-box;
-            color: #999;
+            color: #BDBDBD;
             display: block;
             font-family: inherit;
             font-size: 1rem;
@@ -116,7 +117,7 @@
         }
         .tiles li {
             box-sizing: border-box;
-            background: #333;
+            background: #424242;
             border: 0.25rem solid #FFF;
             color: #FFF;
             font-size: 0.8125rem;
@@ -127,11 +128,11 @@
         }
         .tiles ::selection {
             background: #FFF;
-            color: #333;
+            color: #424242;
         }
         .tiles ::-moz-selection {
             background: #FFF;
-            color: #333;
+            color: #424242;
         }
         .tiles li:hover {
             border: 0.125rem solid #FFF;
@@ -246,7 +247,7 @@
             width: calc(100% - 130px - 0.75rem);
         }
         .carbon-poweredby {
-            color: #AAA;
+            color: #BDBDBD;
             display: block;
             margin: 0.25rem 0 0;
             text-align: center;
@@ -273,8 +274,11 @@
             <h1 class="title">Simple Icons</h1>
             <input type="text" id="search" class="search-field" autofocus>
             <p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p>
-            <p><a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button">Download</a></p>
-            <p><a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a></p>
+            <p>
+                <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button button--primary">Download</a>
+                <a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a>
+            </p>
+            <p><a href="https://twitter.com/intent/tweet?text=This%20free%20set%20of%20SVG%20icons%20for%20popular%20brands%20is%20a%20great%20web%20design%20resource!&url=https%3A%2F%2Fsimpleicons.org&via=bathtype&hashtags=icons,svg,webdesign" target="_blank">Sharing this page on Twitter</a> will help bring in new users and new requests that will help this icon set grow!</p>
         </div>
         <div class="block block--ad">
             <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>
diff --git a/index.html b/index.html
index 325f200e..85850892 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
         }
         body {
             background-color: #FFF;
-            color: #666;
+            color: #757575;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
             -webkit-font-feature-settings: "dlig", "kern", "liga";
                     font-feature-settings: "dlig", "kern", "liga";
@@ -43,10 +43,13 @@
             -moz-osx-font-smoothing: grayscale;
         }
         a {
-            color: #333;
+            color: #424242;
         }
         a:focus, a:hover {
-            color: #999;
+            color: #BDBDBD;
+        }
+        p {
+            margin: 1.5rem 0 0;
         }
         .navbar {
             font-size: 0.75rem;
@@ -61,8 +64,7 @@
             text-transform: uppercase;
         }
         .button {
-            background-color: #6C6;
-            border-bottom: 0.125rem solid rgba(0,0,0,0.25);
+            background-color: #00C853;
             border-radius: 0.125rem;
             color: #FFF;
             display: block;
@@ -72,18 +74,17 @@
             text-decoration: none;
         }
         .button:focus, .button:hover {
-            background-color: #5B5;
+            background-color: #00E676;
             color: #FFF;
         }
-        .button:active {
-            border-bottom: 0.125rem solid rgba(0,0,0,0);
-            transform: translateY(0.125rem);
+        .button--primary {
+            margin-bottom: 0.375rem;
         }
         .button--secondary {
-            background-color: #999;
+            background-color: #0091EA;
         }
         .button--secondary:focus, .button--secondary:hover {
-            background-color: #888;
+            background-color: #00B0FF;
         }
         .search-field {
             -webkit-appearance: none;
@@ -94,7 +95,7 @@
             border: none;
             border-bottom: 1px solid #EEE;
             box-sizing: border-box;
-            color: #999;
+            color: #BDBDBD;
             display: block;
             font-family: inherit;
             font-size: 1rem;
@@ -116,7 +117,7 @@
         }
         .tiles li {
             box-sizing: border-box;
-            background: #333;
+            background: #424242;
             border: 0.25rem solid #FFF;
             color: #FFF;
             font-size: 0.8125rem;
@@ -127,11 +128,11 @@
         }
         .tiles ::selection {
             background: #FFF;
-            color: #333;
+            color: #424242;
         }
         .tiles ::-moz-selection {
             background: #FFF;
-            color: #333;
+            color: #424242;
         }
         .tiles li:hover {
             border: 0.125rem solid #FFF;
@@ -246,7 +247,7 @@
             width: calc(100% - 130px - 0.75rem);
         }
         .carbon-poweredby {
-            color: #AAA;
+            color: #BDBDBD;
             display: block;
             margin: 0.25rem 0 0;
             text-align: center;
@@ -273,8 +274,11 @@
             <h1 class="title">Simple Icons</h1>
             <input type="text" id="search" class="search-field" autofocus>
             <p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p>
-            <p><a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button">Download</a></p>
-            <p><a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a></p>
+            <p>
+                <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button button--primary">Download</a>
+                <a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a>
+            </p>
+            <p><a href="https://twitter.com/intent/tweet?text=This%20free%20set%20of%20SVG%20icons%20for%20popular%20brands%20is%20a%20great%20web%20design%20resource!&url=https%3A%2F%2Fsimpleicons.org&via=bathtype&hashtags=icons,svg,webdesign" target="_blank">Sharing this page on Twitter</a> will help bring in new users and new requests that will help this icon set grow!</p>
         </div>
         <div class="block block--ad">
             <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>
diff --git a/src/header.html b/src/header.html
index 2b75ec89..a20f587f 100644
--- a/src/header.html
+++ b/src/header.html
@@ -32,7 +32,7 @@
         }
         body {
             background-color: #FFF;
-            color: #666;
+            color: #757575;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
             -webkit-font-feature-settings: "dlig", "kern", "liga";
                     font-feature-settings: "dlig", "kern", "liga";
@@ -43,10 +43,13 @@
             -moz-osx-font-smoothing: grayscale;
         }
         a {
-            color: #333;
+            color: #424242;
         }
         a:focus, a:hover {
-            color: #999;
+            color: #BDBDBD;
+        }
+        p {
+            margin: 1.5rem 0 0;
         }
         .navbar {
             font-size: 0.75rem;
@@ -61,8 +64,7 @@
             text-transform: uppercase;
         }
         .button {
-            background-color: #6C6;
-            border-bottom: 0.125rem solid rgba(0,0,0,0.25);
+            background-color: #00C853;
             border-radius: 0.125rem;
             color: #FFF;
             display: block;
@@ -72,18 +74,17 @@
             text-decoration: none;
         }
         .button:focus, .button:hover {
-            background-color: #5B5;
+            background-color: #00E676;
             color: #FFF;
         }
-        .button:active {
-            border-bottom: 0.125rem solid rgba(0,0,0,0);
-            transform: translateY(0.125rem);
+        .button--primary {
+            margin-bottom: 0.375rem;
         }
         .button--secondary {
-            background-color: #999;
+            background-color: #0091EA;
         }
         .button--secondary:focus, .button--secondary:hover {
-            background-color: #888;
+            background-color: #00B0FF;
         }
         .search-field {
             -webkit-appearance: none;
@@ -94,7 +95,7 @@
             border: none;
             border-bottom: 1px solid #EEE;
             box-sizing: border-box;
-            color: #999;
+            color: #BDBDBD;
             display: block;
             font-family: inherit;
             font-size: 1rem;
@@ -116,7 +117,7 @@
         }
         .tiles li {
             box-sizing: border-box;
-            background: #333;
+            background: #424242;
             border: 0.25rem solid #FFF;
             color: #FFF;
             font-size: 0.8125rem;
@@ -127,11 +128,11 @@
         }
         .tiles ::selection {
             background: #FFF;
-            color: #333;
+            color: #424242;
         }
         .tiles ::-moz-selection {
             background: #FFF;
-            color: #333;
+            color: #424242;
         }
         .tiles li:hover {
             border: 0.125rem solid #FFF;
@@ -246,7 +247,7 @@
             width: calc(100% - 130px - 0.75rem);
         }
         .carbon-poweredby {
-            color: #AAA;
+            color: #BDBDBD;
             display: block;
             margin: 0.25rem 0 0;
             text-align: center;
@@ -273,8 +274,11 @@
             <h1 class="title">Simple Icons</h1>
             <input type="text" id="search" class="search-field" autofocus>
             <p><strong>SVG icons for popular brands.</strong> This project is maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners.</p>
-            <p><a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button">Download</a></p>
-            <p><a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a></p>
+            <p>
+                <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="button button--primary">Download</a>
+                <a href="#" id="toggle-button" onclick="toggleNames();return false" class="button button--secondary">Hide names &amp; colour values</a>
+            </p>
+            <p><a href="https://twitter.com/intent/tweet?text=This%20free%20set%20of%20SVG%20icons%20for%20popular%20brands%20is%20a%20great%20web%20design%20resource!&url=https%3A%2F%2Fsimpleicons.org&via=bathtype&hashtags=icons,svg,webdesign" target="_blank">Sharing this page on Twitter</a> will help bring in new users and new requests that will help this icon set grow!</p>
         </div>
         <div class="block block--ad">
             <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>