2018-08-06 15:30:43 +00:00
|
|
|
/** @format */
|
|
|
|
|
|
|
|
// By using CSS variables, we can switch the spacing rhythm using a single media query.
|
|
|
|
:root {
|
2018-08-08 22:11:54 +00:00
|
|
|
--large-gap: 40px;
|
2018-08-06 15:30:43 +00:00
|
|
|
--main-gap: 24px;
|
|
|
|
}
|
2018-08-08 22:11:54 +00:00
|
|
|
@media (max-width: 1100px) {
|
|
|
|
:root {
|
|
|
|
--large-gap: 24px;
|
|
|
|
}
|
|
|
|
}
|
2018-08-06 15:30:43 +00:00
|
|
|
@media (max-width: 782px) {
|
|
|
|
:root {
|
2018-08-08 22:11:54 +00:00
|
|
|
--large-gap: 16px;
|
2018-08-06 15:30:43 +00:00
|
|
|
--main-gap: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Set up animation
|
|
|
|
@keyframes loading-fade {
|
|
|
|
0% {
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
|
|
|
}
|