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

@@ -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>
 							)}

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,25 +212,18 @@ ul {
 }
 
 .resources-section .prose h2 {
-	font-size: 3rem;
 	font-weight: 900;
 	line-height: 1.2;
 	margin-bottom: 1rem;
 }
 
 .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 {

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;