add site logo image, responsive styles and github button in header

components/GameCard.vue

@@ -35,7 +35,7 @@ const config = useRuntimeConfig();
 const imgPath = computed(() => props.game?.image.original_url != null ? `${config.public.imgBaseUrl}${props.game.image.original_url}` : 'https://via.placeholder.com/300x500');
 </script>
 
-<style>
+<style scoped>
 img {
     max-height: 100%;
     max-width: 100%;

layouts/default.vue

@@ -1,14 +1,20 @@
 <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 border-neutral-800 rounded-lg">
+  <nav class="h-20 flex justify-between bg-white border-b-2 border-black pl-4 md:pl-6 pr-2 md:pr-4 py-4 text-white">
+    <img src="/gaming-pc-logo.png" alt="gaming logo" class="w-14 h-14 self-center">
+
+    <NuxtLink to="/" class="h-12 px-4 pt-2 ml-11 bg-gray-400 border border-neutral-800 rounded-lg self-center">
       Home Page
     </NuxtLink>
+
+    <button class="h-12 bg-emerald-400 hover:bg-emerald-500 px-4 border border-neutral-800 rounded-md hover:text-neutral-100 font-semibold self-center">
+      <a href="https://github.com/BrandonWingerAir/nuxt-3-video-game-search" target="_blank">GitHub 💻</a>
+    </button>
   </nav>
   <main>
     <slot/>
   </main>
 
-  <div class="bg-white text-center py-7 border-t-4 border-t-red-600 border-b-4 border-b-neutral-900">
+  <div class="bg-white text-center py-7 border-t-4 border-t-red-600 border-b-2 md: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>

pages/index.vue

@@ -22,7 +22,7 @@
           </div>
           <button 
             @click="!showResults ? showResults = !showResults : showResults = showResults; hideSuggestions = true" 
-            class="h-9 px-3 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 hover:bg-neutral-400 active:bg-neutral-500 text-white border border-neutral-700 active:border-neutral-500 font-semibold rounded-lg"
           >
             Search <span class="text-sm">🔎</span>
           </button>