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

151
assets/scss/static.scss
View File

@ -1,3 +1,11 @@
@mixin respond($breakpoint) {
@if($breakpoint == desktop) {
@media (min-width: 1084px) { @content }
}
@if($breakpoint == mobile) {
@media (max-width: 480px) { @content }
}
}
:root {
--background: #040810;
--foreground-text: #FAF7EF;
@ -26,6 +34,7 @@ body {
.container {
max-width: 908px;
margin-inline: auto;
@include respond(mobile) { padding: 3rem; }
}
a {
@ -35,6 +44,7 @@ a {
h2 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 38px;
line-height: 1;
}
.btn {
@ -65,6 +75,12 @@ h2 {
text-transform: uppercase;
align-items: center;
@include respond(mobile) {
flex-direction: column;
padding-top: 3rem;
gap: 2rem;
}
ul.pages-list {
display: flex;
justify-content: space-between;
@ -86,36 +102,55 @@ section {
padding-block: 82px;
}
.hero--container {
// max-width: 1440px;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
section.hero {
padding-block: 0;
.hero--container {
// max-width: 1440px;
margin-inline: auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
.hero--text {
grid-column: 2 / 4;
h2 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 38px;
font-weight: 400;
max-width: 385px;
@include respond(mobile) {
display: flex;
flex-direction: column;
padding: 3rem;
}
p {
font-family: var(wp--preset--font-family--sora);
font-size: 18px;
max-width: 446px;
.hero--text {
grid-column: 2 / 4;
h2 {
font-family: var(--wp--preset--font-family--eb-garamond);
font-size: 38px;
font-weight: 400;
max-width: 385px;
@include respond(mobile) {
font-size: 34px;
line-height: 1;
margin-top: 2rem;
}
}
p {
font-family: var(wp--preset--font-family--sora);
font-size: 18px;
max-width: 446px;
}
}
.hero--img {
grid-column: 4 / 6;
width: 100%;
border: 1px solid white;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-right: none;
@include respond(mobile) {
order: -1;
border-radius: 12px;
border-right: 1px solid;
}
}
}
.hero--img {
grid-column: 4 / 6;
width: 100%;
border: 1px solid white;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-right: none;
}
}
@ -129,6 +164,10 @@ section {
align-items: center;
column-gap: 2rem;
row-gap: 1rem;
@include respond(mobile) {
justify-content: space-around;
}
}
}
@ -149,7 +188,8 @@ section.pitch {
.pitch--cards {
display: grid;
grid-template-columns: repeat(3, 300px);
gap: 16px;
@include respond(mobile) { grid-template-columns: 1fr; }
gap: 16px;
.pitch--card-item {
border: 1px solid #FAF7EF;
@ -190,6 +230,7 @@ section.book-club-examples {
padding-block: 84px;
.book-club-example-card--item {
display: flex;
@include respond(mobile) { flex-direction: column; }
max-width: 908px;
border: 1px solid var(--foreground-text);
border-radius: 12px;
@ -200,15 +241,26 @@ section.book-club-examples {
border-radius: 12px;
border-right: 1px solid #F6F6F8;
object-fit: cover;
@include respond(mobile) {
width: 100%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: none;
border-bottom: 1px solid var(--foreground-text);
}
}
&--text {
* { text-align: left; }
padding-inline: 40px;
padding-block: 36px;
p { font-size: 18px; }
p.book-club-example-card--item--text--heading { font-size: 18px; }
p { font-size: 16px; }
strong { font-weight: 600; }
&--description { font-size: 16px; }
@include respond(mobile) {
padding-block: 2rem;
}
}
}
}
@ -230,12 +282,21 @@ section.testimonial-section {
display: flex;
gap: 1rem;
padding-block: 84px;
@include respond(mobile) {
flex-direction: column;
gap: 2rem;
}
.testimonial-card--item {
border: 1px solid var(--foreground-text);
border-radius: 12px;
padding: 64px;
max-width: 446px;
@include respond(mobile) {
padding: 3rem;
}
.bio {
display: flex;
gap: 1rem;
@ -275,11 +336,13 @@ section.faq {
padding-inline: 60px;
padding-inline-start: calc(60px - 16px);
padding-block: 45px;
@include respond(mobile) { padding-block: 30px; }
border-bottom: 1px solid;
&:last-of-type { border-bottom: none; }
.answer {
margin-top: 16px;
padding-left: 16px;
@include respond(mobile) { padding-left: 0; }
display: block;
}
summary {
@ -305,13 +368,15 @@ section.book-club-benefits {
.benefit-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
@include respond(mobile) { grid-template-columns: 1fr; }
gap: 16px;
row-gap: 90px;
margin-block: 140px;
.benefit-card--item {
img {
max-width: 215px;
@include respond(desktop) { max-width: 215px; }
@include respond(mobile) { width: 100%; }
border: 1px solid var(--foreground-text);
border-radius: 12px;
}
@ -337,7 +402,8 @@ section.book-club-benefits {
}
footer.somos-infinitos-footer {
padding-inline: 114px;
@include respond(desktop) { padding-inline: 114px; }
@include respond(mobile) { padding-inline: 3rem; }
padding-top: 73px;
margin-top: 200px;
padding-bottom: 150px;
@ -346,14 +412,26 @@ footer.somos-infinitos-footer {
background-position: right;
background-size: contain;
@include respond(mobile) {
.container { padding-inline: 0; }
background-size: cover;
background-position-x: 253px;
padding-bottom: 50px;
}
.footer-navigation {
margin-top: 75px;
margin-bottom: 120px;
ul.footer-navigation--links {
list-style-type: none;
padding-inline-start: 0;
display: grid;
grid-template-columns: repeat(3, 144px);
@include respond(mobile) {
grid-template-columns: 1fr;
gap: 1rem;
}
li {
a {
font-size: 14px;
@ -381,12 +459,14 @@ footer.somos-infinitos-footer {
form {
display: flex;
@include respond(mobile) { flex-direction: column; }
gap: 16px;
margin-block: 16px;
input {
padding: 1em;
font-family: inherit;
width: 370px;
@include respond(desktop) { width: 370px; }
@include respond(mobile) { width: 286px; }
color: var(--foreground-text);
background: transparent;
border: 1px solid var(--foreground-text);
@ -402,6 +482,13 @@ footer.somos-infinitos-footer {
color: var(--foreground-text);
border: 1px solid;
cursor: pointer;
@include respond(mobile) {
display: inline-block;
width: fit-content;
margin-bottom: 2rem;
}
&:hover {
background-color: white;
color: var(--background);