adjust book club landing page for ipad

This commit is contained in:
2025-04-30 16:56:13 +05:00
parent a9e50301f6
commit 11ae7b897e
3 changed files with 83 additions and 3 deletions

View File

@ -2,9 +2,15 @@
@if($breakpoint == desktop) {
@media (min-width: 1084px) { @content }
}
@if($breakpoint == tablet) {
@media (min-width: 481px) and (max-width: 1083px) { @content }
}
@if($breakpoint == mobile) {
@media (max-width: 480px) { @content }
}
}
:root {
--background: #040810;
@ -41,6 +47,10 @@ body {
@include respond(mobile) {
padding-inline: 3rem;
}
@include respond(tablet) {
padding-inline: 3rem;
}
}
a {
@ -150,6 +160,12 @@ section.hero {
flex-direction: column;
padding: 3rem;
}
@include respond(tablet) {
display: flex;
flex-direction: column;
padding-inline: 3rem;
}
.hero--text {
grid-column: 2 / 4;
@ -166,11 +182,17 @@ section.hero {
font-size: 32px;
line-height: 1;
margin-top: 2rem;
}
@include respond(tablet) {
font-size: 32px;
line-height: 1;
margin-top: 2rem;
}
}
p {
font-family: var(wp--preset--font-family--sora);
font-family: var(--wp--preset--font-family--sora);
font-size: 18px;
@include respond(mobile) { font-size: 16px; }
max-width: 446px;
@ -194,6 +216,12 @@ section.hero {
border-radius: 12px;
border-right: 1px solid;
}
@include respond(tablet) {
order: -1;
border-radius: 12px;
border-right: 1px solid;
}
}
}
}
@ -210,6 +238,9 @@ section.hero {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
@include respond(tablet) {
justify-content: center;
}
@include respond(mobile) {
display: grid;
@ -239,6 +270,7 @@ section.pitch {
.pitch--cards {
display: grid;
grid-template-columns: repeat(3, 300px);
@include respond(tablet) { grid-template-columns: repeat(3, 1fr); }
@include respond(mobile) { grid-template-columns: 1fr; }
gap: 16px;
@ -455,6 +487,7 @@ section.book-club-benefits {
img {
@include respond(desktop) { max-width: 215px; }
@include respond(mobile) { width: 100%; }
@include respond(tablet) { width: 100%; }
border: 1px solid var(--foreground-text);
border-radius: 12px;
}
@ -496,6 +529,7 @@ section.book-club-benefits {
footer.somos-infinitos-footer {
@include respond(desktop) { padding-inline: 114px; }
@include respond(mobile) { padding-inline: 3rem; }
@include respond(tablet) { padding-inline: 3rem; }
padding-top: 73px;
margin-top: 200px;
padding-bottom: 150px;