Merge pull request #1115 from Smadden00/Smadden00/fix-heading-line-spacing-and-padding

Edited heading line spacing

Author: CodeWritingCow

src/app/(content-pages)/get-access/GetAccessPage.tsx

@@ -3,8 +3,8 @@ import { Handshake, Money, Gavel, Tag, XCircle } from '@phosphor-icons/react';
 export default function GetAccessPage() {
   return (
     <>
-      <h1 className="heading-3xl font-bold mb-6">Get Access to a Property</h1>
-      <h2 className="body-lg font-normal mb-6">
+      <h1 className="heading-3xl font-bold">Get Access to a Property</h1>
+      <h2 className="body-lg font-normal">
         In order to intervene in a property, you need to have some kind of legal
         access to do so.
       </h2>
@@ -17,7 +17,7 @@ export default function GetAccessPage() {
         can get help with each.
       </p>
 
-      <h2 className="heading-2xl font-bold mb-6">Methods</h2>
+      <h2 className="heading-2xl font-bold">Methods</h2>
       <p className="body-md mb-6">
         Although there are other possible ways to get access to a property (see
         below), these four routes are the most common and the only ones that we
@@ -187,7 +187,7 @@ export default function GetAccessPage() {
         </div>
       </div>
 
-      <h2 id="other-methods" className="heading-2xl font-bold mt-8 mb-6">
+      <h2 id="other-methods" className="heading-2xl font-bold mt-8">
         Other Methods
       </h2>
       <p className="body-md mb-6">

src/app/globals.css

@@ -92,26 +92,31 @@
     font-size: var(--font-size-3xl);
     font-family: var(--font-family);
     font-weight: 800;
+    line-height: 1.2;
   }
   .heading-2xl {
     font-size: var(--font-size-2xl);
     font-family: var(--font-family);
     font-weight: 800;
+    line-height: 1.2;
   }
   .heading-xl {
     font-size: var(--font-size-xl);
     font-family: var(--font-family);
     font-weight: bold;
+    line-height: 1.2;
   }
   .heading-lg {
     font-size: var(--font-size-lg);
     font-family: var(--font-family);
     font-weight: bold;
+    line-height: 1.2;
   }
   .heading-md {
     font-size: var(--font-size-md);
     font-family: var(--font-family);
     font-weight: bold;
+    line-height: 1.2;
   }
   .body-lg {
     font-size: var(--font-size-lg);
@@ -128,6 +133,12 @@
     font-family: var(--font-family);
     font-weight: regular;
   }
+  h1 + h2 {
+    margin-top: 0.5rem;
+  }
+  h2 + p {
+    margin-top: 3rem;
+  }
 
   ol.methodology {
     list-style: decimal;