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

refactor: consolidate CSS with reusable mixins

Browse source 
Create SCSS mixins for repeated typography patterns (section-title, big-title, labels, text-blocks) in generic-classes.scss. Replace ~25-30 duplicate style declarations across sections with mixin includes, improving maintainability and consistency.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-23 16:38:44 +01:00
parent ac3542099a
commit 96c52e7e96
11 changed files with 289 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

11
assets/css/src/_footer.scss
View file

@ -11,19 +11,12 @@ body > footer {
header { header {
text-align: center; text-align: center;
.section-title { .section-title {
font-size: var(--font-size-s); @include section-title-centered;
width: 100%;
text-align: center;
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
} }
.title { .title {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-family: var(--font-narrow); @include big-title-base;
font-size: var(--font-size-l);
text-transform: uppercase;
} }
} }

167
assets/css/src/_generic-classes.scss
View file

@ -1,3 +1,6 @@
// ========================================
// CONTAINERS
// ========================================
.blue-container { .blue-container {
background-color: var(--color-blue); background-color: var(--color-blue);
color: #fff !important; color: #fff !important;
@ -8,6 +11,25 @@
background-color: #fff !important; background-color: #fff !important;
} }
.centered-container {
text-align: center;
&.--narrow {
width: min(100%, 40rem);
}
&.--medium {
width: min(90vw, 40rem);
}
&.--wide {
width: min(80%, 41.875rem);
}
}
// ========================================
// BUTTONS
// ========================================
.blue-button { .blue-button {
display: block; display: block;
background-color: var(--color-blue); background-color: var(--color-blue);
@ -29,3 +51,148 @@
color: var(--color-blue) !important; color: var(--color-blue) !important;
outline: 1px solid var(--color-blue); outline: 1px solid var(--color-blue);
} }
// ========================================
// MIXINS - TYPOGRAPHY TITLES
// ========================================
@mixin section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
}
@mixin section-title-centered {
@include section-title;
width: 100%;
text-align: center;
}
@mixin big-title-base {
font-family: var(--font-narrow);
font-size: var(--font-size-l);
text-transform: uppercase;
font-weight: 700;
}
@mixin big-title-blue {
@include big-title-base;
color: var(--color-blue);
}
@mixin big-title-xnarrow {
font-family: 'owners-xnarrow', sans-serif;
font-size: var(--font-size-l);
text-transform: uppercase;
font-weight: 500;
color: var(--color-blue);
}
@mixin big-title-medium {
@include big-title-base;
font-size: 4.0625rem;
}
@mixin big-title-medium-blue {
@include big-title-medium;
color: var(--color-blue);
}
// ========================================
// MIXINS - LABELS
// ========================================
@mixin label-base {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
opacity: 0.8;
}
@mixin label-spaced {
@include label-base;
margin-bottom: 0.7rem;
}
// ========================================
// MIXINS - TEXT BLOCKS
// ========================================
@mixin text-paragraphs-spaced {
p:not(:last-child) {
margin-bottom: 1.75rem;
}
}
@mixin text-paragraphs-loose {
p:not(:last-child) {
margin-bottom: 2rem;
}
}
// ========================================
// TYPOGRAPHY - TITLES (Classes)
// ========================================
.section-title {
@include section-title;
&.--centered {
width: 100%;
text-align: center;
}
}
.big-title {
@include big-title-base;
&.--blue {
color: var(--color-blue);
}
&.--xnarrow {
font-family: 'owners-xnarrow', sans-serif;
font-weight: 500;
}
&.--giant {
font-size: 8rem;
}
&.--medium {
font-size: 4.0625rem;
}
}
// ========================================
// TYPOGRAPHY - LABELS & SMALL TEXT (Classes)
// ========================================
.label {
@include label-base;
&.--dimmed {
opacity: 0.6;
}
&.--spaced {
margin-bottom: 0.7rem;
}
}
// ========================================
// TYPOGRAPHY - TEXT BLOCKS (Classes)
// ========================================
.text-block {
font-size: var(--font-size-m);
&.--medium-weight {
font-weight: 500;
}
p:not(:last-child) {
margin-bottom: 1.75rem;
}
&.--loose {
p:not(:last-child) {
margin-bottom: 2rem;
}
}
}

