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

@ -6,6 +6,11 @@
--font-family-mono: "Jura", sans-serif; --font-family-mono: "Jura", sans-serif;
--font-family-sans: "Sora", sans-serif; --font-family-sans: "Sora", sans-serif;
} }
@media (max-width: 480px) {
:root {
--wp--preset--font-size--x-large: 32px !important;
}
}
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -28,7 +33,7 @@ body {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.container { .container {
padding: 3rem; padding-inline: 3rem;
} }
} }
@ -120,6 +125,11 @@ p {
section { section {
padding-block: 82px; padding-block: 82px;
} }
@media (max-width: 480px) {
section {
padding-block: 54px;
}
}
section.hero { section.hero {
padding-block: 0; padding-block: 0;
@ -187,6 +197,11 @@ section.hero .hero--container .hero--img {
padding-top: 78px; padding-top: 78px;
padding-bottom: 41px; padding-bottom: 41px;
} }
@media (max-width: 480px) {
.sponsor-logos {
padding-top: 42px;
}
}
.sponsor-logos .container { .sponsor-logos .container {
display: flex; display: flex;
text-align: center; text-align: center;
@ -199,6 +214,7 @@ section.hero .hero--container .hero--img {
display: grid; display: grid;
place-items: center; place-items: center;
gap: 1.2em; gap: 1.2em;
justify-content: center;
} }
} }
.sponsor-logos .container img { .sponsor-logos .container img {
@ -218,6 +234,11 @@ section.pitch h2 {
margin-inline: auto; margin-inline: auto;
margin-bottom: 54px; margin-bottom: 54px;
} }
@media (max-width: 480px) {
section.pitch h2 {
font-size: 32px;
}
}
section.pitch .pitch--cards { section.pitch .pitch--cards {
display: grid; display: grid;
grid-template-columns: repeat(3, 300px); grid-template-columns: repeat(3, 300px);
@ -247,6 +268,11 @@ section.pitch .pitch--cards .pitch--card-item p {
font-weight: 300; font-weight: 300;
line-height: 1.3; line-height: 1.3;
} }
@media (max-width: 480px) {
section.pitch .pitch--cards .pitch--card-item p {
font-size: 14px;
}
}
section.book-club-examples { section.book-club-examples {
text-align: center; text-align: center;
@ -306,6 +332,11 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p { section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
font-size: 16px; font-size: 16px;
} }
@media (max-width: 480px) {
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
font-size: 14px;
}
}
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text strong { section.book-club-examples .book-club-example-cards .book-club-example-card--item--text strong {
font-weight: 600; font-weight: 600;
} }
@ -314,7 +345,7 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
} }
@media (max-width: 480px) { @media (max-width: 480px) {
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text { section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
padding-block: 2rem; padding-block: 1.8rem;
} }
} }
section.book-club-examples .btn { section.book-club-examples .btn {
@ -369,10 +400,20 @@ section.testimonial-section .testimonial-cards .testimonial-card--item .bio--nam
section.testimonial-section .testimonial-cards .testimonial-card--item--description { section.testimonial-section .testimonial-cards .testimonial-card--item--description {
font-size: 16px; font-size: 16px;
} }
@media (max-width: 480px) {
section.testimonial-section .testimonial-cards .testimonial-card--item--description {
font-size: 14px;
}
}
section.faq { section.faq {
padding-block: 84px; padding-block: 84px;
} }
@media (max-width: 480px) {
section.faq {
padding-block: 42px;
}
}
section.faq h2 { section.faq h2 {
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;

View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AA9BE;EA4BJ;IAG6B;;;;AAG7B;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAxFE;EAiFJ;IAUI;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AA/GA;EA2GF;IAMI;;;AAEF;EACE;;;AAKN;EACE;;;AAGF;EACE;;AACA;EAEE;EACA;EACA;;AAnIA;EA+HF;IAOI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AArJJ;EAiJE;IAMI;IACA;IACA;;;AAIJ;EACE;EACA;EAEA;;AAjKJ;EA6JE;IAG6B;;;AAK/B;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;;AA/KF;EAqKA;IAaI;IACA;IACA;;;;AAMR;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAlMA;EA6LF;IAUI;IACA;IACA;;;AAEF;EAAM;;;AAIV;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;;AAjOA;EA6NF;IAG6B;;;AAG3B;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAMR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;AAhRF;EAyQA;IAE6B;;;AA9Q7B;EA4QA;IAQ8B;;;AAE5B;EACE;EACA;EACA;;AAtRJ;EAmRE;IAKI;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAgD;;AAChD;EAAI;;AACJ;EAAS;;AACT;EAAiB;;AAvSrB;EAgSE;IASI;;;AAMR;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AA/TA;EA4TF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAzUF;EAqUA;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;AAMR;EACE;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EAMA;;AA5XF;EAmXA;IAKI;IACA;IACA;;;AAGF;EAAiB;;AACjB;EACE;EACA;EAEA;;AAlYJ;EA8XE;IAG6B;;;AAG7B;EACE;EACA;EACA;;AACA;EAAO;;AAxYX;EA0YM;IAAO;;EACP;IACE;IACA;;;AAMR;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AAtaA;EA+ZF;IAG6B;;;AAOzB;EAGE;EACA;;AAhbJ;EA4aE;IAC8B;;;AA1ahC;EAyaE;IAE6B;;;AAI7B;EACE;EACA;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AA9dE;EAqdJ;IAC8B;;;AAnd1B;EAkdJ;IAE6B;;;AApdzB;EAkdJ;IAaI;IACA;IACA;;EAHA;IAAa;;;AAMf;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAhfF;EA4eA;IAMI;IACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAGA;EACA;;AAphBF;EA+gBA;IAG6B;;;AAG3B;EACE;EACA;EAGA;EACA;EACA;EACA;;AAhiBJ;EAwhBE;IAG8B;;;AAxhBhC;EAqhBE;IAI6B;;;AAK3B;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAxiBJ;EAmiBE;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"} {"version":3,"sourceRoot":"","sources":["../scss/static.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;EAEA;EACA;EACA;;AAVE;EAGJ;IAUI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAlCE;EAgCJ;IAII;;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AA9FE;EAuFJ;IAUI;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AArHA;EAiHF;IAMI;;;AAEF;EACE;;;AAKN;EACE;;AAhIE;EA+HJ;IAGI;;;;AAIJ;EACE;;AACA;EAEE;EACA;EACA;;AA5IA;EAwIF;IAOI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AA9JJ;EA0JE;IAMI;IACA;IACA;;;AAIJ;EACE;EACA;EAEA;;AA1KJ;EAsKE;IAG6B;;;AAK/B;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;;AAxLF;EA8KA;IAaI;IACA;IACA;;;;AAMR;EACE;EAIA;;AAxME;EAmMJ;IAGI;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AA9MA;EAyMF;IAQI;IACA;IACA;IACA;;;AAEF;EAAM;;;AAIV;EACE;EACA;;AAEA;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;;AAtOA;EA8NF;IAG4B;;;AAQ5B;EACE;EACA;EAEA;;AA7OA;EAyOF;IAG6B;;;AAG3B;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EAEA;EACA;;AAnQJ;EA8PE;IAG6B;;;;AAQnC;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;AA7RF;EAsRA;IAE6B;;;AA3R7B;EAyRA;IAQ8B;;;AAE5B;EACE;EACA;EACA;;AAnSJ;EAgSE;IAKI;IACA;IACA;IACA;IACA;;;AAIJ;EAEE;EACA;;AAFA;EAAI;;AAGJ;EAAgD;;AAChD;EACE;;AAnTN;EAkTI;IAGI;;;AAGJ;EAAS;;AACT;EAAiB;;AAzTrB;EA6SE;IAcI;;;AAMR;EACE;EACA;EACA;;;AAKF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAjVA;EA8UF;IAKI;IACA;;;AAGF;EACE;EACA;EACA;EACA;;AA3VF;EAuVA;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AApXJ;EAmXE;IAGI;;;;AAOV;EACE;;AA9XE;EA6XJ;IAGI;;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;EACA;EAMA;;AApZF;EA2YA;IAKI;IACA;IACA;;;AAGF;EAAiB;;AACjB;EACE;EACA;EAEA;;AA1ZJ;EAsZE;IAG6B;;;AAG7B;EACE;EACA;EACA;;AACA;EAAO;;AAhaX;EAkaM;IAAO;;EACP;IACE;IACA;;;AAMR;EACE;;;AAKN;EACE;;AACA;EACE;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;;AA9bA;EAubF;IAG6B;;;AAOzB;EAGE;EACA;;AAxcJ;EAocE;IAC8B;;;AAlchC;EAicE;IAE6B;;;AAI7B;EACE;EACA;EACA;;AACA;EACE;;AAON;EACE;EACA;;AAEF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;AAtfE;EA6eJ;IAC8B;;;AA3e1B;EA0eJ;IAE6B;;;AA5ezB;EA0eJ;IAaI;IACA;IACA;;EAHA;IAAa;;;AAMf;EACE;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAxgBF;EAogBA;IAMI;IACA;;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAQR;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EAGA;EACA;;AA5iBF;EAuiBA;IAG6B;;;AAG3B;EACE;EACA;EAGA;EACA;EACA;EACA;;AAxjBJ;EAgjBE;IAG8B;;;AAhjBhC;EA6iBE;IAI6B;;;AAK3B;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAhkBJ;EA2jBE;IAQI;IACA;IACA;;;AAGF;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACE;;AACA;EACE","file":"static.css"}

View File

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