adjust book club landing page for ipad
This commit is contained in:
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user