14
assets/css/src/_section_10-buy.scss
View file

@ -8,16 +8,11 @@ section#buy {
width: 30rem; width: 30rem;
margin-left: 8rem; margin-left: 8rem;
.section-title { .section-title {
font-size: var(--font-size-s); @include section-title;
text-transform: uppercase;
margin-bottom: 0.75rem;
} }
.title { .title {
font-family: 'owners-xnarrow', sans-serif; @include big-title-xnarrow;
font-size: var(--font-size-l);
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
} }
@ -40,11 +35,8 @@ section#buy {
} }
.info { .info {
font-size: 0.625rem; @include label-base;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 2.4px; letter-spacing: 2.4px;
font-weight: 400;
} }
} }

13
assets/css/src/_section_3-the_book.scss
View file

@ -11,19 +11,14 @@ section#the-book {
text-transform: uppercase; text-transform: uppercase;
.title { .title {
font-family: var(--font-narrow); @include big-title-medium-blue;
font-size: 4.0625rem;
font-weight: 700;
color: blue;
} }
} }
.text { .text {
font-weight: normal; font-weight: normal;
font-size: var(--font-size-m); font-size: var(--font-size-m);
p { @include text-paragraphs-spaced;
margin-bottom: 1.75rem;
}
} }
} }
@ -37,9 +32,7 @@ section#the-book {
margin-bottom: 5rem; margin-bottom: 5rem;
.label { .label {
font-size: 0.625rem; @include label-base;
font-weight: 400;
opacity: 0.8;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }

10
assets/css/src/_section_4-excerpts.scss
View file

@ -17,10 +17,7 @@ section#excerpts {
} }
.title { .title {
font-family: var(--font-narrow); @include big-title-base;
font-size: var(--font-size-l);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 5%; letter-spacing: 5%;
} }
} }
@ -38,10 +35,7 @@ section#excerpts {
.item { .item {
width: 13.125rem; width: 13.125rem;
.label { .label {
opacity: 0.8; @include label-spaced;
text-transform: uppercase;
font-size: 0.625rem;
margin-bottom: 0.7rem;
} }
.text { .text {
font-size: var(--font-size-m); font-size: var(--font-size-m);

9
assets/css/src/_section_5-handles.scss
View file

@ -12,16 +12,11 @@ section#handles {
.title-wrapper { .title-wrapper {
.index { .index {
font-size: var(--font-size-s); @include section-title;
text-transform: uppercase;
font-weight: 500; font-weight: 500;
margin-bottom: 0.75rem;
} }
.title { .title {
font-family: var(--font-narrow); @include big-title-medium-blue;
color: var(--color-blue);
font-size: 4.0625rem;
text-transform: uppercase;
} }
} }
.subtitle { .subtitle {

11
assets/css/src/_section_7-system.scss
View file

@ -12,18 +12,11 @@ section#system {
.top { .top {
.section-title { .section-title {
font-weight: 400; @include section-title;
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
} }
.title { .title {
font-family: 'owners-xnarrow', sans-serif; @include big-title-xnarrow;
font-weight: 500;
font-size: var(--font-size-l);
text-transform: uppercase;
color: var(--color-blue);
margin-bottom: 2rem; margin-bottom: 2rem;
} }

13
assets/css/src/_section_8-excerpt.scss
View file

@ -6,25 +6,18 @@ section#excerpt {
width: min(90vw, 40rem); width: min(90vw, 40rem);
.section-title { .section-title {
font-size: var(--font-size-s); @include section-title-centered;
width: 100%;
text-align: center;
margin-bottom: 0.75rem;
} }
.chapter-title { .chapter-title {
width: 100%; width: 100%;
text-align: center; text-align: center;
font-family: var(--font-narrow); @include big-title-base;
font-size: var(--font-size-l);
text-transform: uppercase;
} }
.content { .content {
margin: 3rem 0; margin: 3rem 0;
font-size: var(--font-size-m); font-size: var(--font-size-m);
p:not(:last-child) { @include text-paragraphs-spaced;
margin-bottom: 1.75rem;
}
p.reference { p.reference {
font-size: 0.75rem; font-size: 0.75rem;

14
assets/css/src/_section_9-author.scss
View file

@ -15,17 +15,11 @@ section#author {
width: 35rem; width: 35rem;
.section-title { .section-title {
font-size: var(--font-size-s); @include section-title;
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
} }
.author-name { .author-name {
font-family: 'owners-xnarrow', sans-serif; @include big-title-xnarrow;
font-size: var(--font-size-l);
color: var(--color-blue);
text-transform: uppercase;
margin-bottom: 5.75rem; margin-bottom: 5.75rem;
} }
@ -35,8 +29,6 @@ section#author {
line-height: 140%; line-height: 140%;
} }
p:not(:last-child) { @include text-paragraphs-loose;
margin-bottom: 2rem;
}
} }
} }

118
assets/css/style.css
View file

@ -72,6 +72,19 @@ body {
background-color: #fff !important; background-color: #fff !important;
} }
.centered-container {
text-align: center;
}
.centered-container.--narrow {
width: min(100%, 40rem);
}
.centered-container.--medium {
width: min(90vw, 40rem);
}
.centered-container.--wide {
width: min(80%, 41.875rem);
}
.blue-button { .blue-button {
display: block; display: block;
background-color: var(--color-blue); background-color: var(--color-blue);
@ -93,6 +106,63 @@ body {
outline: 1px solid var(--color-blue); outline: 1px solid var(--color-blue);
} }
.section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
}
.section-title.--centered {
width: 100%;
text-align: center;
}
.big-title {
font-family: var(--font-narrow);
font-size: var(--font-size-l);
text-transform: uppercase;
font-weight: 700;
}
.big-title.--blue {
color: var(--color-blue);
}
.big-title.--xnarrow {
font-family: "owners-xnarrow", sans-serif;
font-weight: 500;
}
.big-title.--giant {
font-size: 8rem;
}
.big-title.--medium {
font-size: 4.0625rem;
}
.label {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
opacity: 0.8;
}
.label.--dimmed {
opacity: 0.6;
}
.label.--spaced {
margin-bottom: 0.7rem;
}
.text-block {
font-size: var(--font-size-m);
}
.text-block.--medium-weight {
font-weight: 500;
}
.text-block p:not(:last-child) {
margin-bottom: 1.75rem;
}
.text-block.--loose p:not(:last-child) {
margin-bottom: 2rem;
}
body > header { body > header {
position: sticky; position: sticky;
z-index: 999; z-index: 999;
@ -186,15 +256,17 @@ section#the-book .summary-wrapper .title-wrapper {
} }
section#the-book .summary-wrapper .title-wrapper .title { section#the-book .summary-wrapper .title-wrapper .title {
font-family: var(--font-narrow); font-family: var(--font-narrow);
font-size: 4.0625rem; font-size: var(--font-size-l);
text-transform: uppercase;
font-weight: 700; font-weight: 700;
color: blue; font-size: 4.0625rem;
color: var(--color-blue);
} }
section#the-book .summary-wrapper .text { section#the-book .summary-wrapper .text {
font-weight: normal; font-weight: normal;
font-size: var(--font-size-m); font-size: var(--font-size-m);
} }
section#the-book .summary-wrapper .text p { section#the-book .summary-wrapper .text p:not(:last-child) {
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
} }
section#the-book .data-wrapper { section#the-book .data-wrapper {
@ -208,6 +280,7 @@ section#the-book .data-wrapper {
} }
section#the-book .data-wrapper .label { section#the-book .data-wrapper .label {
font-size: 0.625rem; font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400; font-weight: 400;
opacity: 0.8; opacity: 0.8;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -251,8 +324,8 @@ section#excerpts header .label {
section#excerpts header .title { section#excerpts header .title {
font-family: var(--font-narrow); font-family: var(--font-narrow);
font-size: var(--font-size-l); font-size: var(--font-size-l);
font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700;
letter-spacing: 5%; letter-spacing: 5%;
} }
section#excerpts .slider { section#excerpts .slider {
@ -269,9 +342,10 @@ section#excerpts .slider .slide .item {
width: 13.125rem; width: 13.125rem;
} }
section#excerpts .slider .slide .item .label { section#excerpts .slider .slide .item .label {
opacity: 0.8;
text-transform: uppercase;
font-size: 0.625rem; font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
opacity: 0.8;
margin-bottom: 0.7rem; margin-bottom: 0.7rem;
} }
section#excerpts .slider .slide .item .text { section#excerpts .slider .slide .item .text {
@ -310,14 +384,17 @@ section#handles header {
section#handles header .title-wrapper .index { section#handles header .title-wrapper .index {
font-size: var(--font-size-s); font-size: var(--font-size-s);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
} }
section#handles header .title-wrapper .title { section#handles header .title-wrapper .title {
font-family: var(--font-narrow); font-family: var(--font-narrow);
color: var(--color-blue); font-size: var(--font-size-l);
font-size: 4.0625rem;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700;
font-size: 4.0625rem;
color: var(--color-blue);
} }
section#handles header .subtitle { section#handles header .subtitle {
font-weight: 500; font-weight: 500;
@ -365,16 +442,16 @@ section#system .text {
max-width: 27rem; max-width: 27rem;
} }
section#system .text .top .section-title { section#system .text .top .section-title {
font-weight: 400;
font-size: var(--font-size-s); font-size: var(--font-size-s);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: 400;
} }
section#system .text .top .title { section#system .text .top .title {
font-family: "owners-xnarrow", sans-serif; font-family: "owners-xnarrow", sans-serif;
font-weight: 500;
font-size: var(--font-size-l); font-size: var(--font-size-l);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
color: var(--color-blue); color: var(--color-blue);
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -410,9 +487,11 @@ section#excerpt .wrapper {
} }
section#excerpt .wrapper .section-title { section#excerpt .wrapper .section-title {
font-size: var(--font-size-s); font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-bottom: 0.75rem;
} }
section#excerpt .wrapper .chapter-title { section#excerpt .wrapper .chapter-title {
width: 100%; width: 100%;
@ -420,6 +499,7 @@ section#excerpt .wrapper .chapter-title {
font-family: var(--font-narrow); font-family: var(--font-narrow);
font-size: var(--font-size-l); font-size: var(--font-size-l);
text-transform: uppercase; text-transform: uppercase;
font-weight: 700;
} }
section#excerpt .wrapper .content { section#excerpt .wrapper .content {
margin: 3rem 0; margin: 3rem 0;
@ -465,8 +545,9 @@ section#author .text .section-title {
section#author .text .author-name { section#author .text .author-name {
font-family: "owners-xnarrow", sans-serif; font-family: "owners-xnarrow", sans-serif;
font-size: var(--font-size-l); font-size: var(--font-size-l);
color: var(--color-blue);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
color: var(--color-blue);
margin-bottom: 5.75rem; margin-bottom: 5.75rem;
} }
section#author .text p { section#author .text p {
@ -492,11 +573,13 @@ section#buy .text .section-title {
font-size: var(--font-size-s); font-size: var(--font-size-s);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: 400;
} }
section#buy .text .title { section#buy .text .title {
font-family: "owners-xnarrow", sans-serif; font-family: "owners-xnarrow", sans-serif;
font-size: var(--font-size-l); font-size: var(--font-size-l);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500;
color: var(--color-blue); color: var(--color-blue);
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
} }
@ -518,10 +601,10 @@ section#buy .text .buy-links li a {
} }
section#buy .text .info { section#buy .text .info {
font-size: 0.625rem; font-size: 0.625rem;
opacity: 0.8;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2.4px;
font-weight: 400; font-weight: 400;
opacity: 0.8;
letter-spacing: 2.4px;
} }
section#buy img { section#buy img {
width: 45%; width: 45%;
@ -546,11 +629,11 @@ body > footer header {
} }
body > footer header .section-title { body > footer header .section-title {
font-size: var(--font-size-s); font-size: var(--font-size-s);
width: 100%;
text-align: center;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-weight: 400; font-weight: 400;
width: 100%;
text-align: center;
} }
body > footer header .title { body > footer header .title {
width: 100%; width: 100%;
@ -558,6 +641,7 @@ body > footer header .title {
font-family: var(--font-narrow); font-family: var(--font-narrow);
font-size: var(--font-size-l); font-size: var(--font-size-l);
text-transform: uppercase; text-transform: uppercase;
font-weight: 700;
} }
body > footer .contact { body > footer .contact {
margin-top: 5rem; margin-top: 5rem;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long