Adjust footer height and improve layout responsiveness; update CardComponent styling

Author: Lumexio

src/assets/base.css

@@ -55,7 +55,7 @@
   --large-gap: 2rem;
 
   /* Layout variables */
-  --footer-height: 8rem;
+  --footer-height: 6rem;
   --header-height: 4rem;
   --card-max-width-small: 15rem;
   --card-max-width-medium: 20rem;

src/assets/main.css

@@ -9,7 +9,7 @@
 
 /* Typography */
 h1 {
-  font-size: 2rem;
+  font-size: calc(1rem + 1vw);
   font-weight: bold;
   color: var(--color-text-featured);
   margin: 0;

src/components/HomeComponent.vue

@@ -12,7 +12,7 @@
     </div>
 
 
-    <CardComponent width="30rem" :customStyle="{ padding: '0px' }">
+    <CardComponent :customStyle="{ padding: '0px', maxWidth: '30rem' }">
       <template v-slot:image>
         <img alt="stock promotional" src="../assets/stockmachine-promotional.jpg" />
       </template>

src/components/Navbar.vue

@@ -2,7 +2,6 @@
   <nav>
     <div class="title-icon">
       <img src="@/assets/icon.png" alt="stockmachine" width="30rem" />
-
       <h1>Stock machine</h1>
     </div>
     <div class="nav-links">