feat: add mobile responsive styles (breakpoint 930px)
Add _mobile.scss with responsive overrides for all sections: - Header nav wraps, hero auto-height, grids to single column - Handles path full-width, system/author/buy stacked vertically - Footer contact and legal full-width - Typography scaled down for mobile viewports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
53183a2445
commit
f62ba6fbd7
4 changed files with 437 additions and 1 deletions
246
assets/css/src/_mobile.scss
Normal file
246
assets/css/src/_mobile.scss
Normal file
|
|
@ -0,0 +1,246 @@
|
||||||
|
@media (max-width: 930px) {
|
||||||
|
// ---- HEADER ----
|
||||||
|
body > header {
|
||||||
|
padding: 1rem var(--padding-body);
|
||||||
|
|
||||||
|
ul {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.25rem 0.5rem;
|
||||||
|
|
||||||
|
li:first-child {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:not(:first-child) {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- HERO ----
|
||||||
|
section#hero {
|
||||||
|
height: auto;
|
||||||
|
min-height: 60vh;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rem var(--padding-body) 3rem;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preorder-button {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- QUOTES ----
|
||||||
|
section#quote-full,
|
||||||
|
section#quote {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- THE BOOK ----
|
||||||
|
section#the-book {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
|
||||||
|
.summary-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
.title-wrapper .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-wrapper {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.data {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.claim-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: var(--radius-section);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text .big {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- EXCERPTS ----
|
||||||
|
section#excerpts {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
|
||||||
|
header .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide .item {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 20rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- HANDLES ----
|
||||||
|
section#handles {
|
||||||
|
margin: 3rem var(--padding-body);
|
||||||
|
|
||||||
|
header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.title-wrapper .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.path {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3rem;
|
||||||
|
|
||||||
|
.step {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step:nth-child(even) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- SYSTEM ----
|
||||||
|
section#system {
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 3rem var(--padding-body);
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- EXCERPT (single) ----
|
||||||
|
section#excerpt {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.chapter-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- AUTHOR ----
|
||||||
|
section#author {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.author-name {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- BUY ----
|
||||||
|
section#buy {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
align-items: center;
|
||||||
|
gap: 3rem;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-links {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- FOOTER ----
|
||||||
|
body > footer {
|
||||||
|
padding: 3rem var(--padding-body);
|
||||||
|
|
||||||
|
header .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legal {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -745,4 +745,193 @@ body > footer .legal {
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
padding: 2.5rem 0 0 0;
|
padding: 2.5rem 0 0 0;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 930px) {
|
||||||
|
body > header {
|
||||||
|
padding: 1rem var(--padding-body);
|
||||||
|
}
|
||||||
|
body > header ul {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
body > header ul li:first-child {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
body > header ul li:not(:first-child) {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
section#hero {
|
||||||
|
height: auto;
|
||||||
|
min-height: 60vh;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rem var(--padding-body) 3rem;
|
||||||
|
}
|
||||||
|
section#hero .title {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
section#hero .subtitle {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
section#hero #preorder-button {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
section#quote-full,
|
||||||
|
section#quote {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
}
|
||||||
|
section#quote-full blockquote,
|
||||||
|
section#quote blockquote {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
section#the-book {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
}
|
||||||
|
section#the-book .summary-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
section#the-book .summary-wrapper .title-wrapper .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
section#the-book .data-wrapper {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
section#the-book .data-wrapper .data {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
section#the-book .claim-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
section#the-book .claim-wrapper img {
|
||||||
|
border-radius: var(--radius-section);
|
||||||
|
}
|
||||||
|
section#the-book .claim-wrapper .text .big {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
section#excerpts {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
}
|
||||||
|
section#excerpts header .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
section#excerpts .swiper-slide .item {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 20rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
section#handles {
|
||||||
|
margin: 3rem var(--padding-body);
|
||||||
|
}
|
||||||
|
section#handles header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
section#handles header .title-wrapper .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
section#handles header .subtitle {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
section#handles .path {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
section#handles .path .step {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
section#handles .path .step:nth-child(even) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
section#system {
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 3rem var(--padding-body);
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
section#system .text {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
section#system .text .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
section#system .text .bottom {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
section#system figure {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
section#excerpt {
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
}
|
||||||
|
section#excerpt .wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
section#excerpt .wrapper .chapter-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
section#author {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
section#author img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
section#author .text {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
section#author .text .author-name {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
section#buy {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 4rem var(--padding-body);
|
||||||
|
align-items: center;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
section#buy .text {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
section#buy .text .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
section#buy .text .buy-links {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
section#buy img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
body > footer {
|
||||||
|
padding: 3rem var(--padding-body);
|
||||||
|
}
|
||||||
|
body > footer header .title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
body > footer .contact {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
body > footer .legal {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
}/*# sourceMappingURL=style.css.map */
|
}/*# sourceMappingURL=style.css.map */
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -13,3 +13,4 @@
|
||||||
@import 'src/section_9-author.scss';
|
@import 'src/section_9-author.scss';
|
||||||
@import 'src/section_10-buy.scss';
|
@import 'src/section_10-buy.scss';
|
||||||
@import 'src/footer.scss';
|
@import 'src/footer.scss';
|
||||||
|
@import 'src/mobile.scss';
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue