Merge pull request #46 from texastribune/text-formatting

Add base line height on paragraphs to avoid constantly setting
texastribune · Aug 7, 2019 · 895e020 · 895e020
2 parents c203058 + c563bbd
commit 895e020
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/assets/scss/1-settings/_fonts.scss b/assets/scss/1-settings/_fonts.scss
@@ -48,3 +48,18 @@ $font-root-mobile: 15px;
 $font-letter-spacing-sm: .02em;
 $font-letter-spacing: .03em;
 $font-letter-spacing-lg: .05em;
+
+// Line Height
+//
+// Consistent line-height values
+//
+// $line-height-s = 1.25 - Tight leading
+// $line-height-b = 1.4 - Default leading used on p tags
+// $line-height-m = 1.5 - Heading spacing
+// $line-height-l = 2 - More heading spacing
+//
+// Styleguide 1.2.3
+$line-height-s: 1.25;
+$line-height-b: 1.4;
+$line-height-m: 1.5;
+$line-height-l: 2;
diff --git a/assets/scss/4-elements/_all.scss b/assets/scss/4-elements/_all.scss
@@ -54,3 +54,8 @@ ul {
 hr {
   border: 1px solid $color-gray-light;
 }
+
+// By default we add leading to paragraphs
+p {
+  line-height: $line-height-b;
+}
diff --git a/assets/scss/5-typography/_t-helpers.scss b/assets/scss/5-typography/_t-helpers.scss
@@ -76,7 +76,7 @@
 //
 // New utility to help eliminate repitition. {{isHelper}}
 //
-// t-space-nospace - Tight leading | line-height: 1
+// t-space-base - Base leading | line-height: 1.4 (used on paragraphs)
 // t-space-heading-s - More spaced out | line-height: 1.25
 // t-space-heading-m - More spaced out | line-height: 1.5
 // t-space-heading-l - Even more | line-height: 2
@@ -87,10 +87,10 @@
 // Styleguide 5.2.7
 //
 $line-height-type: (
-  nospace: 1,
-  heading-s: 1.25,
-  heading-m: 1.5,
-  heading-l: 2,
+  base: $line-height-b,
+  heading-s: $line-height-s,
+  heading-m: $line-height-m,
+  heading-l: $line-height-l,
 );
 
 @each $type-set, $line-height in $line-height-type {

diff --git a/assets/scss/6-components/story-body/_story-body.scss b/assets/scss/6-components/story-body/_story-body.scss
@@ -28,6 +28,12 @@ $story-narrow-bp: ($story-narrow / 1rem) + $story-padding-buffer;
     }
   }
 
+  > p,
+  > h3,
+  > ul li {
+    @include font-setting('secondary');
+    @include underlined-link-parent;
+  }
 
   > ul {
     list-style: disc;

diff --git a/assets/scss/6-components/story-body/story-body.html b/assets/scss/6-components/story-body/story-body.html
@@ -1,4 +1,4 @@
-<section class="c-story-body t-linkstyle t-linkstyle--underlined has-l-btm-marg t-serif t-space-heading-m t-size-b story_body">
+<section class="c-story-body has-l-btm-marg t-size-b story_body">
   <p>Our editor outputs blocks of texts with paragraph tags.</p>
   <h3>Helper classes needed</h3>
   <p>Note that we also sprinkle in sibling helper classes with story-body. For example, the t-linkstyle helper gives us the ability to style <a href="#">links like this.</a></p>