Fixed About Overlay Styling, Updated Mobile Nav Links

ethanfox · Jul 25, 2024 · 28f6495 · 28f6495
1 parent 0bf7a06
commit 28f6495
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/src/components/AboutOverlay.vue b/src/components/AboutOverlay.vue
@@ -34,20 +34,20 @@
             </p>
           </div>
           <div class="flex flex-col gap-4 w-full px-2 md:px-8">
-            <p class="text-lg font-semibold text-neutral-950">
+            <p class="text-lg text-left font-semibold text-neutral-950">
               To learn more about me:
             </p>
             <div class="flex flex-col lg:flex-row gap-4">
               <div class="flex gap-1">
                 <img
                   src="../assets/user.svg"
                   alt="Search"
-                  class="h-8 mx-auto my-auto object-contain rounded-l-sm"
+                  class="size-8 mx-auto my-auto object-contain rounded-l-sm"
                 />
                 <a
                   href="https://www.ethanjamesfox.com"
                   target="_blank"
-                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  class="text-lg w-full text-[#b50938] my-auto hover:underline"
                   >Visit my website</a
                 >
               </div>
@@ -60,7 +60,7 @@
                 <a
                   href="https://github.com/ethanfox"
                   target="_blank"
-                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  class="text-lg w-full text-[#b50938] my-auto hover:underline"
                   >View Github Profile</a
                 >
               </div>
@@ -73,7 +73,7 @@
                 <a
                   href="https://www.linkedin.com/in/ethanjamesfox/"
                   target="_blank"
-                  class="text-lg text-[#b50938] my-auto hover:underline"
+                  class="text-lg w-full text-[#b50938] my-auto hover:underline"
                   >Connect on LinkedIn</a
                 >
               </div>

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -57,27 +57,26 @@
           class="h-full w-32 object-cover rounded-l-sm"
         />
       </a>
-      <div
-        class="w-full justify-between flex border border-neutral-200 hover:bg-neutral-200 transition-all"
-      >
+      <div class="w-full justify-between flex border border-neutral-200">
         <a
           class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg hover:bg-neutral-200 px-6 object-center w-full h-full text-center flex content-center transition-all"
           href="https://www.artic.edu/visit"
           target="_blank"
-          rel="noopener noreferrer"
         >
           <span class="mx-auto my-auto">Visit</span>
         </a>
-        <a
-          class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg px-4 object-center w-full h-full text-center flex content-center"
+        <button
+          @click="aboutButtonClicked"
+          class="flex-p-8 my-auto mx-auto font-semibold text-sm lg:text-lg px-4 object-center w-full h-full text-center flex content-center hover:bg-neutral-200 transition-all"
           href="/about"
-          ><span class="mx-auto my-auto">About</span></a
         >
+          <span class="mx-auto my-auto">About</span>
+        </button>
       </div>
 
       <button
-        @click="buttonClicked"
-        class="my-auto mx-auto font-semibold border-l-0 border border-neutral-200 h-full text-sm lg:text-lg object-center rounded-r-sm w-32 text-center flex content-center"
+        @click="searchButtonClicked"
+        class="my-auto mx-auto font-semibold border-l-0 border border-neutral-200 h-full text-sm lg:text-lg object-center rounded-r-sm w-32 text-center flex content-center hover:bg-neutral-200 transition-all"
         href="/about"
       >
         <img