mirror of
https://github.com/Mibew/simple-icons.git
synced 2025-10-31 02:25:59 +03: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.
This commit is contained in:
Eric Cornelissen
parent
15a1b1c8e9
commit
c639949524
550
index.html
550
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 %}
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en-gb">
|
||||
<head>
|
||||
@ -145,6 +156,7 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="stylesheet.css" type="text/css">
|
||||
<script>
|
||||
(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),
|
||||
@ -154,365 +166,12 @@
|
||||
ga('create', 'UA-100751516-2', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function normalizeSearchTerm(value) {
|
||||
return value.toLowerCase().replace(/ /g, '');
|
||||
}
|
||||
var icons = [{{ allIconNames }}].map(normalizeSearchTerm);
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -568,177 +227,6 @@
|
||||
Use <a href="https://github.com/simple-icons/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
|
||||
<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>
|
||||
</footer>
|
||||
{% 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 %}
|
||||
<script type="text/javascript">
|
||||
(function(document) {
|
||||
var icons = [{{ allIconNames }}].map(normalizeSearchTerm),
|
||||
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);
|
||||
}
|
||||
|
||||
function normalizeSearchTerm(value) {
|
||||
return value.toLowerCase().replace(/ /g, '');
|
||||
}
|
||||
|
||||
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 );
|
||||
</script>
|
||||
<script type="text/javascript" src="site_script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
156
site_script.js
Normal file
156
site_script.js
Normal file
@ -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 );
|
||||
357
stylesheet.css
Normal file
357
stylesheet.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user