Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2024-11-18 11:24:17 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity
68798cec86
simple-icons/index.html

260 lines
19 KiB
HTML
Raw Normal View History

Adds basic template with navbar
2017-04-23 19:31:56 +03:00
---
---
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- assign iconCount = site.data.simple-icons.icons.size -%}
{%- assign iconsUnsortedString = "" -%}
{%- assign greyscaleIconsUnsortedString = "" -%}
{%- for icon in site.data.simple-icons.icons -%}
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
{% assign title = icon.title %}
Update filemapping, ampersand (#977) * Replace ampersand to avoid problems with filenames Together with some examples as test * Revert filename changes for testing purposes
2018-09-10 18:53:59 +03:00
Remove potentional extra dashes from title->filename mapping Removes dashes at start/end of filename that would appear as result of mapping This is *very* hacky, but such is Jekyll
2018-07-21 14:22:33 +03:00
{% assign filename = icon.title %}
Update filemapping, ampersand (#977) * Replace ampersand to avoid problems with filenames Together with some examples as test * Revert filename changes for testing purposes
2018-09-10 18:53:59 +03:00
{% comment %} Replace a period by 'dot' {% endcomment %}
Remove potentional extra dashes from title->filename mapping Removes dashes at start/end of filename that would appear as result of mapping This is *very* hacky, but such is Jekyll
2018-07-21 14:22:33 +03:00
{% assign _splitFilename = filename | split: "" %}
{% if _splitFilename.first == "." %}
{% assign filename = filename | replace_first: ".", "dot-" %}
{% endif %}
{% if _splitFilename.last == "." %}
{% assign _filenameLenMin1 = filename | size | minus: 1 %}
{% assign filename = filename | slice: 0, _filenameLenMin1 | append: "-dot" %}
{% endif %}
Update filemapping, ampersand (#977) * Replace ampersand to avoid problems with filenames Together with some examples as test * Revert filename changes for testing purposes
2018-09-10 18:53:59 +03:00
{% comment %} Replace an ampersand by 'and' {% endcomment %}
{% if _splitFilename.first == "&" %}
{% assign filename = filename | replace_first: "&", "and-" %}
{% endif %}
{% if _splitFilename.last == "&" %}
{% assign _filenameLenMin1 = filename | size | minus: 1 %}
{% assign filename = filename | slice: 0, _filenameLenMin1 | append: "-and" %}
{% endif %}
Handle accented brand names in Jekyll (#1463) * Handle accented brand names in Jekyll
2019-06-09 17:12:38 +03:00
{% assign filename = filename | downcase %}
{% assign filename = filename | replace: "à", "a" | replace: "á", "a" | replace: "â", "a" | replace: "ã", "a" | replace: "ä", "a" %}
Update filename logic for website (#2654) * Implement #2625 for Jekyll
2020-02-21 17:53:36 +03:00
{% assign filename = filename | replace: "ç", "c" | replace: "č", "c" | replace: "ć", "c" %}
Handle accented brand names in Jekyll (#1463) * Handle accented brand names in Jekyll
2019-06-09 17:12:38 +03:00
{% assign filename = filename | replace: "è", "e" | replace: "é", "e" | replace: "ê", "e" | replace: "ë", "e" %}
{% assign filename = filename | replace: "ì", "i" | replace: "í", "i" | replace: "î", "i" | replace: "ï", "i" %}
Update filename logic for website (#2654) * Implement #2625 for Jekyll
2020-02-21 17:53:36 +03:00
{% assign filename = filename | replace: "ñ", "n" | replace: "ň", "n" | replace: "ń", "n" %}
Handle accented brand names in Jekyll (#1463) * Handle accented brand names in Jekyll
2019-06-09 17:12:38 +03:00
{% assign filename = filename | replace: "ò", "o" | replace: "ó", "o" | replace: "ô", "o" | replace: "õ", "o" | replace: "ö", "o" %}
Update filename logic for website (#2654) * Implement #2625 for Jekyll
2020-02-21 17:53:36 +03:00
{% assign filename = filename | replace: "š", "s" | replace: "ś", "s" %}
Handle accented brand names in Jekyll (#1463) * Handle accented brand names in Jekyll
2019-06-09 17:12:38 +03:00
{% assign filename = filename | replace: "ù", "u" | replace: "ú", "u" | replace: "û", "u" | replace: "ü", "u" %}
{% assign filename = filename | replace: "ý", "y" | replace: "ÿ", "y" %}
Update filename logic for website (#2654) * Implement #2625 for Jekyll
2020-02-21 17:53:36 +03:00
{% assign filename = filename | replace: "ž", "z" | replace: "ź", "z" %}
Update filemapping, ampersand (#977) * Replace ampersand to avoid problems with filenames Together with some examples as test * Revert filename changes for testing purposes
2018-09-10 18:53:59 +03:00
Normalise accented characters in website search (#3180) * Normalise accented characters in website search * Move icon name normalisation to Liquid
2020-06-23 18:21:10 +03:00
{% assign searchTerm = filename %}
{% assign filename = filename | replace: "+", "plus" %}
{% assign filename = filename | replace: ".", "-dot-" %}
{% assign filename = filename | replace: "&", "-and-" %}
{% assign filename = filename | replace: " ", "" | replace: "!", "" | replace: ":", "" | replace: "’", "" | replace: "'", "" %}
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
{% 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-22 00:32:01 +03:00
Removes relative includes from page template
2017-04-26 20:43:58 +03: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-22 00:32:01 +03:00
Removes relative includes from page template
2017-04-26 20:43:58 +03: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 16:43:02 +03:00
Improve Formula for Display Colours (#2375) * Update luminance formula Following #2315 this updates the formula for computing the luminance of a brand colour and selecting the appropriate colour class. -- Co-Authored-By: Peter Noble <PeterShaggyNoble@users.noreply.github.com> * Update luminance threshold from 210 to 160
2020-01-23 01:34:49 +03:00
{% assign redLuminance = rgbArray[0] | times: 16 | plus: rgbArray[1] | times: 0.299 | round: 0 %}
{% assign greenLuminance = rgbArray[2] | times: 16 | plus: rgbArray[3] | times: 0.587 | round: 0 %}
{% assign blueLuminance = rgbArray[4] | times: 16 | plus: rgbArray[5] | times: 0.114 | round: 0 %}
{% assign luminance = redLuminance | plus: greenLuminance | plus: blueLuminance %}
{% if luminance < 160 %}
{% 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 16:43:02 +03:00
{% else %}
Use BEM naming and inherit colors
2017-08-03 14:13:31 +03: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 16:43:02 +03:00
{% endif %}
Removes relative includes from page template
2017-04-26 20:43:58 +03: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-22 00:32:01 +03:00
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
{% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
Normalise accented characters in website search (#3180) * Normalise accented characters in website search * Move icon name normalisation to Liquid
2020-06-23 18:21:10 +03:00
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ searchTerm }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
{% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
Normalise accented characters in website search (#3180) * Normalise accented characters in website search * Move icon name normalisation to Liquid
2020-06-23 18:21:10 +03:00
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ searchTerm }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
{% endif %}
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- 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 20:33:25 +03:00
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- assign iconsArray = iconsUnsortedString | split: ";" | sort -%}
{%- assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse -%}
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- assign allIconNames = "" -%}
{%- for icon in iconsArray -%}
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 20:33:25 +03:00
{% assign iconArray = icon | split: "," %}
Normalise accented characters in website search (#3180) * Normalise accented characters in website search * Move icon name normalisation to Liquid
2020-06-23 18:21:10 +03:00
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[7] }}",{% endcapture %}
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- endfor -%}
{%- for icon in greyscaleIconsArray -%}
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 20:33:25 +03:00
{% assign iconArray = icon | split: "," %}
Normalise accented characters in website search (#3180) * Normalise accented characters in website search * Move icon name normalisation to Liquid
2020-06-23 18:21:10 +03:00
{% capture allIconNames %}{{ allIconNames }}"{{ iconArray[7] }}"{% unless forloop.last %},{% endunless %}{% endcapture %}
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- 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 20:33:25 +03:00
Removes relative includes from page template
2017-04-26 20:43:58 +03: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>
Add icon count to website & README (#2639)
2020-02-20 19:13:19 +03:00
<meta name="description" content="{{ iconCount }} Free SVG icons for popular brands.">
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
<meta property="og:type" content="website">
<meta property="og:title" content="Simple Icons">
Add icon count to website & README (#2639)
2020-02-20 19:13:19 +03:00
<meta property="og:description" content="{{ iconCount }} Free SVG icons for popular brands.">
Removes relative includes from page template
2017-04-26 20:43:58 +03: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">
Add icon count to website & README (#2639)
2020-02-20 19:13:19 +03:00
<meta name="twitter:description" content="{{ iconCount }} Free SVG icons for popular brands.">
Removes relative includes from page template
2017-04-26 20:43:58 +03: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 20:33:25 +03: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 22:32:36 +03: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 22:23:20 +03: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');
Normalise accented characters in website search (#3180) * Normalise accented characters in website search * Move icon name normalisation to Liquid
2020-06-23 18:21:10 +03:00
var icons = [{{ allIconNames }}];
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 20:33:25 +03:00
</script>
Removes relative includes from page template
2017-04-26 20:43:58 +03: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 22:25:34 +03: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 11:24:28 +03:00
<li class="navbar__nav-item"><a href="https://www.npmjs.com/package/simple-icons">NPM</a></li>
Add packagist link to website header (#1702)
2019-10-10 13:52:03 +03:00
<li class="navbar__nav-item"><a href="https://packagist.org/packages/simple-icons/simple-icons">Packagist</a></li>
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
</ul>
</header>
<main role="main">
Add icon count to website & README (#2639)
2020-02-20 19:13:19 +03:00
<p class="hero">{{ iconCount }} Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular&nbsp;brands</p>
Add a search box to the page
2017-05-26 02:04:23 +03: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 22:15:07 +03: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 02:04:23 +03:00
</div>
Remove aria-labelledby and ids from SVGs (#1062) * Remove `id` and `aria-labelledby` from all SVGs * Update SVGLint configuration * Remove `aria-labelledby` from documentation * Remove `aria-labelledby` from website because why not
2018-11-06 19:10:17 +03:00
<svg id="sort-color" class="sort-btn active" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>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>
<svg id="sort-alphabetically" class="sort-btn" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>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>
Improve search performance (#1170) * Improve performance of search on website By reducing the number of times a search query loops over all icons or all icons that match the search query (from 3 to 1 and 2 to 0 respectively) the search on simpleicons.org should now be noticeably faster (if it was slow before). Especially in conjunction with #1169. This was achieved by utilizing CSS (which operates faster then plain JavaScript) to do most of the heavy lifting. A class on <body> now dictates the order of the icons rather then a JavaScript for-loop (found in the removed function `orderIcons`). It was also achieved by more cleverly utilizing the fuzzy search logic and recognizing that the CSS `order` property also works if number are not consecutive. Less relevant numbers will have a higher value assigned by fuzzy search, which is what the `order`-value of the icon will become, removing the need for sorting and an additional loop. Some resources that helped me: - https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Specifically the "Values in JavaScript" section * * * One unrelated change in stylesheet.css where 2 separate rulesets for .grid-item__link have been merged. * Simplify script with regard to button states * Reduce complexity of `previousQuery` variables
2019-02-04 00:31:22 +03:00
<svg id="sort-relevance" class="sort-btn" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Sort by relevance</title><path d="M9.219,18.857H6.648V0.429C6.656,0.201,6.478,0.008,6.25,0H3.648C3.533-0.004,3.421,0.04,3.34,0.121C3.259,0.203,3.215,0.314,3.219,0.429v18.428H0.648c-0.179-0.012-0.344,0.098-0.402,0.268c-0.071,0.17-0.04,0.326,0.094,0.469l4.286,4.287C4.724,23.961,4.826,24,4.934,24c0.114,0.001,0.224-0.041,0.308-0.119l4.272-4.273c0.081-0.086,0.128-0.199,0.134-0.318c0.008-0.23-0.172-0.423-0.402-0.432C9.237,18.857,9.228,18.857,9.219,18.857z"/><path d="M22.971,4.984c0.226-0.22,0.304-0.543,0.207-0.843c-0.099-0.3-0.352-0.515-0.666-0.561l-2.777-0.403c-0.119-0.018-0.221-0.092-0.274-0.199l-1.241-2.519C18.079,0.174,17.797,0,17.479,0c-0.316,0-0.598,0.176-0.737,0.458l-1.243,2.519c-0.054,0.108-0.156,0.183-0.273,0.199L12.445,3.58c-0.311,0.043-0.569,0.261-0.665,0.56c-0.098,0.3-0.019,0.624,0.207,0.843l2.012,1.96c0.086,0.084,0.125,0.207,0.104,0.322l-0.475,2.769c-0.041,0.245,0.021,0.481,0.18,0.667c0.244,0.292,0.674,0.381,1.016,0.201l2.486-1.307c0.104-0.056,0.232-0.054,0.339,0l2.485,1.307C20.256,10.967,20.387,11,20.518,11c0.245,0,0.477-0.109,0.633-0.298c0.156-0.185,0.223-0.429,0.18-0.667l-0.475-2.768c-0.021-0.117,0.02-0.24,0.104-0.322L22.971,4.984z"/><path d="M22.966,17.984c0.227-0.219,0.307-0.543,0.209-0.844c-0.099-0.299-0.354-0.516-0.666-0.561l-2.777-0.404c-0.119-0.018-0.221-0.092-0.274-0.199l-1.241-2.518c-0.141-0.283-0.422-0.46-0.738-0.46s-0.6,0.177-0.738,0.46l-1.242,2.518c-0.054,0.107-0.156,0.184-0.275,0.199l-2.775,0.404c-0.314,0.045-0.568,0.259-0.666,0.561c-0.098,0.301-0.018,0.623,0.207,0.844l2.011,1.961c0.087,0.082,0.124,0.205,0.104,0.322l-0.475,2.769c-0.055,0.312,0.07,0.618,0.328,0.806c0.254,0.186,0.586,0.207,0.865,0.063l2.484-1.307c0.107-0.056,0.234-0.056,0.341,0l2.485,1.307C20.253,23.968,20.384,24,20.515,24c0.172,0,0.34-0.055,0.482-0.158c0.256-0.188,0.383-0.494,0.329-0.806l-0.478-2.769c-0.02-0.117,0.021-0.24,0.104-0.322L22.966,17.984z M20.874,23.115c0.021,0.14-0.029,0.273-0.145,0.354c-0.115,0.086-0.258,0.094-0.385,0.029l-2.487-1.309c-0.118-0.063-0.251-0.096-0.382-0.096s-0.264,0.032-0.385,0.098l-2.485,1.307c-0.124,0.064-0.269,0.057-0.382-0.029c-0.116-0.08-0.168-0.215-0.146-0.354l0.479-2.77c0.045-0.267-0.043-0.539-0.236-0.729l-2.014-1.96c-0.104-0.099-0.135-0.237-0.092-0.371c0.045-0.136,0.154-0.228,0.295-0.249l2.778-0.403c0.269-0.038,0.5-0.207,0.618-0.448l1.242-2.521c0.064-0.127,0.184-0.202,0.326-0.202c0.144,0,0.265,0.075,0.328,0.202l1.242,2.521c0.117,0.241,0.35,0.41,0.617,0.448l2.78,0.403c0.14,0.021,0.249,0.113,0.292,0.249c0.044,0.134,0.011,0.272-0.092,0.371l-2.01,1.96c-0.192,0.189-0.281,0.461-0.235,0.729L20.874,23.115z"/></svg>
Add a search box to the page
2017-05-26 02:04:23 +03:00
</div>
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
<ul class="grid">
Update no search results message (#1036) * Restore "No matching icons found." message * Update message when no icons are found with a message that links to a new issue
2018-10-29 20:21:34 +03:00
<li class="grid-item--if-empty">
Icon missing? Request it <a href="https://github.com/simple-icons/simple-icons/issues/new?template=icon_request.md">here</a>.
</li>
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
<li class="grid-item grid-item--ad">
Update ad link Carbon Ads have changed their link structure.
2018-05-22 23:32:23 +03:00
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIPK7M&placement=simpleiconsorg" id="_carbonads_js"></script>
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
</li>
Remove 'index.html' empty lines to reduce built file size. (#3824) * Remove most of 'index.html' newlines to reduce built file size. * Add more whitespace control statements.
2020-11-12 16:06:25 +03:00
{%- for icon in iconsArray -%}
{%- assign iconArray = icon | split: "," -%}
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}; --order-alpha: {{ iconArray[8] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
{%- assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" -%}
{%- include_relative {{ filePath }} -%}
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</a>
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
</li>
{%- endfor -%}
{%- for icon in greyscaleIconsArray -%}
{%- assign iconArray = icon | split: "," -%}
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}; --order-alpha: {{ iconArray[8] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
{%- assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" -%}
{%- include_relative {{ filePath }} -%}
<h2 class="grid-item__title">{{ iconArray[5] }}</h2>
</a>
<p class="grid-item__subtitle">#{{ iconArray[4] }}</p>
</li>
{%- endfor -%}
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
</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 22:25:34 +03: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 16:22:18 +03: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 20:43:58 +03: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 20:33:25 +03:00
<script type="text/javascript" src="site_script.js"></script>
Removes relative includes from page template
2017-04-26 20:43:58 +03:00
</body>
Lint file formatting (primarily whitespace) (#1349) * Add editorconfig-checker and .editorconfig * Fix wslint errors
2019-04-17 12:59:44 +03:00
</html>
Reference in New Issue Copy Permalink