kazhnuz/embarcadere
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Fixes #7
This commit is contained in:
Kazhnuz 2024-10-18 09:19:06 +02:00
parent 50b716e0db
commit 7fa342d6f5
1 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
public/css/index.css
View file

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