Add option to force same line height to all headings

Author: Roni Laukkarinen

css/layout.css

@@ -10,7 +10,7 @@
 /**
  * The current version of the theme.
  */
-define( 'AIR_VERSION', '1.5.3' );
+define( 'AIR_VERSION', '1.5.4' );
 
 /**
  * Allow Gravity Forms to hide labels to add placeholders

functions.php

@@ -1,6 +1,6 @@
 {
   "name": "air",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "A minimalist WordPress starter theme.",
   "author": "Digitoimisto Dude Oy ([email protected])",
   "devDependencies": {

package.json

@@ -39,6 +39,10 @@ $font-monospace: 'Menlo', 'Courier', monospace;
 // Font sizes
 $font-min-size: 16px; // Minimum font size, on mobile (default: 16px)
 $font-max-size: 21px; // Maximum font size, on desktop (default: 21px)
+$font-base-line-height: 1.78; // Line height for paragraphs
+$font-base-line-height-elements: 1.68; // Line height for other elements like table cells and spans
+$headings-line-height-setup: flexible; // Choose between 'flexible' and 'force', flexible values are set in _typography.scss
+$headings-line-height-forced: 1.5; // This is effective only if force is chosen in $headings-line-height-setup
 
 // Form settings
 $color-button-bg: #262626;

sass/base/_config.scss

@@ -139,7 +139,14 @@ body {
       @include responsive-font(4vw, 48px, 60px);
       letter-spacing: -.02em;
       font-weight: 700;
-      line-height: 3.8rem;
+
+      @if $headings-line-height-setup == flexible {
+        line-height: 3.8rem;
+      } @else if $headings-line-height-setup == force {
+        line-height: $headings-line-height-forced;
+      } @else {
+        line-height: $headings-line-height-forced;
+      }
 
       &:first-child {
         margin-top: 0;
@@ -149,7 +156,14 @@ body {
     h2 {
       @include responsive-font(3.2vw, 36px, 48px);
       letter-spacing: -.02em;
-      line-height: 3.2rem;
+
+      @if $headings-line-height-setup == flexible {
+        line-height: 3.2rem;
+      } @else if $headings-line-height-setup == force {
+        line-height: $headings-line-height-forced;
+      } @else {
+        line-height: $headings-line-height-forced;
+      }
 
       &:first-child {
         margin-top: 0;
@@ -160,12 +174,30 @@ body {
     .gform_wrapper h3.gform_title {
       @include responsive-font(2.4vw, 24px, 36px);
       letter-spacing: -.02em;
-      line-height: 2.2rem;
+
+      @if $headings-line-height-setup == flexible {
+        line-height: 2.2rem;
+      } @else if $headings-line-height-setup == force {
+        line-height: $headings-line-height-forced;
+      } @else {
+        line-height: $headings-line-height-forced;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
     }
 
     h4 {
       @include responsive-font(1.6vw, 21px, 24px);
-      line-height: 1.4rem;
+
+      @if $headings-line-height-setup == flexible {
+        line-height: 1.4rem;
+      } @else if $headings-line-height-setup == force {
+        line-height: $headings-line-height-forced;
+      } @else {
+        line-height: $headings-line-height-forced;
+      }
 
       &:first-child {
         margin-top: 0;
@@ -174,7 +206,14 @@ body {
 
     h5 {
       @include responsive-font(1.4vw, 18px, 21px);
-      line-height: 1.2rem;
+
+      @if $headings-line-height-setup == flexible {
+        line-height: 1.2rem;
+      } @else if $headings-line-height-setup == force {
+        line-height: $headings-line-height-forced;
+      } @else {
+        line-height: $headings-line-height-forced;
+      }
 
       &:first-child {
         margin-top: 0;
@@ -183,7 +222,15 @@ body {
 
     h6 {
       @include responsive-font(1.2vw, 14px, 18px);
-      line-height: 1rem;
+
+
+      @if $headings-line-height-setup == flexible {
+        line-height: 1rem;
+      } @else if $headings-line-height-setup == force {
+        line-height: $headings-line-height-forced;
+      } @else {
+        line-height: $headings-line-height-forced;
+      }
 
       &:first-child {
         margin-top: 0;

sass/typography/_typography.scss

@@ -4,7 +4,7 @@ Theme URI: https://github.com/digitoimistodude/air
 Author: Digitoimisto Dude Oy
 Author URI: https://www.dude.fi
 Description: A minimalist WordPress starter theme.
-Version: 1.5.3
+Version: 1.5.4
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: air