web/simple-icons
1
0
Fork 0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-11-16 00:59:07 +02:00
Code Releases Activity

Extract CSS and JavaScript from HTML

Browse Source 
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 2018-01-03 18:33:25 +01:00
parent 15a1b1c8e9
commit c639949524
3 changed files with 532 additions and 531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

550
index.html
View File

@ -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
View 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
View 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;
}