web/simple-icons
1
0
Fork 0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-26 01:13:41 +02:00
Code Releases Activity
d8f3573894
simple-icons/index.html

233 lines
14 KiB
HTML
Raw Normal View History

Adds basic template with navbar
2017-04-23 18:31:56 +02:00
---
---
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% assign iconsUnsortedString = "" %}
{% assign greyscaleIconsUnsortedString = "" %}
{% for icon in site.data.simple-icons.icons %}
{% assign title = icon.title %}
{% assign filename = icon.title | replace: "+", "plus" | replace: " ", "" | replace: ".", "" | replace: "-", "" | replace: "!", "" | replace: "’", "" | downcase %}
{% assign hex = icon.hex %}
{% assign hex = icon.hex %}
{% assign hexCharacter1 = hex | slice: 0, 1 %}
{% assign hexCharacter2 = hex | slice: 1, 1 %}
{% assign hexCharacter3 = hex | slice: 2, 1 %}
{% assign hexCharacter4 = hex | slice: 3, 1 %}
{% assign hexCharacter5 = hex | slice: 4, 1 %}
{% assign hexCharacter6 = hex | slice: 5, 1 %}
{% capture hexCharacterString %}{{ hexCharacter1 }},{{ hexCharacter2 }},{{ hexCharacter3 }},{{ hexCharacter4 }},{{ hexCharacter5 }},{{ hexCharacter6 }}{% endcapture %}
{% assign hexCharacterArray = hexCharacterString | split: "," %}
{% assign rgbString = "" %}
{% for hexCharacter in hexCharacterArray %}
{% case hexCharacter %}
{% when "A" %}
{% assign rgbString = rgbString | append: "10" %}
{% when "B" %}
{% assign rgbString = rgbString | append: "11" %}
{% when "C" %}
{% assign rgbString = rgbString | append: "12" %}
{% when "D" %}
{% assign rgbString = rgbString | append: "13" %}
{% when "E" %}
{% assign rgbString = rgbString | append: "14" %}
{% when "F" %}
{% assign rgbString = rgbString | append: "15" %}
{% else %}
{% assign rgbString = rgbString | append: hexCharacter %}
{% endcase %}
{% unless forloop.last %}{% assign rgbString = rgbString | append: "," %}{% endunless %}
{% endfor %}
Order icons alphabetically
2017-12-21 23:32:01 +02:00
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% assign rgbArray = rgbString | split: "," %}
{% assign rgbRed = rgbArray[0] | times: 16 | plus: rgbArray[1] | divided_by: 255.0 | round: 2 %}
{% assign rgbGreen = rgbArray[2] | times: 16 | plus: rgbArray[3] | divided_by: 255.0 | round: 2 %}
{% assign rgbBlue = rgbArray[4] | times: 16 | plus: rgbArray[5] | divided_by: 255.0 | round: 2 %}
{% assign rgbMax = 0.0 %}
Order icons alphabetically
2017-12-21 23:32:01 +02:00
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% if rgbRed > rgbMax %}
{% assign rgbMax = rgbRed %}
{% endif %}
{% if rgbGreen > rgbMax %}
{% assign rgbMax = rgbGreen %}
{% endif %}
{% if rgbBlue > rgbMax %}
{% assign rgbMax = rgbBlue %}
{% endif %}
{% assign rgbMin = 1.0 %}
{% if rgbRed < rgbMin %}
{% assign rgbMin = rgbRed %}
{% endif %}
{% if rgbGreen < rgbMin %}
{% assign rgbMin = rgbGreen %}
{% endif %}
{% if rgbBlue < rgbMin %}
{% assign rgbMin = rgbBlue %}
{% endif %}
Contrast ratio proof of concept Initial implementation of making icons/text dark on a light background, as suggested in issue #480. This implementation is based on the suggestion by @pushrax, using the formula provided on http://chilliant.blogspot.nl/2012/08/srgb-approximations-for-hlsl.html Note that this implementation is not yet as desired, as it still darkens some icons we might not want darkened and the dark color is currently full black. I also used this link in the process of making this: http://springmeier.org/www/contrastcalculator/index.php
2017-08-02 15:43:02 +02:00
{% if rgbRed <= 0.03928 %}
{% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %}
{% else %}
{% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %}
{% endif %}
{% if rgbGreen <= 0.03928 %}
{% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %}
{% else %}
{% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %}
{% endif %}
{% if rgbBlue <= 0.03928 %}
{% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %}
{% else %}
{% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %}
{% endif %}
Tweak Luminance thresold for darkened icon
2017-08-02 15:48:58 +02:00
{% assign luminance = lRed | plus: lGreen | plus: lBlue %}
{% if luminance >= 0.83 %}
Use BEM naming and inherit colors
2017-08-03 13:13:31 +02:00
{% assign class = "grid-item--dark" %}
Contrast ratio proof of concept Initial implementation of making icons/text dark on a light background, as suggested in issue #480. This implementation is based on the suggestion by @pushrax, using the formula provided on http://chilliant.blogspot.nl/2012/08/srgb-approximations-for-hlsl.html Note that this implementation is not yet as desired, as it still darkens some icons we might not want darkened and the dark color is currently full black. I also used this link in the process of making this: http://springmeier.org/www/contrastcalculator/index.php
2017-08-02 15:43:02 +02:00
{% else %}
Use BEM naming and inherit colors
2017-08-03 13:13:31 +02:00
{% assign class = "grid-item--light" %}
Contrast ratio proof of concept Initial implementation of making icons/text dark on a light background, as suggested in issue #480. This implementation is based on the suggestion by @pushrax, using the formula provided on http://chilliant.blogspot.nl/2012/08/srgb-approximations-for-hlsl.html Note that this implementation is not yet as desired, as it still darkens some icons we might not want darkened and the dark color is currently full black. I also used this link in the process of making this: http://springmeier.org/www/contrastcalculator/index.php
2017-08-02 15:43:02 +02:00
{% endif %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
{% assign rgbDelta = rgbMax | minus: rgbMin %}
{% if rgbDelta == 0 %}
{% assign hslHue = 0 %}
{% assign hslSaturation = 0 %}
{% else %}
{% if hslLuminance < 0.5 %}
{% assign rgbMaxPlusMin = rgbMax | plus: rgbMin %}
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbMaxPlusMin %}
{% else %}
{% assign rgbTwoMinusMaxMinusMin = 2 | minus: rgbMax | minus: rgbMin %}
{% assign hslSaturation = 100 | times: rgbDelta | divided_by: rgbTwoMinusMaxMinusMin %}
{% endif %}
{% if rgbMax == rgbRed %}
{% assign hslHue = rgbGreen | minus: rgbBlue | divided_by: rgbDelta | times: 60.0 | modulo: 360.0 %}
{% elsif rgbMax == rgbGreen %}
{% assign hslHue = rgbBlue | minus: rgbRed | divided_by: rgbDelta | plus: 2.0 | times: 60.0 | modulo: 360.0 %}
{% else %}
{% assign hslHue = rgbRed | minus: rgbGreen | divided_by: rgbDelta | plus: 4.0 | times: 60.0 | modulo: 360.0 %}
{% endif %}
{% assign hslHue = hslHue | plus: 90.0 | modulo: 360.0 %}
{% endif %}
Order icons alphabetically
2017-12-21 23:32:01 +02:00
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
Order icons alphabetically
2017-12-21 23:32:01 +02:00
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
Order icons alphabetically
2017-12-21 23:32:01 +02:00
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
{% endif %}
{% endfor %}
Extract CSS and JavaScript from HTML Put all of the CSS and most of the JavaScript into their own file. The JavaScript that is left in HTML depends on some Liquid logic present in the HTML.
2018-01-03 19:33:25 +02:00
Order icons alphabetically
2017-12-21 23:32:01 +02:00
{% assign iconsArray = iconsUnsortedString | split: ";" | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
Extract CSS and JavaScript from HTML Put all of the CSS and most of the JavaScript into their own file. The JavaScript that is left in HTML depends on some Liquid logic present in the HTML.
2018-01-03 19:33:25 +02:00
{% assign allIconNames = "" %}
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %}
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %}
{% endfor %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<!doctype html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
<link rel="preconnect" href="//www.google-analytics.com">
<link rel="preconnect" href="//cdn.carbonads.com">
<link rel="preconnect" href="//github.com">
<title>Simple Icons</title>
Adds tweet button, changes microcopy, fixes indentation
2017-05-03 15:22:18 +02:00
<meta name="description" content="Free SVG icons for popular brands.">
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<meta property="og:type" content="website">
<meta property="og:title" content="Simple Icons">
Adds tweet button, changes microcopy, fixes indentation
2017-05-03 15:22:18 +02:00
<meta property="og:description" content="Free SVG icons for popular brands.">
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<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">
Adds tweet button, changes microcopy, fixes indentation
2017-05-03 15:22:18 +02:00
<meta name="twitter:description" content="Free SVG icons for popular brands.">
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<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">
<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">
Extract CSS and JavaScript from HTML Put all of the CSS and most of the JavaScript into their own file. The JavaScript that is left in HTML depends on some Liquid logic present in the HTML.
2018-01-03 19:33:25 +02:00
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Move GA tracking snippet to the top as suggested by the GA documentation to improve the tracking process: https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet
2017-05-25 21:32:36 +02:00
<script>
Update Google Analytics With the inactivity of @danleech, this changes the GA tracking to one controlled by me (interested contributors can be added to GA upon request)
2017-09-11 21:23:20 +02:00
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-100751516-2', 'auto');
ga('send', 'pageview');
Move GA tracking snippet to the top as suggested by the GA documentation to improve the tracking process: https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet
2017-05-25 21:32:36 +02:00
</script>
Extract CSS and JavaScript from HTML Put all of the CSS and most of the JavaScript into their own file. The JavaScript that is left in HTML depends on some Liquid logic present in the HTML.
2018-01-03 19:33:25 +02:00
<script>
function normalizeSearchTerm(value) {
return value.toLowerCase().replace(/ /g, '');
}
var icons = [{{ allIconNames }}].map(normalizeSearchTerm);
</script>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
</head>
<body>
<header class="navbar" role="banner">
<ul class="navbar__nav" role="navigation">
<li class="navbar__nav-item navbar__nav-item--home"><a href="/">Simple&nbsp;Icons</a></li>
Update links in index.html Updates links in index.html to refer to simple-icons/simple-icons instead of danleech/simple-icons
2017-09-11 21:25:34 +02:00
<li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons/blob/develop/README.md">About</a></li>
<li class="navbar__nav-item"><a href="https://github.com/simple-icons/simple-icons">GitHub</a></li>
Add link for the NPM package to index.html
2017-09-20 10:24:28 +02:00
<li class="navbar__nav-item"><a href="https://www.npmjs.com/package/simple-icons">NPM</a></li>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
</ul>
</header>
<main role="main">
Adds tweet button, changes microcopy, fixes indentation
2017-05-03 15:22:18 +02:00
<p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular&nbsp;brands</p>
Add a search box to the page
2017-05-26 01:04:23 +02:00
<div class="search">
<div class="search__wrapper">
<div class="search__close"><span>&times;</span></div>
Small usability improvement for users with JavaScript disabled
2017-10-17 21:15:07 +02:00
<input type="text" placeholder="Search by brand …" title="Search not available when JavaScript is disabled" disabled />
Add a search box to the page
2017-05-26 01:04:23 +02:00
</div>
Add buttons to sort either on color or alphabet As suggested by @rosslh, add buttons to choose how you want to sort the icons.
2017-12-21 23:54:11 +02:00
Change "Sort on colors" to "Sort by color"
2017-12-23 11:44:29 +02:00
<svg id="sort-color" class="sort-btn active" aria-labelledby="sort-color" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-color">Sort by color</title><path d="M9.219 18.857H6.648V.429A.414.414 0 0 0 6.219 0H3.648a.418.418 0 0 0-.308.121.418.418 0 0 0-.121.308v18.428H.648a.4.4 0 0 0-.402.268c-.071.17-.04.326.094.469l4.286 4.287c.098.08.2.119.308.119a.447.447 0 0 0 .308-.119l4.272-4.273a.506.506 0 0 0 .134-.32.417.417 0 0 0-.429-.431z"/><path d="M12.219 3.429h3.429A.412.412 0 0 0 16.076 3V.429A.416.416 0 0 0 15.648 0h-3.429a.414.414 0 0 0-.429.429V3a.414.414 0 0 0 .429.429z"/><path d="M12.219 10.286h6a.42.42 0 0 0 .309-.12.42.42 0 0 0 .121-.308V7.286a.418.418 0 0 0-.121-.308.417.417 0 0 0-.309-.121h-6a.414.414 0 0 0-.308.121.417.417 0 0 0-.12.308v2.572c0 .125.04.228.12.308a.42.42 0 0 0 .308.12z"/><path d="M12.219 17.143h8.572c.125 0 .229-.039.309-.119s.119-.184.119-.309v-2.572c0-.125-.039-.227-.119-.307s-.184-.121-.309-.121h-8.572a.418.418 0 0 0-.308.121.415.415 0 0 0-.12.307v2.572c0 .125.04.229.12.309.081.08.183.119.308.119z"/><path d="M23.67 20.693a.408.408 0 0 0-.307-.121H12.219a.416.416 0 0 0-.429.428v2.572c0 .125.04.227.121.309a.42.42 0 0 0 .308.119h11.144a.414.414 0 0 0 .307-.119.424.424 0 0 0 .121-.309V21a.416.416 0 0 0-.121-.307z"/></svg>
Update hover animation for sort buttons The sort button for colors now shows a range of reds when hovered, whereas the sort button for alphabetic sorting just highlights the letters when hovered.
2017-12-23 00:20:01 +02:00
<svg id="sort-alphabetically" class="sort-btn" aria-labelledby="sort-alphabetically" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="sort-alphabetically">Sort alphabetically</title><path d="M10.096 18.857H7.525V.429A.414.414 0 0 0 7.096 0H4.525a.414.414 0 0 0-.429.429v18.429H1.525c-.196 0-.331.089-.402.268-.072.17-.04.326.094.469l4.286 4.286c.098.079.2.119.308.119.116 0 .219-.04.308-.12l4.272-4.272a.506.506 0 0 0 .134-.321.414.414 0 0 0-.429-.43z"/><path d="M20.102 22.474H16.78c-.188 0-.322.009-.402.026l-.188.026V22.5l.148-.147c.133-.16.227-.276.281-.348l4.941-7.099v-1.191h-7.594v3.066h1.607v-1.54h3.107c.16 0 .295-.014.4-.04a.856.856 0 0 0 .102-.007c.039-.004.068-.007.086-.007v.04l-.146.121c-.08.08-.176.2-.281.361L13.9 22.795V24h7.82v-3.12h-1.619v1.594h.001z"/><path d="M21.977 8.866L18.895 0h-2.168l-3.082 8.866h-.936v1.419h3.842V8.866h-1.004l.631-1.929h3.254l.629 1.929h-1.004v1.419h3.857V8.866h-.937zm-5.358-3.402l.977-2.92c.037-.107.07-.236.102-.388s.047-.232.047-.241l.039-.268h.055c0 .036.008.125.025.268l.162.629.963 2.92h-2.37z"/></svg>
Add a search box to the page
2017-05-26 01:04:23 +02:00
</div>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<ul class="grid">
<li class="grid-item grid-item--ad">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&amp;serve=CVYD42T&amp;placement=simpleiconsorg" id="_carbonads_js"></script>
</li>
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
Add buttons to sort either on color or alphabet As suggested by @rosslh, add buttons to choose how you want to sort the icons.
2017-12-21 23:54:11 +02:00
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}" order="{{ iconArray[7] }}">
Makes icons links download by default
2017-04-28 00:12:22 +02:00
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
Restores includes until I can figure out the symlink issue
2017-04-26 21:09:03 +02:00
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</a>
Add buttons to sort either on color or alphabet As suggested by @rosslh, add buttons to choose how you want to sort the icons.
2017-12-21 23:54:11 +02:00
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
</li>
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
Add buttons to sort either on color or alphabet As suggested by @rosslh, add buttons to choose how you want to sort the icons.
2017-12-21 23:54:11 +02:00
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}" order="{{ iconArray[7] }}">
Makes icons links download by default
2017-04-28 00:12:22 +02:00
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
Restores includes until I can figure out the symlink issue
2017-04-26 21:09:03 +02:00
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</a>
Add buttons to sort either on color or alphabet As suggested by @rosslh, add buttons to choose how you want to sort the icons.
2017-12-21 23:54:11 +02:00
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
</li>
{% endfor %}
</ul>
</main>
<footer class="footer" role="contentinfo">
Update links in index.html Updates links in index.html to refer to simple-icons/simple-icons instead of danleech/simple-icons
2017-09-11 21:25:34 +02:00
<p>A <a href="https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md">CC0</a> project maintained by the <a href="https://github.com/simple-icons/simple-icons/graphs/contributors">Simple&nbsp;Icons&nbsp;Contributors</a>.<br>
Use <a href="https://github.com/simple-icons/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
Adds tweet button, changes microcopy, fixes indentation
2017-05-03 15:22:18 +02:00
<a class="share-button" href="https://twitter.com/share?url=https%3A%2F%2Fsimpleicons.org&via=bathtype&text=Simple%20Icons%3A%20free%20SVG%20icons%20for%20popular%20brands.">Share this on Twitter!</a>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
</footer>
Extract CSS and JavaScript from HTML Put all of the CSS and most of the JavaScript into their own file. The JavaScript that is left in HTML depends on some Liquid logic present in the HTML.
2018-01-03 19:33:25 +02:00
<script type="text/javascript" src="site_script.js"></script>
Removes relative includes from page template
2017-04-26 19:43:58 +02:00
</body>
</html>
Copy Permalink