autonomic-cooperative/somos-infinitos-theme
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix book club page on mobile

Browse Source
This commit is contained in:
Aadil Ayub
2025-04-09 13:33:31 +05:00
parent 2c61815891
commit dfba445dc8
4 changed files with 337 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
assets/css/static.css
View File

@ -26,6 +26,11 @@ body {
max-width: 908px;
margin-inline: auto;
}
@media (max-width: 480px) {
.container {
padding: 3rem;
}
}
a {
color: var(--foreground-text);
@ -34,6 +39,7 @@ a {
h2 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 38px;
line-height: 1;
}
.btn {
@ -64,6 +70,13 @@ h2 {
text-transform: uppercase;
align-items: center;
}
@media (max-width: 480px) {
.site-navigation {
flex-direction: column;
padding-top: 3rem;
gap: 2rem;
}
}
.site-navigation ul.pages-list {
display: flex;
justify-content: space-between;
@ -83,26 +96,43 @@ section {
padding-block: 82px;
}
.hero--container {
section.hero {
padding-block: 0;
}
section.hero .hero--container {
margin-inline: auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.hero--container .hero--text {
@media (max-width: 480px) {
section.hero .hero--container {
display: flex;
flex-direction: column;
padding: 3rem;
}
}
section.hero .hero--container .hero--text {
grid-column: 2/4;
}
.hero--container .hero--text h2 {
section.hero .hero--container .hero--text h2 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 38px;
font-weight: 400;
max-width: 385px;
}
.hero--container .hero--text p {
@media (max-width: 480px) {
section.hero .hero--container .hero--text h2 {
font-size: 34px;
line-height: 1;
margin-top: 2rem;
}
}
section.hero .hero--container .hero--text p {
font-family: var(wp--preset--font-family--sora);
font-size: 18px;
max-width: 446px;
}
.hero--container .hero--img {
section.hero .hero--container .hero--img {
grid-column: 4/6;
width: 100%;
border: 1px solid white;
@ -110,6 +140,13 @@ section {
border-bottom-left-radius: 12px;
border-right: none;
}
@media (max-width: 480px) {
section.hero .hero--container .hero--img {
order: -1;
border-radius: 12px;
border-right: 1px solid;
}
}
.sponsor-logos {
padding-block: 41px;
@ -123,6 +160,11 @@ section {
column-gap: 2rem;
row-gap: 1rem;
}
@media (max-width: 480px) {
.sponsor-logos .container {
justify-content: space-around;
}
}
section.pitch {
padding-block: 82px;
@ -142,6 +184,11 @@ section.pitch .pitch--cards {
grid-template-columns: repeat(3, 300px);
gap: 16px;
}
@media (max-width: 480px) {
section.pitch .pitch--cards {
grid-template-columns: 1fr;
}
}
section.pitch .pitch--cards .pitch--card-item {
border: 1px solid #FAF7EF;
border-radius: 12px;
@ -182,11 +229,25 @@ section.book-club-examples .book-club-example-cards .book-club-example-card--ite
margin-inline: auto;
margin-block: 36px;
}
@media (max-width: 480px) {
section.book-club-examples .book-club-example-cards .book-club-example-card--item {
flex-direction: column;
}
}
section.book-club-examples .book-club-example-cards .book-club-example-card--item--img {
border-radius: 12px;
border-right: 1px solid #F6F6F8;
object-fit: cover;
}
@media (max-width: 480px) {
section.book-club-examples .book-club-example-cards .book-club-example-card--item--img {
width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: none;
border-bottom: 1px solid var(--foreground-text);
}
}
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
padding-inline: 40px;
padding-block: 36px;
@ -194,15 +255,23 @@ 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 * {
text-align: left;
}
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.book-club-example-card--item--text--heading {
font-size: 18px;
}
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text p {
font-size: 16px;
}
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text strong {
font-weight: 600;
}
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text--description {
font-size: 16px;
}
@media (max-width: 480px) {
section.book-club-examples .book-club-example-cards .book-club-example-card--item--text {
padding-block: 2rem;
}
}
section.book-club-examples .btn {
display: inline-block;
padding-inline: 5em;
@ -218,12 +287,23 @@ section.testimonial-section .testimonial-cards {
gap: 1rem;
padding-block: 84px;
}
@media (max-width: 480px) {
section.testimonial-section .testimonial-cards {
flex-direction: column;
gap: 2rem;
}
}
section.testimonial-section .testimonial-cards .testimonial-card--item {
border: 1px solid var(--foreground-text);
border-radius: 12px;
padding: 64px;
max-width: 446px;
}
@media (max-width: 480px) {
section.testimonial-section .testimonial-cards .testimonial-card--item {
padding: 3rem;
}
}
section.testimonial-section .testimonial-cards .testimonial-card--item .bio {
display: flex;
gap: 1rem;
@ -262,6 +342,11 @@ section.faq .faq-list .faq--item {
padding-block: 45px;
border-bottom: 1px solid;
}
@media (max-width: 480px) {
section.faq .faq-list .faq--item {
padding-block: 30px;
}
}
section.faq .faq-list .faq--item:last-of-type {
border-bottom: none;
}
@ -270,6 +355,11 @@ section.faq .faq-list .faq--item .answer {
padding-left: 16px;
display: block;
}
@media (max-width: 480px) {
section.faq .faq-list .faq--item .answer {
padding-left: 0;
}
}
section.faq .faq-list .faq--item summary {
cursor: pointer;
font-weight: 600;
@ -295,11 +385,25 @@ section.book-club-benefits .benefit-cards {
row-gap: 90px;
margin-block: 140px;
}
@media (max-width: 480px) {
section.book-club-benefits .benefit-cards {
grid-template-columns: 1fr;
}
}
section.book-club-benefits .benefit-cards .benefit-card--item img {
max-width: 215px;
border: 1px solid var(--foreground-text);
border-radius: 12px;
}
@media (min-width: 1084px) {
section.book-club-benefits .benefit-cards .benefit-card--item img {
max-width: 215px;
}
}
@media (max-width: 480px) {
section.book-club-benefits .benefit-cards .benefit-card--item img {
width: 100%;
}
}
section.book-club-benefits .benefit-cards .benefit-card--item p {
max-width: 289px;
margin-inline: auto;
@ -316,7 +420,6 @@ section.book-club-benefits .book-club-benefits-cta p {
}
footer.somos-infinitos-footer {
padding-inline: 114px;
padding-top: 73px;
margin-top: 200px;
padding-bottom: 150px;
@ -325,6 +428,26 @@ footer.somos-infinitos-footer {
background-position: right;
background-size: contain;
}
@media (min-width: 1084px) {
footer.somos-infinitos-footer {
padding-inline: 114px;
}
}
@media (max-width: 480px) {
footer.somos-infinitos-footer {
padding-inline: 3rem;
}
}
@media (max-width: 480px) {
footer.somos-infinitos-footer {
background-size: cover;
background-position-x: 253px;
padding-bottom: 50px;
}
footer.somos-infinitos-footer .container {
padding-inline: 0;
}
}
footer.somos-infinitos-footer .footer-navigation {
margin-top: 75px;
margin-bottom: 120px;
@ -335,6 +458,12 @@ footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links {
display: grid;
grid-template-columns: repeat(3, 144px);
}
@media (max-width: 480px) {
footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links {
grid-template-columns: 1fr;
gap: 1rem;
}
}
footer.somos-infinitos-footer .footer-navigation ul.footer-navigation--links li a {
font-size: 14px;
display: inline-block;
@ -358,15 +487,29 @@ footer.somos-infinitos-footer .email-cta form {
gap: 16px;
margin-block: 16px;
}
@media (max-width: 480px) {
footer.somos-infinitos-footer .email-cta form {
flex-direction: column;
}
}
footer.somos-infinitos-footer .email-cta form input {
padding: 1em;
font-family: inherit;
width: 370px;
color: var(--foreground-text);
background: transparent;
border: 1px solid var(--foreground-text);
border-radius: 12px;
}
@media (min-width: 1084px) {
footer.somos-infinitos-footer .email-cta form input {
width: 370px;
}
}
@media (max-width: 480px) {
footer.somos-infinitos-footer .email-cta form input {
width: 286px;
}
}
footer.somos-infinitos-footer .email-cta form input::placeholder {
color: var(--foreground-text);
}
@ -377,6 +520,13 @@ footer.somos-infinitos-footer .email-cta form button.btn {
border: 1px solid;
cursor: pointer;
}
@media (max-width: 480px) {
footer.somos-infinitos-footer .email-cta form button.btn {
display: inline-block;
width: fit-content;
margin-bottom: 2rem;
}
}
footer.somos-infinitos-footer .email-cta form button.btn:hover {
background-color: white;
color: var(--background);