Update styling

Author: DanielMcAssey

src/App.vue

@@ -10,7 +10,7 @@ import Contact from './components/Contact.vue';
 
 <template>
     <Header />
-    <main class="mt-24 w-full">
+    <main class="mt-16 w-full">
         <Section id="home" v-slot="slotProps">
             <Hero :class="slotProps.class" />
         </Section>
@@ -24,7 +24,7 @@ import Contact from './components/Contact.vue';
             <Contact :class="slotProps.class" />
         </Section>
     </main>
-    <Footer class="mt-8" />
+    <Footer />
 </template>
 
 <style scoped>

src/components/Header.vue

@@ -17,28 +17,28 @@ function toggleNavBar() {
 </script>
 
 <template>
-    <div class="z-20 fixed top-0 w-full text-white bg-slate-900/40 shadow">
+    <div class="z-20 fixed top-0 w-full text-white bg-slate-900/60 shadow">
         <div class="h-16 flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
             <div class="flex flex-row  items-center justify-between h-full">
                 <a href="#home">
                     <AppBrand class="h-10" />
                 </a>
-                <button class="rounded hover:bg-primary-100 hover:text-primary p-2 md:hidden focus:outline-none focus:shadow-outline" @click="toggleNavBar">
+                <button class="rounded hover:bg-primary-300 hover:text-primary-950 p-2 md:hidden focus:outline-none focus:shadow-outline" @click="toggleNavBar">
                     <i v-show="!isOpen" class="fa-solid fa-fw fa-bars"></i>
                     <i v-show="isOpen" class="fa-solid fa-fw fa-times"></i>
                 </button>
             </div>
             <nav class="h-full flex-col flex-grow hidden pb-4 md:ml-8 md:pb-0 md:flex md:items-center md:justify-end md:flex-row gap-4">
-                <NavLink v-for="link in links" :label="link.label" :url="link.url" class="h-full flex items-center px-2 hover:bg-primary-100 font-bold" />
+                <NavLink v-for="link in links" :label="link.label" :url="link.url" class="h-full flex items-center px-2" />
                 <SocialIcons class="text-primary-300 text-2xl" />
             </nav>
         </div>
     </div>
     <!-- mobile menu -->
     <nav class="z-10 fixed top-16 md:hidden w-full shadow">
-        <div class="absolute z-30 flex flex-col items-center justify-center w-full py-4 gap-2 text-center bg-slate-700/70"
+        <div class="absolute z-30 flex flex-col items-center justify-center w-full py-4 gap-2 text-center bg-slate-700/80"
             :class="{ block: isOpen, hidden: !isOpen }">
-            <NavLink v-for="link in links" :label="link.label" :url="link.url" @click="toggleNavBar" class="w-full py-1 hover:bg-primary-100 font-bold text-lg" />
+            <NavLink v-for="link in links" :label="link.label" :url="link.url" @click="toggleNavBar" class="w-full py-1 text-lg" />
             <SocialIcons class="mx-auto text-primary-300 text-xl" />
         </div>
     </nav>

src/components/Hero.vue

@@ -3,10 +3,14 @@
 </script>
 
 <template>
-    <div class="space-y-20">
-        <div class="text-6xl leading-[1.2] font-bold uppercase text-center text-white px-2 relative">
-            <span class="text-primary-500 bg-slate-900/80 px-4">Experiences</span> that are unbounded from <span class="invisible px-10">reality</span>.
-            <div class="drop-shadow-md absolute text-center right-[20%] sm:right-28 md:right-14 lg:right-28 bottom-1 text-primary-400 font-extrabold animate-font-cycle">reality</div>
+    <div>
+        <div class="py-24 px-2">
+            <div class="text-4xl sm:text-6xl leading-[1.2] sm:leading-[1.2] font-bold uppercase text-center text-white  relative">
+                <span class="text-primary-500 bg-slate-900/80 px-4">Experiences</span> that are unbounded from <span class="invisible text-primary-400 font-extrabold drop-shadow-md px-8">reality</span>.
+                <div class="-z-30 absolute text-center right-0 top-0 left-0 bottom-0">
+                    <span class="text-primary-500 invisible px-4">Experiences</span><span class="invisible"> that are unbounded from </span><span class="text-primary-400 font-extrabold drop-shadow-md px-8 animate-font-cycle">reality</span><span class="invisible">.</span>
+                </div>
+            </div>
         </div>
         <div class="font-text text-center text-white bg-slate-900/60 hover:bg-slate-800/60 shadow px-4 py-8">
             <p>

src/components/partials/NavLink.vue

@@ -13,7 +13,7 @@ defineProps({
 </script>
 
 <template>
-    <a class="text-white font-text transition duration-200 hover:text-primary hover:ease-in-out focus:text-primary-200 disabled:text-black/30 motion-reduce:transition-none lg:px-2 [&.active]:text-black/90"
+    <a class="text-white font-text font-bold transition duration-200 hover:text-primary-950 hover:bg-primary-300/50 hover:ease-in-out focus:text-primary-200 motion-reduce:transition-none lg:px-2"
        :href="url"
        :title="label">{{ label }}</a>
 </template>

src/components/partials/Section.vue

@@ -3,8 +3,8 @@
 </script>
 
 <template>
-    <div class="w-full">
-        <slot class="py-16 w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl mx-auto" />
+    <div class="w-full py-16 first:pt-0">
+        <slot class="w-full sm:max-w-lg md:max-w-xl lg:max-w-2xl mx-auto" />
     </div>
 </template>
 

src/components/partials/SectionTitle.vue

@@ -17,7 +17,7 @@ defineProps({
 
 <template>
     <div class="text-center uppercase">
-        <h1 class="font-bold text-5xl">
+        <h1 class="font-bold text-3xl sm:text-5xl">
             <span class="text-primary-200 bg-slate-500/40 p-2">{{ number.toString(10).padStart(2, '0') }}</span><span class="ml-4 text-white">{{ title }}</span>
         </h1>
         <p v-if="subtitle" class="font-extralight text-2xl mt-6 text-primary-50">