spacing, colors and button styles

BrandonWingerAir · Jan 18, 2024 · 89062be · 89062be
1 parent 8b9545d
commit 89062be
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,23 +1,21 @@
 <template>
-  <nav class="flex justify-center bg-white py-12">
+  <nav class="flex justify-center bg-white border-b-2 border-black text-white py-12">
     <NuxtLink to="/" class="px-4 py-2 bg-gray-400 border rounded-lg">
       Home Page
     </NuxtLink>
   </nav>
   <main>
     <slot/>
   </main>
-
-  <hr class="mb-7">
 
-  <div class="text-white text-center">
+  <div class="bg-white text-center py-7">
     <h2 class="mb-5">
       Built with Nuxt 3 by <a href="https://www.brandonwinger-air.com" target="_blank" class="font-semibold">Brandon Winger-Air</a> using <a href="https://www.giantbomb.com/api/" target="_blank" class="font-semibold">external API</a>.
     </h2>
 
     <hr width="325" class="mx-auto mb-4">
 
-    <h3 class="mb-7">
+    <h3>
       <a href="https://github.com/BrandonWingerAir/nuxt-3-video-game-search" target="_blank">GitHub 💻</a>
     </h3>
   </div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex flex-col">
-      <div class="bg-emerald-600 pt-6">
+      <div class="bg-red-500 pt-6 border-b border-neutral-400">
         <div class="mb-7 text-center">
           <h1 class="text-3xl font-bold text-white">Video Games</h1>
         </div>
@@ -22,7 +22,7 @@
           </div>
           <button 
             @click="!showResults ? showResults = !showResults : showResults = showResults; hideSuggestions = true" 
-            class="h-9 px-4 bg-cyan-500 text-white font-semibold rounded-lg"
+            class="h-9 px-4 bg-neutral-500 text-white border border-neutral-700 active:border-neutral-500 font-semibold rounded-lg"
           >
             Search
           </button>