Chore: resize carrousel on small screens

This commit is contained in:
Ward Truyen 2024-11-21 13:58:04 +01:00
parent 36ba53eb2e
commit 0c6dbbc544

View File

@ -17,7 +17,7 @@ body {
margin: 0.5em; margin: 0.5em;
} }
.card{ .card {
padding: 10px; padding: 10px;
border: 1px solid darkblue; border: 1px solid darkblue;
background-color: #ddddddcc; background-color: #ddddddcc;
@ -27,7 +27,7 @@ body {
display: inline-block; display: inline-block;
} }
.card>h1{ .card>h1 {
font-size: 2em; font-size: 2em;
} }
@ -35,7 +35,7 @@ html {
background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F); background-image: linear-gradient(-30deg, #C0E0FF6F 70%, #FFE0C04F);
} }
.flex{ .flex {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -67,7 +67,7 @@ html {
padding: 10px; padding: 10px;
/* border: 1px solid darkblue; */ /* border: 1px solid darkblue; */
/* background-color: #80808040; */ /* background-color: #80808040; */
background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000 ); background-image: linear-gradient(#00000000, #d0e08030, #d0e08030, #00000000);
/* box-shadow: 3px 3px 3px #30303090; */ /* box-shadow: 3px 3px 3px #30303090; */
/* border-radius: 4px; */ /* border-radius: 4px; */
margin-top: 1em; margin-top: 1em;
@ -103,7 +103,7 @@ html {
text-shadow: 0px 0px 4px white, 2px 2px 6px; text-shadow: 0px 0px 4px white, 2px 2px 6px;
} }
.content>p{ .content>p {
margin-left: 1em; margin-left: 1em;
} }
@ -111,13 +111,15 @@ html {
margin-left: 0.2em; margin-left: 0.2em;
} }
.content>h2{ .content>h2 {
margin-top: 1.5em; margin-top: 1.5em;
} }
.content>h2 { .content>h2 {
margin-top: 0.2em; margin-top: 0.2em;
} }
.content>h3{
.content>h3 {
margin-left: 0.8em; margin-left: 0.8em;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -161,10 +163,15 @@ html.theme-dark {
margin: 0 auto; margin: 0 auto;
} }
#image-carousel{ #image-carousel {
width: 50rem; width: 50rem;
margin: 0 auto; margin: 0 auto;
/* background: #DD8888DD; */ }
@media only screen and (max-width: 600px) {
#image-carousel {
width: 25rem;
}
} }
@media(orientation: portrait) { @media(orientation: portrait) {