refactor: create container for heading+subtitle+quick links (#20)

* refactor: create container for heading+subtitle+quick links

* refactor: change gap for header container

Author: steveiliop56

src/pages/index.module.css

@@ -41,7 +41,7 @@
   mask-image: radial-gradient(ellipse at center, transparent 20%, black);
 }
 
-.headerContainer {
+.headerWrapper {
   position: relative;
   z-index: 10;
   display: flex;
@@ -54,27 +54,31 @@
 }
 
 @media (width < 48rem) {
-  .headerContainer {
+  .headerWrapper {
     padding-top: 1rem;
     flex-direction: column;
     justify-content: space-between;
     gap: 2rem;
   }
 }
 
+.headerContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 .headerTitle {
   color: #3e63dd;
   font-size: 4.25rem;
   font-weight: bold;
-  margin-bottom: 0.5rem;
 }
 
 .headerSubtitle {
   color: var(--ifm-color-primary-darkest);
   font-size: 1rem;
   font-weight: 400;
   max-width: 36rem;
-  margin-bottom: 0.5rem;
 }
 
 .quickLinks {
@@ -87,10 +91,6 @@
   .quickLinks {
     grid-template-columns: 1fr 1fr;
   }
-
-  .headerSubtitle {
-    margin-bottom: 2rem;
-  }
 }
 
 .quickLink {

src/pages/index.tsx

@@ -14,8 +14,8 @@ function Header() {
       <div className={styles.gridContainer}>
         <div className={styles.gridLines} />
         <div className={styles.radialFade} />
-        <div className={styles.headerContainer}>
-          <div>
+        <div className={styles.headerWrapper}>
+          <div className={styles.headerContainer}>
             <Heading as="h1" className={styles.headerTitle}>
               {siteConfig.title}
             </Heading>