simple-icons/src/header.html

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="canonical" href="https://simpleicons.org">
    <link rel="dns-prefetch" href="//cdn.carbonads.com">
    <link rel="dns-prefetch" href="//srv.carbonads.net">
    <link rel="dns-prefetch" href="//assets.servedby-buysellads.com">
    <link rel="dns-prefetch" href="//ad.atdmt.com">
    <link rel="dns-prefetch" href="//github.com">
    <title>Simple Icons</title>
    <meta name="description" content="SVG icons for popular brands.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Simple Icons">
    <meta property="og:description" content="SVG icons for popular brands.">
    <meta property="og:url" content="https://simpleicons.org">
    <meta property="og:site_name" content="Simple Icons">
    <meta property="og:image" content="https://simpleicons.org/images/og.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Simple Icons">
    <meta name="twitter:description" content="SVG icons for popular brands.">
    <meta name="twitter:site" content="@bathtype">
    <meta name="twitter:domain" content="Simple Icons">
    <meta name="twitter:image:src" content="https://simpleicons.org/images/og.png">
    <link rel="icon" type="image/x-icon" href="https://simpleicons.org/images/favicon.ico">
    <link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png">
    <meta name="google-site-verification" content="jn6XSTOvKDg-FP9-O7SUw5qU1CxPOaqhAeNUEkNrz_M">
    <link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png">
    <link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">
    <style>
        html {
            font-size: 100%;
        }
        body {
            background-color: #FFF;
            color: #424242;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
            font-kerning: normal;
            -webkit-font-variant-ligatures: common-ligatures;
                    font-variant-ligatures: common-ligatures;
            font-weight: 400;
            line-height: 1.5rem;
            margin: 0;
        }
        a {
            color: #0091EA;
        }
        a:focus, a:hover {
            color: #00B0FF;
        }
        p {
            margin: 1.5rem 0 0;
        }
        .navbar {
            font-size: 0.75rem;
            line-height: 1.125rem;
            padding: 1.5rem;
        }
        .title {
            font-size: 1rem;
            font-weight: 700;
            margin: 0;
            padding: 0;
        }
        .btn {
            background-color: #00C853;
            border-radius: 0.125rem;
            color: #FFF;
            display: inline-block;
            font-weight: 700;
            padding: 0.75rem 1.5rem;
            text-align: center;
            text-decoration: none;
        }
        .btn:focus, .btn:hover {
            background-color: #00E676;
            color: #FFF;
        }
        .site-main {
            width: 100%;
        }
        .tiles {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 1.25rem 1.25rem;
            padding: 0;
        }
        .tiles li {
            box-sizing: border-box;
            background: #424242;
            border: 0.25rem solid #FFF;
            color: #FFF;
            font-size: 0.8125rem;
            line-height: 1rem;
            padding: 1rem 0.75rem;
            /*text-transform: uppercase;*/
            width: 100%;
        }
        .tiles ::selection {
            background: #FFF;
            color: #424242;
        }
        .tiles ::-moz-selection {
            background: #FFF;
            color: #424242;
        }
        .tile-name {
            color: #FFF;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: calc(100% - 4rem);
        }
        .tiles svg {
            float: left;
            height: 2rem;
            margin: -0.5rem 0 0 0;
            padding: 0.5rem 1.25rem 0 0.5rem;
            width: 2rem;
        }
        .tiles path, .tiles ellipse, .tiles circle {
            fill: #FFF;
        }
        .hex {
            font-size: 0.75rem;
            opacity: 0.5;
            text-transform: uppercase;
        }
        .tiles__item:active .hex, .tiles__item:focus .hex, .tiles__item:hover .hex {
            opacity: 1;
        }
        @media (min-width: 800px) { .tiles li { width: 50%; } }
        @media (min-width: 1000px) { .tiles li { width: 33.333%; } }
        @media (min-width: 1100px) { .tiles li { width: 25% } }
        @media (min-width: 1400px) { .tiles li { width: 20% } }
        @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% } }
        .icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {
            text-decoration: underline;
        }
        .footer {
            margin: 3rem;
        }
        .footer p {
            font-size: 0.8125rem;
            margin: 1.5rem auto 0;
            max-width: 25.5rem;
            text-align: center;
        }
        .ad {
            background-color: #F0F0F0;
            margin: 1.5rem 0 0;
            padding: 0.75rem;
        }
        .ad a {
            color: #424242;
        }
        .carbon-wrap:after {
            clear: both;
            content: " ";
            display: table;
        }
        .carbon-img {
            float: left;
            line-height: 0;
        }
        .carbon-text {
            float: right;
            width: calc(100% - 130px - 0.75rem);
        }
        .carbon-poweredby {
            color: #BDBDBD;
            display: block;
            margin: 0.75rem 0 0;
            text-align: center;
            text-decoration: none;
        }
        @media (min-width: 600px) {
            body {
                display: flex;
            }
            .navbar {
                padding: 1.5rem 0 1.5rem 1.5rem;
                width: 18.5rem;
            }
            .site-main {
                width: calc(100% - 20rem);
            }
        }
    </style>
