add content height and button icon & border styles

BrandonWingerAir · Jan 18, 2024 · 35c4411 · 35c4411
1 parent 7d4849e
commit 35c4411
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
   <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">
+    <NuxtLink to="/" class="px-4 py-2 bg-gray-400 border border-neutral-800 rounded-lg">
       Home Page
     </NuxtLink>
   </nav>
   <main>
     <slot/>
   </main>
 
-  <div class="bg-white text-center py-7">
+  <div class="bg-white text-center py-7 border-t-4 border-t-red-600 border-b-4 border-b-neutral-900">
     <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>

diff --git a/pages/index.vue b/pages/index.vue
@@ -6,7 +6,7 @@
           <h1 class="text-3xl font-bold text-white">Video Games</h1>
         </div>
         <div class="flex justify-center mb-10">
-          <div class="border rounded-md border-neutral-400 mr-1">
+          <div class="border rounded-md border-neutral-400 mr-2">
             <input 
               class="px-2 py-1 border-0 min-w-64"
               v-model="searchTerm"
@@ -22,14 +22,14 @@
           </div>
           <button 
             @click="!showResults ? showResults = !showResults : showResults = showResults; hideSuggestions = true" 
-            class="h-9 px-4 bg-neutral-500 text-white border border-neutral-700 active:border-neutral-500 font-semibold rounded-lg"
+            class="h-9 px-3 bg-neutral-500 text-white border border-neutral-700 active:border-neutral-500 font-semibold rounded-lg"
           >
-            Search
+            Search <span class="text-sm">🔎</span>
           </button>
         </div>
       </div>
 
-      <div class="z-0 self-center pt-10">
+      <div class="z-0 self-center pt-10 min-content-height">
         <div 
           v-if="showResults && data?.results[0]" 
           class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-10 gap-y-10 mb-10"
@@ -72,4 +72,10 @@ const { data } = await useFetch<Response>(url);
 
 const showResults = ref(false);
 const hideSuggestions = ref(true);
-</script>
+</script>
+
+<style>
+.min-content-height {
+  min-height: 832px;
+}
+</style>