Browse Source

📱 Implement responsive design

master
KaKi87 1 year ago
parent
commit
8f010893e0
  1. 63
      index.html

63
index.html

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

Loading…
Cancel
Save