|
|
|
@ -19,6 +19,8 @@
|
|
|
|
|
--size-big: 2rem;
|
|
|
|
|
--size-normal: 1.3rem;
|
|
|
|
|
--size-small: 1rem;
|
|
|
|
|
|
|
|
|
|
--column-count: 4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
@ -83,7 +85,7 @@
|
|
|
|
|
}
|
|
|
|
|
.app__main__gitmojis {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
|
|
grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
|
|
|
|
|
}
|
|
|
|
|
.app__main__gitmojis__item {
|
|
|
|
|
margin: var(--size-normal);
|
|
|
|
@ -168,6 +170,65 @@
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1900px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-biggest: 5rem;
|
|
|
|
|
--size-normal: 1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1400px) {
|
|
|
|
|
.app__main {
|
|
|
|
|
padding: 0 6.25vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-biggest: 4rem;
|
|
|
|
|
--size-small: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
.app__main {
|
|
|
|
|
padding: 0 var(--size-normal);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 1100px) {
|
|
|
|
|
:root {
|
|
|
|
|
--column-count: 3;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 900px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-normal: 1.3rem;
|
|
|
|
|
--size-small: 1rem;
|
|
|
|
|
|
|
|
|
|
--column-count: 2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 750px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-normal: 1rem;
|
|
|
|
|
--size-small: 0.75rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 550px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-normal: 0.75rem;
|
|
|
|
|
--size-small: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 450px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-normal: 1rem;
|
|
|
|
|
--size-small: 0.75rem;
|
|
|
|
|
|
|
|
|
|
--column-count: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 300px) {
|
|
|
|
|
:root {
|
|
|
|
|
--size-normal: 0.75rem;
|
|
|
|
|
--size-small: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>module = {}</script>
|
|
|
|
|
<script defer src="https://unpkg.com/fast-dice-coefficient@1.0.3/dice.js"></script>
|
|
|
|
|