Fix heading sizes (#22968)

* Align heading sizes with Primer

* Make the headings on other pages match normal pages

Author: heiskr

components/GenericError.tsx

@@ -20,7 +20,7 @@ export function GenericError() {
 
       <div className="container-xl p-responsive py-9 width-full flex-1">
         <article className="col-md-10 col-lg-7 mx-auto">
-          <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
+          <h1>Ooops!</h1>
           <Lead>It looks like something went wrong.</Lead>
           <p className="f3">
             We track these errors automatically, but if the problem persists please feel free to

components/landing/LandingHero.tsx

@@ -22,8 +22,8 @@ export const LandingHero = () => {
 
   return (
     <header className="d-lg-flex gutter-lg mb-6">
-      <div className={cx(product_video && 'col-12 col-lg-6 mb-3 mb-lg-0')}>
-        <h1 className="mb-3">
+      <div className={cx('col-12 mb-3 mb-lg-0', product_video && 'col-lg-6')}>
+        <h1>
           {shortTitle}{' '}
           {beta_product && <span className="Label Label--success v-align-middle">Beta</span>}
         </h1>

components/sublanding/SubLandingHero.tsx

@@ -43,9 +43,9 @@ export const SubLandingHero = () => {
 
   return (
     <div>
-      <header className="d-flex gutter mb-6">
+      <header className="d-flex gutter mb-6 my-4">
         <div className="col-12">
-          <h1 className="my-3">{title} guides</h1>
+          <h1>{title} guides</h1>
           {intro && <Lead data-search="lead">{intro}</Lead>}
         </div>
       </header>

components/ui/MarkdownContent/stylesheets/headers.scss

@@ -4,23 +4,11 @@
   h3,
   h4,
   h5 {
-    padding-top: 16px;
-  }
-  h2 {
-    font-size: 1.25em;
+    padding-top: 1rem;
   }
 
   // all h2 headers that are links should be blue-500
   h2 a {
     color: var(--color-accent-fg);
   }
-  h3 {
-    font-size: 1em;
-  }
-  h4 {
-    font-size: 0.875em;
-  }
-  h5 {
-    font-size: 0.85em;
-  }
 }

pages/404.tsx

@@ -17,7 +17,7 @@ const Custom404 = () => {
 
       <div className="container-xl p-responsive py-6 width-full flex-1">
         <article className="col-md-10 col-lg-7 mx-auto">
-          <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
+          <h1>Ooops!</h1>
           <Lead>It looks like this page doesn't exist.</Lead>
           <p className="f3">
             We track these errors automatically, but if the problem persists please feel free to