From c7e98d729a5bc036b73672621243de1010236422 Mon Sep 17 00:00:00 2001
From: Ayu Adiati <45172775+adiati98@users.noreply.github.com>
Date: Fri, 19 Jan 2024 19:47:35 +0100
Subject: [PATCH] Fix: Font responsiveness (#1110)

* Comment out font size for h2 to h5 in _base.scss

* Add className of mt-3 to h1

* only apply margin to smaller breakpoint

* remove commented out code

* adjust heading line height

* Adjust hero alignment

---------

Co-authored-by: Dan Ott <dan@dtott.com>
---
 app/components/layouts/DefaultLayout.tsx |  8 ++++----
 styles/_base.scss                        | 12 ------------
 styles/_variables.scss                   |  1 +
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/app/components/layouts/DefaultLayout.tsx b/app/components/layouts/DefaultLayout.tsx
index ecf1e648c..a73e97513 100644
--- a/app/components/layouts/DefaultLayout.tsx
+++ b/app/components/layouts/DefaultLayout.tsx
@@ -62,15 +62,15 @@ export function HeroHead({
 			<div className="py-4">
 				<div className="container">
 					<div className="row align-items-center">
-						<div className="col-sm-4">
+						<div className="col-md-4 text-center">
 							<UndrawIllustration
 								loading="eager"
-								style={{ width: '100%' }}
+								style={{ width: '100%', maxWidth: '300px' }}
 								filename={heroData.Hero}
 							/>
 						</div>
-						<div className="col-sm-8">
-							<h1 className="display-4">{heroData.heroHeader}</h1>
+						<div className="col-md-8">
+							<h1 className="display-4 mt-3 mt-md-0">{heroData.heroHeader}</h1>
 							{heroData.heroSubheader && (
 								<div className="lead">{heroData.heroSubheader}</div>
 							)}
diff --git a/styles/_base.scss b/styles/_base.scss
index 2020127b1..d11fff872 100644
--- a/styles/_base.scss
+++ b/styles/_base.scss
@@ -163,10 +163,6 @@ ul {
 	}
 }
 
-.prose h1 {
-	// text-align: center;
-}
-
 .prose h1 > small::before {
 	content: '\a';
 	white-space: pre;
@@ -177,7 +173,6 @@ ul {
 }
 
 .prose h3 {
-	font-size: 1.5rem;
 	font-weight: 600;
 	margin: 1.5rem 0 0.5rem 0;
 }
@@ -217,7 +212,6 @@ ul {
 }
 
 .resources-section .prose h2 {
-	font-size: 3rem;
 	font-weight: 900;
 	line-height: 1.2;
 	margin-bottom: 1rem;
@@ -225,17 +219,11 @@ ul {
 
 .resources-section .prose h3 {
 	margin: 1.5rem 0 1.5rem 0;
-	font-size: 2rem;
 }
 
 .resources-section .prose h4 {
 	margin: 1.5rem 0 1rem 0;
 	font-weight: 500;
-	font-size: 1.25rem;
-}
-
-.resources-section .prose h5 {
-	font-size: 1rem;
 }
 
 .resources-section .prose .header-anchor-wrapper-h2 {
diff --git a/styles/_variables.scss b/styles/_variables.scss
index 8fd4166b7..c848abb4a 100644
--- a/styles/_variables.scss
+++ b/styles/_variables.scss
@@ -73,6 +73,7 @@ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 $font-family-base: 'Inter var', $font-family-sans-serif;
 
 $headings-font-weight: 700;
+$headings-line-height: 1;
 
 $display1-weight: 900;
 $display2-weight: 900;