Correct baseline grid alignment

canonical · Jul 20, 2023 · e4b9091 · e4b9091
1 parent 0244094
commit e4b9091
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/scss/_base_typography-definitions.scss b/scss/_base_typography-definitions.scss
@@ -41,11 +41,14 @@
     font-size: #{map-get($font-sizes, display-mobile)}rem;
     font-weight: 100;
     line-height: map-get($line-heights, display-mobile);
-    padding-top: 0;
+    margin-bottom: map-get($sp-after, display-mobile) - map-get($nudges, display-mobile);
+    padding-top: map-get($nudges, display-mobile);
 
     @media (min-width: $breakpoint-heading-threshold) {
       font-size: #{map-get($font-sizes, display)}rem;
       line-height: map-get($line-heights, display);
+      margin-bottom: map-get($sp-after, display) - map-get($nudges, display);
+      padding-top: map-get($nudges, display);
     }
   }
 

diff --git a/scss/_settings_spacing.scss b/scss/_settings_spacing.scss
@@ -40,6 +40,8 @@ $line-heights: (
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
+  display: 0.35rem,
+  display-mobile: 0.25rem,
   h1-large: 0.55rem,
   h1-mobile: 0.55rem,
   h1: 0.55rem,
@@ -92,6 +94,8 @@ $sph--x-large: $sp-unit * 3 !default;
 
 // Space after text elements
 $sp-after: (
+  display: $spv--x-large,
+  display-mobile: $spv--x-large,
   h1: $spv--x-large,
   h1-mobile: $spv--x-large,
   h2: $spv--x-large,