fix: responsive design
All checks were successful
continuous-integration/drone/push Build is passing

Fixes #7
This commit is contained in:
Kazhnuz 2024-10-18 09:19:06 +02:00
parent 50b716e0db
commit 7fa342d6f5

View file

@ -38,6 +38,7 @@ body {
text-align: center;
display: flex;
flex-direction: column;
place-items: center;
padding: 1rem;
@ -76,7 +77,6 @@ h2 {
}
main {
max-width: 1280px;
width:100%;
margin: 0 auto;
}
@ -158,18 +158,34 @@ main input:hover, main input:focus-visible {
.cols {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (min-width: 800px) {
.cols {
grid-template-columns: 1fr 1fr 1fr 1fr;
main {
max-width: 800px;
}
}
@media (min-width: 1024px) {
.cols {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
main {
max-width: 1000px;
}
.mascotte {
position: absolute;
bottom: 16px;
right: 16px;
}
}
@media (min-width: 1500px) {
.cols {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
main {
max-width: 1280px;
}
}
.linklist {
@ -179,6 +195,7 @@ main input:hover, main input:focus-visible {
border-radius:6px;
padding:0.66rem;
text-align:left;
z-index: 1;
}
.linklist a {
@ -197,12 +214,6 @@ main input:hover, main input:focus-visible {
text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
}
.mascotte {
position: absolute;
bottom: 16px;
right: 16px;
}
.mascotte > div {
position: relative;
}
@ -212,6 +223,7 @@ main input:hover, main input:focus-visible {
height: auto;
filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.6));
margin: 20px;
z-index: 0;
}
.mascotte:hover .mascotte-message {