tandem
/
camper
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add media queries to public.css to match original design

This commit is contained in:
jordi fita mas 2023-09-07 11:47:18 +02:00
parent 1f9668104e
commit ac46759df4
1 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/static/public.css
View File

@ -242,7 +242,7 @@ nav a {
min-height: 6rem; min-height: 6rem;
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
column-gap: 5rem; gap: 5rem;
padding: 5rem; padding: 5rem;
} }
@ -288,7 +288,7 @@ nav a {
.nature div + div { .nature div + div {
display: flex; display: flex;
column-gap: 5rem; gap: 5rem;
} }
.nature section { .nature section {
@ -369,13 +369,13 @@ nav a {
.environment .slick-arrow { .environment .slick-arrow {
font-size: 6rem; font-size: 6rem;
line-height: 1;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border: none !important; border: none !important;
background: none; background: none;
cursor: pointer; cursor: pointer;
transition: transform 0.5s ease; transition: transform 0.5s ease;
margin-right: 4rem;
} }
.environment .slick-prev.slick-arrow, .environment .slick-next.slick-arrow { .environment .slick-prev.slick-arrow, .environment .slick-next.slick-arrow {
@ -384,6 +384,7 @@ nav a {
.environment .slick-prev { .environment .slick-prev {
order: 2; order: 2;
margin: 2.5rem 4rem 0 0;
} }
.environment .slick-prev:hover { .environment .slick-prev:hover {
@ -392,6 +393,7 @@ nav a {
.environment .slick-next { .environment .slick-next {
order: 3; order: 3;
margin: 2.5rem 7rem 0 0;
} }
.environment .slick-next:hover { .environment .slick-next:hover {
@ -402,6 +404,7 @@ nav a {
font-weight: 900; font-weight: 900;
font-size: calc(1.8rem + 8vw); font-size: calc(1.8rem + 8vw);
line-height: 1.2em; line-height: 1.2em;
margin: 10rem 0;
} }
footer { footer {
@ -409,3 +412,23 @@ footer {
text-align: center; text-align: center;
padding: 2.5rem; padding: 2.5rem;
} }
@media (max-width: 64rem) {
.nature div + div {
flex-direction: column;
}
.nature section {
max-width: 100%;
}
}
@media (max-width: 48rem) {
.nature div:first-child {
flex-direction: column;
}
.nature h2 {
width: 100%;
}
}