|
|
|
@ -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> |
|
|
|
|