Fix heading sizes (github#22968)

* Align heading sizes with Primer * Make the headings on other pages match normal pages
buseybee-net · Nov 18, 2021 · 308aa9c · 308aa9c
1 parent fa81506
commit 308aa9c
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 19 deletions.
diff --git a/components/GenericError.tsx b/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

diff --git a/components/landing/LandingHero.tsx b/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>

diff --git a/components/sublanding/SubLandingHero.tsx b/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>

diff --git a/components/ui/MarkdownContent/stylesheets/headers.scss b/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;
-  }
 }
diff --git a/pages/404.tsx b/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