refactor: consolidate CSS with reusable mixins
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
parent
ac3542099a
commit
96c52e7e96
11 changed files with 289 additions and 93 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue