fix: home page title structure

SidonieBouthors · Jul 28, 2024 · 7e24d72 · 7e24d72
1 parent 4480e76
commit 7e24d72
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,10 +4,8 @@ export default function Home() {
   return (
     <>
       <div className="home-hero">
-        <h1>
-          Welcome to my website!
-          <div className="subtitle">Recipes, projects & more</div>
-        </h1>
+        <h1>Welcome to my website!</h1>
+        <div className="subtitle">Recipes, projects & more</div>
       </div>
       <div className="home-page">
         <InfoBox title="Note">

diff --git a/styles/pages/_home.scss b/styles/pages/_home.scss
@@ -18,34 +18,34 @@
   h1 {
     font-family: $font-black;
     font-size: 3rem;
-    padding: 0 1.5rem 6rem;
+    padding: 0 1.5rem;
+    margin: 0;
     // Use the text-color from the dark theme
     color: map.get($dark-theme-map, "text-color");
+  }
 
-    .subtitle {
-      font-family: $font-bold;
-      font-size: 2rem;
-      color: map.get($dark-theme-map, "secondary-text-color");
-    }
+  .subtitle {
+    text-align: center;
+    font-family: $font-bold;
+    font-size: 2rem;
+    color: map.get($dark-theme-map, "secondary-text-color");
   }
 
   @media screen and (min-width: 40rem) {
     h1 {
       font-size: 4rem;
-
-      .subtitle {
-        font-size: 2rem;
-      }
+    }
+    .subtitle {
+      font-size: 2rem;
     }
   }
 
   @media screen and (min-width: 60rem) {
     h1 {
       font-size: 5rem;
-
-      .subtitle {
-        font-size: 3rem;
-      }
+    }
+    .subtitle {
+      font-size: 3rem;
     }
   }
 }