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 {
text-align: center;
.section-title {
font-size: var(--font-size-s);
width: 100%;
text-align: center;
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
@include section-title-centered;
}
.title {
width: 100%;
text-align: center;
font-family: var(--font-narrow);
font-size: var(--font-size-l);
text-transform: uppercase;
@include big-title-base;
}
}

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

@ -1,3 +1,6 @@
// ========================================
// CONTAINERS
// ========================================
.blue-container {
background-color: var(--color-blue);
color: #fff !important;
@ -8,6 +11,25 @@
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 {
display: block;
background-color: var(--color-blue);
@ -29,3 +51,148 @@
color: var(--color-blue) !important;
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;
margin-left: 8rem;
.section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
@include section-title;
}
.title {
font-family: 'owners-xnarrow', sans-serif;
font-size: var(--font-size-l);
text-transform: uppercase;
color: var(--color-blue);
@include big-title-xnarrow;
margin-bottom: 1.75rem;
}
@ -40,11 +35,8 @@ section#buy {
}
.info {
font-size: 0.625rem;
opacity: 0.8;
text-transform: uppercase;
@include label-base;
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;
.title {
font-family: var(--font-narrow);
font-size: 4.0625rem;
font-weight: 700;
color: blue;
@include big-title-medium-blue;
}
}
.text {
font-weight: normal;
font-size: var(--font-size-m);
p {
margin-bottom: 1.75rem;
}
@include text-paragraphs-spaced;
}
}
@ -37,9 +32,7 @@ section#the-book {
margin-bottom: 5rem;
.label {
font-size: 0.625rem;
font-weight: 400;
opacity: 0.8;
@include label-base;
margin-bottom: 0.5rem;
}
}

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

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

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

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

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

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

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

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

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

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

118
assets/css/style.css
View file

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

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

File diff suppressed because one or more lines are too long