fix: responsive design
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Fixes #7
This commit is contained in:
parent
50b716e0db
commit
7fa342d6f5
1 changed files with 24 additions and 12 deletions
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue