From f39b0bacf41c849d213eb103ad4fe7f295038ef6 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Mon, 17 Jan 2022 13:35:23 -0600
Subject: [PATCH] dtext: adjust space between headers and paragraphs.

Adjust heading tags (h1, h2, h3, h4, h5, h6) to use margins instead of
padding so that margins collapse together. Adjust margin sizes to reduce
gaps between headers and paragraphs, and headers and subheaders.

Also adjust paragraph margins so that there's slightly less space
between paragraphs.
---
 app/javascript/src/styles/base/000_vars.scss | 19 ---------
 app/javascript/src/styles/common/dtext.scss  | 41 +++++++++-----------
 2 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss
index c7150029e..395ff8192 100644
--- a/app/javascript/src/styles/base/000_vars.scss
+++ b/app/javascript/src/styles/base/000_vars.scss
@@ -12,25 +12,6 @@
   --arial-font: "Arial", "Helvetica", sans-serif;
 }
 
-$h1_padding: 0.8em 0 0.25em 0;
-$h2_padding: 0.8em 0 0.25em 0;
-$h3_padding: 0.8em 0 0.25em 0;
-$h4_padding: 0.8em 0 0.25em 0;
-
-// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
-@mixin fa-solid-icon($content) {
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: $content;
-}
-
 @mixin active-link {
   color: var(--link-color);
 
diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index 8d8110f0d..b8caba70e 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -1,41 +1,27 @@
-@import "../base/000_vars";
-
 div.prose {
   line-height: 1.4em;
   word-break: break-word;
 
-  h1, h2, h3 {
-    line-height: 1em;
+  p {
+    margin-bottom: 0.75rem;
   }
 
-  h1 {
-    font-size: var(--text-xl);
-    padding: $h1_padding;
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1;
+    margin-bottom: 0.75rem;
   }
 
-  h2 {
+  h1, h2, h3, h4 {
     font-size: var(--text-xl);
-    padding: $h2_padding;
-  }
-
-  h3 {
-    font-size: var(--text-xl);
-    padding: $h3_padding;
-  }
-
-  h4 {
-    font-size: var(--text-xl);
-    padding: $h4_padding;
+    margin-top: 1.75rem;
   }
 
   h5 {
     font-size: var(--text-lg);
-    padding: $h4_padding;
   }
 
   h6 {
     font-size: var(--text-md);
-    padding: $h4_padding;
   }
 
   table {
@@ -46,7 +32,7 @@ div.prose {
 
   ul {
     margin-left: 1em;
-    margin-bottom: 1em;
+    margin-bottom: 0.75rem;
 
     ul {
       margin-bottom: 0;
@@ -109,7 +95,16 @@ div.prose {
 
   a.dtext-named-external-link::after {
     // https://fontawesome.com/icons/external-link-alt?style=solid
-    @include fa-solid-icon("\f35d");
+    // https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+
+    font-family: "Font Awesome 5 Free";
+    font-weight: 900;
+    content: "\f35d";
 
     font-size: 0.6em;
     padding: 0 0.2em 0 0.3em;