adjust book club page on mobile

This commit is contained in:
2025-04-22 17:56:46 +05:00
parent 961d7abe09
commit b3390c1c55
3 changed files with 73 additions and 8 deletions

View File

@ -14,6 +14,10 @@
--font-family-serif: 'EB Garamond', serif;
--font-family-mono: 'Jura', sans-serif;
--font-family-sans: 'Sora', sans-serif;
@include respond(mobile) {
--wp--preset--font-size--x-large: 32px !important;
}
}
* {
@ -34,7 +38,9 @@ body {
.container {
max-width: 908px;
margin-inline: auto;
@include respond(mobile) { padding: 3rem; }
@include respond(mobile) {
padding-inline: 3rem;
}
}
a {
@ -126,6 +132,9 @@ p {
section {
padding-block: 82px;
@include respond(mobile) {
padding-block: 54px;
}
}
section.hero {
@ -191,6 +200,9 @@ section.hero {
.sponsor-logos {
padding-top: 78px;
@include respond(mobile) {
padding-top: 42px;
}
padding-bottom: 41px;
.container {
display: flex;
@ -198,13 +210,12 @@ section.hero {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
// column-gap: 2rem;
// row-gap: 1rem;
@include respond(mobile) {
display: grid;
place-items: center;
gap: 1.2em;
justify-content: center;
}
img { transform: scale(0.67) }
}
@ -217,6 +228,7 @@ section.pitch {
h2 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 38px;
@include respond(mobile) {font-size: 32px;}
font-weight: 400;
line-height: 100%;
max-width: 527px;
@ -248,6 +260,7 @@ section.pitch {
p {
font-family: var(--wp--preset--font-family--sora);
font-size: 16px;
@include respond(mobile) { font-size: 14px; }
font-weight: 300;
line-height: 1.3;
}
@ -296,11 +309,16 @@ section.book-club-examples {
padding-inline: 40px;
padding-block: 36px;
p.book-club-example-card--item--text--heading { font-size: 18px; }
p { font-size: 16px; }
p {
font-size: 16px;
@include respond(mobile) {
font-size: 14px;
}
}
strong { font-weight: 600; }
&--description { font-size: 16px; }
@include respond(mobile) {
padding-block: 2rem;
padding-block: 1.8rem;
}
}
}
@ -358,6 +376,9 @@ section.testimonial-section {
&--description {
font-size: 16px;
@include respond(mobile) {
font-size: 14px;
}
}
}
}
@ -365,6 +386,9 @@ section.testimonial-section {
section.faq {
padding-block: 84px;
@include respond(mobile) {
padding-block: 42px;
}
h2 {
text-align: center;
font-weight: 400;