studio-variable/le-courage-du-reel
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add mobile responsive styles (breakpoint 930px)

Browse source 
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 2026-02-23 17:29:30 +01:00
parent 53183a2445
commit f62ba6fbd7
4 changed files with 437 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

189
assets/css/style.css
View file

@ -745,4 +745,193 @@ body > footer .legal {
margin-top: 5rem;
padding: 2.5rem 0 0 0;
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 */