alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separate heading and body font overrides in CMS (#28101)

Browse Source 
* Separate heading and body font override mixins

* Separately target headings and other fonts overrides

* Separately target headings and other fonts overrides

* fix: allow independent heading font overrides without breaking existing entries

GitOrigin-RevId: b9b08316c1793fb305a8412986b78bfe5de43738
This commit is contained in:
Rebeka Dekany
2026-02-09 18:05:08 +01:00
committed by Copybot
parent ae2d28505b
commit 457ba8b1dd
1 changed files with 80 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/pages/website-redesign.scss
+80 -19
View File
@@ -1,30 +1,39 @@
// TODO: .website-redesign to be removed once fully rolled out
@mixin apply-font-size($size) {
@if $size == 'heading-2xl' {
@include heading-2xl;
} @else if $size == 'heading-xl' {
@include heading-xl;
} @else if $size == 'heading-lg' {
@include heading-lg;
} @else if $size == 'heading-md' {
@include heading-md;
} @else if $size == 'heading-sm' {
@include heading-sm;
} @else if $size == 'heading-xs' {
@include heading-xs;
} @else if $size == 'base' {
@include body-base;
}
}
@mixin reset-font-size($size) {
p,
ul,
ol {
@include apply-font-size($size);
}
}
@mixin reset-heading-font-size($size) {
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
@if $size == 'heading-2xl' {
@include heading-2xl;
} @else if $size == 'heading-xl' {
@include heading-xl;
} @else if $size == 'heading-lg' {
@include heading-lg;
} @else if $size == 'heading-md' {
@include heading-md;
} @else if $size == 'heading-sm' {
@include heading-sm;
} @else if $size == 'heading-xs' {
@include heading-xs;
} @else if $size == 'base' {
@include body-base;
}
h6 {
@include apply-font-size($size);
}
}
@@ -116,6 +125,10 @@
@include reset-font-size('heading-2xl');
}
.heading-font-size-h1 {
@include reset-heading-font-size('heading-2xl');
}
h2,
.h2 {
@include heading-xl;
@@ -125,6 +138,10 @@
@include reset-font-size('heading-xl');
}
.heading-font-size-h2 {
@include reset-heading-font-size('heading-xl');
}
h3,
.h3 {
@include heading-lg;
@@ -134,6 +151,10 @@
@include reset-font-size('heading-lg');
}
.heading-font-size-h3 {
@include reset-heading-font-size('heading-lg');
}
h4,
.h4 {
@include heading-md;
@@ -143,6 +164,10 @@
@include reset-font-size('heading-md');
}
.heading-font-size-h4 {
@include reset-heading-font-size('heading-md');
}
h5,
.h5 {
@include heading-sm;
@@ -152,6 +177,10 @@
@include reset-font-size('heading-sm');
}
.heading-font-size-h5 {
@include reset-heading-font-size('heading-sm');
}
h6,
.h6 {
@include heading-xs;
@@ -161,10 +190,18 @@
@include reset-font-size('heading-xs');
}
.heading-font-size-h6 {
@include reset-heading-font-size('heading-xs');
}
.font-size-base {
@include reset-font-size('base');
}
.heading-font-size-base {
@include reset-heading-font-size('base');
}
// smaller fonts for mobile
@include media-breakpoint-down(lg) {
h1,
@@ -176,6 +213,10 @@
@include reset-font-size('heading-xl');
}
.heading-font-size-h1 {
@include reset-heading-font-size('heading-xl');
}
h2,
.h2 {
@include heading-lg;
@@ -185,6 +226,10 @@
@include reset-font-size('heading-lg');
}
.heading-font-size-h2 {
@include reset-heading-font-size('heading-lg');
}
h3,
.h3 {
@include heading-md;
@@ -194,6 +239,10 @@
@include reset-font-size('heading-md');
}
.heading-font-size-h3 {
@include reset-heading-font-size('heading-md');
}
h4,
.h4 {
@include heading-sm;
@@ -203,6 +252,10 @@
@include reset-font-size('heading-sm');
}
.heading-font-size-h4 {
@include reset-heading-font-size('heading-sm');
}
h5,
.h5 {
@include heading-xs;
@@ -212,6 +265,10 @@
@include reset-font-size('heading-xs');
}
.heading-font-size-h5 {
@include reset-heading-font-size('heading-xs');
}
h6,
.h6 {
@include body-base;
@@ -220,6 +277,10 @@
.font-size-h6 {
@include reset-font-size('base');
}
.heading-font-size-h6 {
@include reset-heading-font-size('base');
}
}
.font-size-display-xs {