</head>

<body>
    <header class="navbar" role="banner">
        <h1 class="title">Simple Icons</h1>
        <p><strong>SVG icons for popular brands</strong>, maintained by <a href="https://twitter.com/bathtype">Dan&nbsp;Leech</a>. Contributions, corrections &amp; requests can be made on <a href="https://github.com/danleech/simple-icons">GitHub</a>.</p>
        <p>
            <a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="btn">Download from GitHub</a>
        </p>
        <div class="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>
    <main class="site-main" role="main">
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`<!DOCTYPE html>`
Added icons and OG tags 2015-10-19 13:28:40 +03:00			`<html lang="en" prefix="og: http://ogp.me/ns#">`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`<head>`
			`<meta charset="utf-8">`
Added icons and OG tags 2015-10-19 13:28:40 +03:00			`<meta http-equiv="x-ua-compatible" content="ie=edge">`
Added shrink-to-fit for Safari 9.1 2016-02-24 14:20:02 +03:00			`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">`
Added icons and OG tags 2015-10-19 13:28:40 +03:00			`<link rel="canonical" href="https://simpleicons.org">`
Removes Google Analytics 2017-01-11 16:10:23 +03:00			`<link rel="dns-prefetch" href="//cdn.carbonads.com">`
			`<link rel="dns-prefetch" href="//srv.carbonads.net">`
			`<link rel="dns-prefetch" href="//assets.servedby-buysellads.com">`
			`<link rel="dns-prefetch" href="//ad.atdmt.com">`
Prefetch //github.com 2015-10-19 13:39:45 +03:00			`<link rel="dns-prefetch" href="//github.com">`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`<title>Simple Icons</title>`
Added icons and OG tags 2015-10-19 13:28:40 +03:00			`<meta name="description" content="SVG icons for popular brands.">`
			`<meta property="og:type" content="website">`
			`<meta property="og:title" content="Simple Icons">`
			`<meta property="og:description" content="SVG icons for popular brands.">`
			`<meta property="og:url" content="https://simpleicons.org">`
			`<meta property="og:site_name" content="Simple Icons">`
Fixed OG image url 2015-12-11 15:26:08 +03:00			`<meta property="og:image" content="https://simpleicons.org/images/og.png">`
Added icons and OG tags 2015-10-19 13:28:40 +03:00			`<meta name="twitter:card" content="summary_large_image">`
			`<meta name="twitter:title" content="Simple Icons">`
			`<meta name="twitter:description" content="SVG icons for popular brands.">`
			`<meta name="twitter:site" content="@bathtype">`
			`<meta name="twitter:domain" content="Simple Icons">`
Tidied up repo 2015-10-22 16:57:08 +03:00			`<meta name="twitter:image:src" content="https://simpleicons.org/images/og.png">`
			`<link rel="icon" type="image/x-icon" href="https://simpleicons.org/images/favicon.ico">`
			`<link rel="icon" type="image/png" href="https://simpleicons.org/images/favicon.png">`
Changed to tag verification for Google 2015-10-19 19:57:49 +03:00			`<meta name="google-site-verification" content="jn6XSTOvKDg-FP9-O7SUw5qU1CxPOaqhAeNUEkNrz_M">`
Tidied up repo 2015-10-22 16:57:08 +03:00			`<link rel="apple-touch-icon" href="https://simpleicons.org/images/apple-touch-icon.png">`
			`<link rel="mask-icon" href="https://simpleicons.org/images/logo.svg" color="#111111">`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`<style>`
			`html {`
Simplified web page 2017-01-11 16:31:59 +03:00			`font-size: 100%;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`}`
			`body {`
Fixed page background colour 2015-10-20 16:46:08 +03:00			`background-color: #FFF;`
Simplified web page 2017-01-11 16:31:59 +03:00			`color: #424242;`
Updated font stack 2016-02-24 14:27:48 +03:00			`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;`
Simplified web page 2017-01-11 16:31:59 +03:00			`font-kerning: normal;`
			`-webkit-font-variant-ligatures: common-ligatures;`
			`font-variant-ligatures: common-ligatures;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`font-weight: 400;`
			`line-height: 1.5rem;`
			`margin: 0;`
			`}`
			`a {`
Simplified web page 2017-01-11 16:31:59 +03:00			`color: #0091EA;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`}`
			`a:focus, a:hover {`
Simplified web page 2017-01-11 16:31:59 +03:00			`color: #00B0FF;`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`}`
			`p {`
			`margin: 1.5rem 0 0;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`}`
			`.navbar {`
New layout 2015-12-10 18:51:15 +03:00			`font-size: 0.75rem;`
Fixed navbar line height 2015-12-10 19:51:22 +03:00			`line-height: 1.125rem;`
New layout 2015-12-10 18:51:15 +03:00			`padding: 1.5rem;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`}`
			`.title {`
			`font-size: 1rem;`
Simplifies text in sidebar 2017-01-11 16:45:22 +03:00			`font-weight: 700;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`margin: 0;`
Moved donate button to navbar 2015-10-19 10:51:30 +03:00			`padding: 0;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`}`
Simplified web page 2017-01-11 16:31:59 +03:00			`.btn {`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`background-color: #00C853;`
New layout 2015-12-10 18:51:15 +03:00			`border-radius: 0.125rem;`
			`color: #FFF;`
Simplified web page 2017-01-11 16:31:59 +03:00			`display: inline-block;`
New layout 2015-12-10 18:51:15 +03:00			`font-weight: 700;`
			`padding: 0.75rem 1.5rem;`
Moved donate button to navbar 2015-10-19 10:51:30 +03:00			`text-align: center;`
New layout 2015-12-10 18:51:15 +03:00			`text-decoration: none;`
Moved donate button to navbar 2015-10-19 10:51:30 +03:00			`}`
Simplified web page 2017-01-11 16:31:59 +03:00			`.btn:focus, .btn:hover {`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`background-color: #00E676;`
New layout 2015-12-10 18:51:15 +03:00			`color: #FFF;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`}`
New layout 2015-12-10 18:51:15 +03:00			`.site-main {`
			`width: 100%;`
Added search, fixes #253 2015-10-28 17:57:38 +03:00			`}`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`.tiles {`
			`display: flex;`
			`flex-wrap: wrap;`
			`list-style: none;`
New layout 2015-12-10 18:51:15 +03:00			`margin: 1.25rem 1.25rem;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`padding: 0;`
			`}`
			`.tiles li {`
			`box-sizing: border-box;`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`background: #424242;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`border: 0.25rem solid #FFF;`
			`color: #FFF;`
Improved font metrics 2015-11-19 15:37:13 +03:00			`font-size: 0.8125rem;`
Finished sort algorithm 2015-10-15 16:30:13 +03:00			`line-height: 1rem;`
Tweaked metrics and breakpoints 2016-08-04 17:48:09 +03:00			`padding: 1rem 0.75rem;`
Made icon titles Title case 2016-02-24 14:13:09 +03:00			`/text-transform: uppercase;/`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`width: 100%;`
			`}`
Added custom text selection colour 2015-11-06 21:50:13 +03:00			`.tiles ::selection {`
			`background: #FFF;`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`color: #424242;`
Added custom text selection colour 2015-11-06 21:50:13 +03:00			`}`
			`.tiles ::-moz-selection {`
			`background: #FFF;`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`color: #424242;`
Added custom text selection colour 2015-11-06 21:50:13 +03:00			`}`
Added Campaign Monitor 2015-10-20 11:03:57 +03:00			`.tile-name {`
Change link scope to icons so hex codes can be selected easier 2015-11-06 19:42:01 +03:00			`color: #FFF;`
Added Campaign Monitor 2015-10-20 11:03:57 +03:00			`display: inline-block;`
			`overflow: hidden;`
			`text-overflow: ellipsis;`
			`white-space: nowrap;`
			`width: calc(100% - 4rem);`
			`}`
Added two icons 2015-10-16 13:09:43 +03:00			`.tiles svg {`
Finished sort algorithm 2015-10-15 16:30:13 +03:00			`float: left;`
			`height: 2rem;`
- Hover full tiles: opacity hex to 1. - Clickable area full tiles enlarged. 2016-02-23 22:51:44 +03:00			`margin: -0.5rem 0 0 0;`
Simplified web page 2017-01-11 16:31:59 +03:00			`padding: 0.5rem 1.25rem 0 0.5rem;`
			`width: 2rem;`
- Made whole tile icons clickable. - Full tiles: name underlined and also clickable. 2016-02-23 22:42:34 +03:00			`}`
Removed colour attribute from SVG files 2015-12-14 14:08:34 +03:00			`.tiles path, .tiles ellipse, .tiles circle {`
			`fill: #FFF;`
			`}`
Finished sort algorithm 2015-10-15 16:30:13 +03:00			`.hex {`
Improved font metrics 2015-11-19 15:37:13 +03:00			`font-size: 0.75rem;`
Finished sort algorithm 2015-10-15 16:30:13 +03:00			`opacity: 0.5;`
Improved font metrics 2015-11-19 15:37:13 +03:00			`text-transform: uppercase;`
- Hover full tiles: opacity hex to 1. - Clickable area full tiles enlarged. 2016-02-23 22:51:44 +03:00			`}`
Simplified web page 2017-01-11 16:31:59 +03:00			`.tiles__item:active .hex, .tiles__item:focus .hex, .tiles__item:hover .hex {`
- Hover full tiles: opacity hex to 1. - Clickable area full tiles enlarged. 2016-02-23 22:51:44 +03:00			`opacity: 1;`
Finished sort algorithm 2015-10-15 16:30:13 +03:00			`}`
New layout 2015-12-10 18:51:15 +03:00			`@media (min-width: 800px) { .tiles li { width: 50%; } }`
			`@media (min-width: 1000px) { .tiles li { width: 33.333%; } }`
Tweaked metrics and breakpoints 2016-08-04 17:48:09 +03:00			`@media (min-width: 1100px) { .tiles li { width: 25% } }`
			`@media (min-width: 1400px) { .tiles li { width: 20% } }`
			`@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% } }`
- Made whole tile icons clickable. - Full tiles: name underlined and also clickable. 2016-02-23 22:42:34 +03:00			`.icon--link:hover .tile-name, .icon--link:active .tile-name, .icon--link:focus .tile-name {`
			`text-decoration: underline;`
			`}`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`.footer {`
			`margin: 3rem;`
			`}`
			`.footer p {`
Improved font metrics 2015-11-19 15:37:13 +03:00			`font-size: 0.8125rem;`
Updated footer 2015-10-16 17:41:26 +03:00			`margin: 1.5rem auto 0;`
Improved font metrics 2015-11-19 15:37:13 +03:00			`max-width: 25.5rem;`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`text-align: center;`
			`}`
Simplified web page 2017-01-11 16:31:59 +03:00			`.ad {`
			`background-color: #F0F0F0;`
			`margin: 1.5rem 0 0;`
Fixed ad block 2015-12-10 18:52:45 +03:00			`padding: 0.75rem;`
			`}`
Improved ad styling 2017-01-11 16:33:29 +03:00			`.ad a {`
			`color: #424242;`
			`}`
Updated ad layout 2015-12-10 18:57:49 +03:00			`.carbon-wrap:after {`
			`clear: both;`
			`content: " ";`
			`display: table;`
			`}`
			`.carbon-img {`
			`float: left;`
Fixed ad spacing 2016-03-02 13:47:56 +03:00			`line-height: 0;`
Updated ad layout 2015-12-10 18:57:49 +03:00			`}`
			`.carbon-text {`
			`float: right;`
Fixed silly maths 2015-12-10 19:00:41 +03:00			`width: calc(100% - 130px - 0.75rem);`
Tweaking ad area 2015-12-10 18:54:25 +03:00			`}`
			`.carbon-poweredby {`
Makes some minor changes to the sidebar 2016-12-19 22:42:25 +03:00			`color: #BDBDBD;`
. 2015-12-10 18:56:22 +03:00			`display: block;`
Improved ad styling 2017-01-11 16:33:29 +03:00			`margin: 0.75rem 0 0;`
Changed ads again 2015-12-10 19:00:00 +03:00			`text-align: center;`
. 2015-12-10 18:56:22 +03:00			`text-decoration: none;`
Tweaking ad area 2015-12-10 18:54:25 +03:00			`}`
New layout 2015-12-10 18:51:15 +03:00			`@media (min-width: 600px) {`
			`body {`
			`display: flex;`
			`}`
			`.navbar {`
			`padding: 1.5rem 0 1.5rem 1.5rem;`
			`width: 18.5rem;`
			`}`
			`.site-main {`
			`width: calc(100% - 20rem);`
			`}`
			`}`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`</style>`
			`</head>`

			`<body>`
			`<header class="navbar" role="banner">`
Simplified web page 2017-01-11 16:31:59 +03:00			`<h1 class="title">Simple Icons</h1>`
Simplifies text in sidebar 2017-01-11 16:45:22 +03:00			`<p><strong>SVG icons for popular brands</strong>, maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>. Contributions, corrections & requests can be made on <a href="https://github.com/danleech/simple-icons">GitHub</a>.</p>`
Simplified web page 2017-01-11 16:31:59 +03:00			`<p>`
			`<a href="https://github.com/danleech/simple-icons/tree/gh-pages/icons" class="btn">Download from GitHub</a>`
			`</p>`
			`<div class="ad">`
New layout 2015-12-10 18:51:15 +03:00			`<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=simpleiconsorg" id="_carbonads_js"></script>`
			`</div>`
Finished v1 node builder script 2015-10-14 18:52:04 +03:00			`</header>`
New layout 2015-12-10 18:51:15 +03:00			`<main class="site-main" role="main">`