Simplified web page

src/build.js

@@ -86,7 +86,7 @@ var header = fs.readFileSync('./header.html', 'utf8');
 var footer = fs.readFileSync('./footer.html', 'utf8');
 
 // Build content
-var main = "            <ul class=\"tiles tiles--full\">";
+var main = "            <ul class=\"tiles\">";
 
 for (var i = 0; i < source.icons.length; i++) {
     var fileName = source.icons[i].title.toLowerCase();

src/footer.html

@@ -1,18 +1,5 @@
 
         </ul>
     </main>
-    <script>
-        function toggleNames() {
-            var list = document.getElementsByClassName("tiles tiles--icons");
-            if(list.length == 1) {
-                list[0].className = "tiles tiles--full";
-                document.getElementById("toggle-button").innerHTML = "Hide names & colour values";
-            } else {
-                var list = document.getElementsByClassName("tiles tiles--full");
-                list[0].className = "tiles tiles--icons";
-                document.getElementById("toggle-button").innerHTML = "Show names & colour values";
-            }
-        }
-    </script>
 </body>
 </html>

src/header.html

@@ -31,25 +31,24 @@
     <link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
     <style>
         html {
-            font-size: 16px;
+            font-size: 100%;
         }
         body {
             background-color: #FFF;
-            color: #757575;
+            color: #424242;
             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-kerning: normal;
-                    font-feature-settings: "dlig", "kern", "liga";
+            -webkit-font-variant-ligatures: common-ligatures;
-            -webkit-font-smoothing: antialiased;
+                    font-variant-ligatures: common-ligatures;
             font-weight: 400;
             line-height: 1.5rem;
             margin: 0;
-            -moz-osx-font-smoothing: grayscale;
         }
         a {
-            color: #424242;
+            color: #0091EA;
         }
         a:focus, a:hover {
-            color: #BDBDBD;
+            color: #00B0FF;
         }
         p {
             margin: 1.5rem 0 0;
@@ -66,29 +65,20 @@
             padding: 0;
             text-transform: uppercase;
         }
-        .button {
+        .btn {
             background-color: #00C853;
             border-radius: 0.125rem;
             color: #FFF;
-            display: block;
+            display: inline-block;
             font-weight: 700;
             padding: 0.75rem 1.5rem;
             text-align: center;
             text-decoration: none;
         }
-        .button:focus, .button:hover {
+        .btn:focus, .btn:hover {
             background-color: #00E676;
             color: #FFF;
         }
-        .button--primary {
-            margin-bottom: 0.375rem;
-        }
-        .button--secondary {
-            background-color: #0091EA;
-        }
-        .button--secondary:focus, .button--secondary:hover {
-            background-color: #00B0FF;
-        }
         .site-main {
             width: 100%;
         }
@@ -118,10 +108,6 @@
             background: #FFF;
             color: #424242;
         }
-        .tiles li:hover {
-            border: 0.125rem solid #FFF;
-            padding: 1.125rem 0.875rem;
-        }
         .tile-name {
             color: #FFF;
             display: inline-block;
@@ -133,12 +119,9 @@
         .tiles svg {
             float: left;
             height: 2rem;
-            padding: 0.5rem 0.5rem 0;
-            width: 2rem;
-        }
-        .tiles--full svg {
             margin: -0.5rem 0 0 0;
-            padding-right: 1.25rem;
+            padding: 0.5rem 1.25rem 0 0.5rem;
+            width: 2rem;
         }
         .tiles path, .tiles ellipse, .tiles circle {
             fill: #FFF;
@@ -147,9 +130,8 @@
             font-size: 0.75rem;
             opacity: 0.5;
             text-transform: uppercase;
-            transition: opacity .3s ease-in-out;
         }
-        .tiles--full .tiles__item:hover .hex, .tiles--full .tiles__item:active .hex, .tiles--full .tiles__item:focus .hex {
+        .tiles__item:active .hex, .tiles__item:focus .hex, .tiles__item:hover .hex {
             opacity: 1;
         }
         @media (min-width: 800px) { .tiles li { width: 50%; } }
@@ -159,41 +141,6 @@
         @media (min-width: 1600px) { .tiles li { width: 16.666% } }
         @media (min-width: 1900px) { .tiles li { width: 12.5% } }
         @media (min-width: 2300px) { .tiles li { width: 10% } }
-        .tiles--icons {
-            justify-content: center;
-        }
-        .tiles--icons .tiles__item {
-            position: relative;
-        }
-        .tiles--icons .icon--link {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
-        .tiles--icons li {
-            height: 4rem;
-            width: 4rem !important;
-        }
-        .tiles--icons svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            height: 1.5rem;
-            margin: 0;
-            -webkit-transform: translate(-50%,-50%);
-                -ms-transform: translate(-50%,-50%);
-                    transform: translate(-50%,-50%);
-            padding: 0;
-            width: 1.5rem;
-        }
-        .tiles--icons .tile-name {
-            visibility: hidden;
-        }
-        .tiles--icons .hex {
-            visibility: hidden;
-        }
         .icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
             text-decoration: underline;
         }
@@ -206,16 +153,10 @@
             max-width: 25.5rem;
             text-align: center;
         }
-        .block {
+        .ad {
-            background-color: #EEE;
+            background-color: #F0F0F0;
-            padding: 1.5rem;
+            margin: 1.5rem 0 0;
-        }
-        .block--ad {
-            margin: 0.5rem 0 0;
             padding: 0.75rem;
-            position: -webkit-sticky;
-            position:         sticky;
-            top: 1.5rem;
         }
         .carbon-wrap:after {
             clear: both;
@@ -254,16 +195,13 @@
 
 <body>
     <header class="navbar" role="banner">
-        <div class="block">
         <h1 class="title">Simple Icons</h1>
         <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 button--primary">Download</a>
+            <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="btn">Download from GitHub</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="ad">
-        <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>
         </div>
     </header>