diff --git a/index.html b/index.html
index f5cf9e6e8..87a613650 100644
--- a/index.html
+++ b/index.html
@@ -116,9 +116,20 @@
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ forloop.index }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% endif %}
{% endfor %}
+
{% assign iconsArray = iconsUnsortedString | split: ";" | sort %}
{% assign greyscaleIconsArray = greyscaleIconsUnsortedString | split: ";" | sort | reverse %}
+{% 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 %}
+
@@ -145,6 +156,7 @@
+
-
+
@@ -568,177 +227,6 @@
Use GitHub for requests, corrections and contributions.
Share this on Twitter!
- {% 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 %}
-
+
diff --git a/site_script.js b/site_script.js
new file mode 100644
index 000000000..852df751a
--- /dev/null
+++ b/site_script.js
@@ -0,0 +1,156 @@
+(function(document) {
+ var queryParameter = 'q',
+ $grid = document.querySelector('.grid'),
+ $icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
+ $search = document.querySelector('.search'),
+ $searchClose = $search.querySelector('.search__close'),
+ $searchInput = $search.querySelector('input'),
+ $sortColor = document.getElementById('sort-color'),
+ $sortAlpha = document.getElementById('sort-alphabetically');
+
+ // Remove the "disabled" attribute from the search input
+ $searchInput.setAttribute('title', 'Search Simple Icons');
+ $searchInput.removeAttribute('disabled');
+
+ // include a modified debounce underscorejs helper function.
+ // see
+ // - http://underscorejs.org/docs/underscore.html#section-83
+ // - http://underscorejs.org/#debounce
+ function debounce(func, wait, immediate) {
+ var timeout, args, context, timestamp, result;
+
+ var later = function() {
+ var last = +new Date - timestamp;
+
+ if (last < wait && last >= 0) {
+ timeout = setTimeout(later, wait - last);
+ } else {
+ timeout = null;
+ if (!immediate) {
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ }
+ }
+ };
+
+ return function() {
+ context = this;
+ args = arguments;
+ timestamp = +new Date;
+ var callNow = immediate && !timeout;
+ if (!timeout) timeout = setTimeout(later, wait);
+ if (callNow) {
+ result = func.apply(context, args);
+ context = args = null;
+ }
+
+ return result;
+ };
+ }
+
+ // Get any parameter from the URL's search section (location.search).
+ // see
+ // - https://davidwalsh.name/query-string-javascript
+ // - https://github.com/WebReflection/url-search-params
+ function getUrlParameter(parameter) {
+ name = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+ var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+ var results = regex.exec(location.search);
+ return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+ }
+
+ function search(value) {
+ var hiddenCounter = 0,
+ query = normalizeSearchTerm(value);
+
+ icons.map(function(icon, iconIndex) {
+ var letters = query.split(''),
+ indexes = [],
+ index = 0;
+
+ if (icon === query) {
+ return {element: $icons[iconIndex], score: 1};
+ }
+
+ for (var i = 0; i < letters.length; i++) {
+ var letter = letters[i];
+ index = icon.indexOf(letter, index);
+
+ if (index === -1) {
+ $icons[iconIndex].classList.add('hidden');
+ return null;
+ }
+
+ indexes.push(index);
+ index++;
+ }
+
+ return {
+ element: $icons[iconIndex],
+ score: indexes.reduce(function(a, b) {
+ return a + b;
+ }, 2)
+ };
+ }).filter(function(item) {
+ return item !== null;
+ }).sort(function(a, b) {
+ return a.score - b.score;
+ }).forEach(function(item, index) {
+ item.element.classList.remove('hidden');
+
+ if (query !== '') {
+ // Order according to relevance (i.e. score) if there is a query
+ item.element.style.order = index;
+ } else {
+ // Use color-based order if there is no query
+ item.element.style.removeProperty('order');
+ }
+ });
+
+ $grid.classList.toggle('search__empty', hiddenCounter == icons.length);
+ }
+
+ document.addEventListener('DOMContentLoaded', function() {
+ // Load search query if present
+ var query = getUrlParameter(queryParameter);
+ if (query) {
+ $search.classList.add('search--active');
+ $searchInput.value = query;
+ search(query);
+ }
+ });
+ $search.addEventListener('input', debounce(function(e) {
+ e.preventDefault();
+
+ var value = e.target.value;
+ if (value) {
+ $search.classList.add('search--active');
+ window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
+ } else {
+ $search.classList.remove('search--active');
+ window.history.replaceState(null, '', '/');
+ }
+ search(value);
+ }, 50), false);
+ $searchClose.addEventListener('click', function(e) {
+ e.stopPropagation();
+
+ $searchInput.value = '';
+ $search.classList.remove('search--active');
+ window.history.replaceState(null, '', '/');
+ search('');
+ }, false);
+
+ $sortColor.addEventListener('click', function() {
+ $icons.forEach(icon => { icon.style.order = null; });
+
+ $sortColor.classList.add('active');
+ $sortAlpha.classList.remove('active');
+ });
+ $sortAlpha.addEventListener('click', function() {
+ $icons.forEach(icon => { icon.style.order = icon.getAttribute('order'); });
+
+ $sortAlpha.classList.add('active');
+ $sortColor.classList.remove('active');
+ });
+})( document );
diff --git a/stylesheet.css b/stylesheet.css
new file mode 100644
index 000000000..d97e89717
--- /dev/null
+++ b/stylesheet.css
@@ -0,0 +1,357 @@
+* {
+ box-sizing: border-box;
+}
+
+:root {
+ font-size: 100%;
+ height: 100%;
+}
+
+a {
+ text-decoration: none;
+}
+
+abbr {
+ text-decoration: none;
+}
+
+body {
+ background-color: #FFFFFF;
+ display: flex;
+ flex-direction: column;
+ color: #263238;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ font-size: 0.875rem;
+ height: 100%;
+ line-height: 1.5rem;
+ margin: 0;
+}
+
+svg {
+ fill: currentColor;
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
+#carbonads {
+ height: 100%;
+ width: 100%;
+}
+#carbonads a {
+ color: #263238;
+}
+#carbonads > span {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: space-between;
+}
+
+.carbon-img {
+ display: block;
+ padding: 1rem 1rem 0.5rem;
+}
+
+.carbon-text {
+ display: block;
+ font-size: 0.75rem;
+ line-height: 1rem;
+ margin: 0 auto;
+ max-width: 15rem;
+}
+
+.carbon-poweredby {
+ font-size: 0.625rem;
+ font-weight: 700;
+ line-height: 1.5rem;
+ opacity: 0.25;
+ text-transform: uppercase;
+}
+
+.footer {
+ background-color: #EEE;
+ margin-top: auto;
+ padding: 1.5rem;
+}
+@media (min-width: 45rem) {
+ .footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 3rem;
+ }
+}
+.footer a {
+ color: #263238;
+ text-decoration: underline;
+}
+.footer p {
+ margin: 0;
+ opacity: 0.5;
+}
+a.share-button {
+ background-color: #1DA1F2;
+ border-radius: 0.125rem;
+ color: #FFF;
+ display: block;
+ margin: 0.75rem 0 0;
+ padding: 0.75rem 1.5rem;
+ text-align: center;
+ text-decoration: none;
+}
+@media (min-width: 45rem) {
+ a.share-button {
+ margin: 0;
+ }
+}
+
+.hero {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ margin: 0;
+ padding: 3rem 1.5rem 1.5rem;
+ text-align: center;
+}
+@media (min-width: 45rem) {
+ .hero {
+ padding: 4.5rem 3rem 1.5rem;
+ }
+}
+
+.search {
+ display: flex;
+ align-items: center;
+ margin: 1rem 1.5rem;
+ text-align: center;
+}
+@media (min-width: 45rem) {
+ .search {
+ margin: 1rem 3rem;
+ text-align: left;
+ }
+}
+
+.search .search__wrapper {
+ display: inline-block;
+ position: relative;
+}
+.search .search__close {
+ display: none;
+ font-size: 1rem;
+ padding: 6px 12px;
+ position: absolute;
+ right: 0;
+ top: 1px;
+}
+.search .search__close span {
+ cursor: pointer;
+}
+
+.search input {
+ color: #333;
+ font-size: 1rem;
+ padding: 6px 12px;
+}
+@media (min-width: 45rem) {
+ .search input {
+ width: 250px;
+ }
+}
+
+.search--active .search__close {
+ display: block;
+}
+.search--active input {
+ padding-right: 32px;
+}
+
+.sort-btn {
+ cursor: pointer;
+ margin-left: .5rem;
+ opacity: .5;
+}
+.sort-btn.active {
+ opacity: 1;
+}
+.sort-btn:first-of-type {
+ margin-left: 1rem;
+}
+
+.sort-btn:hover {
+ opacity: 1;
+}
+.sort-btn:hover path:first-of-type {
+ opacity: 0.8;
+}
+
+#sort-color:hover path:nth-of-type(2) {
+ fill: #E57373;
+}
+#sort-color:hover path:nth-of-type(3) {
+ fill: #F44336;
+}
+#sort-color:hover path:nth-of-type(4) {
+ fill: #D32F2F;
+}
+#sort-color:hover path:nth-of-type(5) {
+ fill: #B71C1C;
+}
+
+#sort-alphabetically:hover path:nth-of-type(2),
+#sort-alphabetically:hover path:nth-of-type(3) {
+ opacity: 1;
+}
+
+.grid {
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ margin: 1.5rem;
+ margin-top: 0;
+ padding: 0;
+}
+@media (min-width: 45rem) {
+ .grid {
+ margin: 3rem;
+ margin-top: 0;
+ }
+}
+
+.grid.search__empty:after {
+ content: 'No matching icons found.';
+ font-size: 1.25em;
+ line-height: 1.5em;
+ text-align: center;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+@supports (display: grid) {
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+ grid-auto-rows: min-content;
+ grid-column-gap: 0.375rem;
+ grid-row-gap: 0.375rem;
+ grid-auto-flow: dense;
+ }
+ .grid.search__empty:after {
+ grid-column: 1/span 2;
+ }
+
+ @media (min-width: 30.75rem) {
+ .grid.search__empty:after {
+ grid-column: 1/-3;
+ }
+ }
+}
+
+.grid-item {
+ background-color: #757575;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 1rem;
+ text-align: center;
+}
+.grid-item--light {
+ color: #FFF;
+}
+.grid-item--dark {
+ color: #222;
+}
+.grid-item__link {
+ color: inherit;
+}
+@supports not (display: grid) {
+ .grid-item {
+ border: 0.1875rem solid #FFF;
+ padding: 0 0 0.75rem;
+ width: 20%;
+ }
+}
+
+.grid-item--ad {
+ background-color: #EEE;
+ grid-column: -2 / -1;
+ grid-row-end: span 2;
+ height: auto;
+}
+@media (min-width: 21.75rem) {
+ .grid-item--ad {
+ grid-column: -3 / -1;
+ }
+}
+@supports not (display: grid) {
+ .grid-item--ad {
+ width: 100%;
+ }
+}
+
+.grid-item__link {
+ display: block;
+ text-align: center;
+ width: 100%;
+}
+
+.grid-item__image {
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
+.grid-item__title {
+ font-size: 0.75rem;
+ font-weight: 400;
+ line-height: 1rem;
+ margin: 0;
+}
+
+.grid-item__subtitle {
+ font-size: 0.75rem;
+ line-height: 1rem;
+ margin: 0;
+ opacity: 0.5;
+}
+
+.navbar {
+ background-color: #263238;
+}
+
+.navbar__nav {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+@media (min-width: 45rem) {
+ .navbar__nav {
+ padding: 0 1.5rem;
+ }
+}
+
+.navbar__nav-item a {
+ color: #FFF;
+ display: block;
+ opacity: 0.5;
+ padding: 1.5rem 0.375rem;
+}
+.navbar__nav-item a:focus, .navbar__nav-item a:hover {
+ opacity: 1;
+}
+.navbar__nav-item:last-child a {
+ padding: 1.5rem 1.5rem 1.5rem 0.375rem;
+}
+
+.navbar__nav-item--home {
+ flex-grow: 1;
+}
+.navbar__nav-item--home a {
+ opacity: 1;
+ padding: 1.5rem 0 1.5rem 1.5rem;
+}
+
+.hidden {
+ display: none;
+}