tweak styling of uses page

Author: apepindev

source/_assets/js/components/Search.vue

@@ -38,6 +38,7 @@
           type="text"
           @keyup.esc="close"
           @focusout="close"
+          @change="close"
         >
 
         <div v-if="query" class="w-full sm:w-1/2 md:inset-auto text-left mb-4">
@@ -51,7 +52,7 @@
               :key="result.link"
               @mousedown.prevent
             >
-              <span class="uppercase font-semibold">{{ result.item.title }}</span>
+              <span class="font-semibold">{{ result.item.title }}</span>
 
               <span class="block text-gray-600 dark:text-neutral-300 normal-case text-sm my-1"
                     v-html="result.item.snippet"></span>

source/_components/uses-section.blade.php

@@ -1,9 +1,9 @@
-<dl class="-my-3 text-sm">
-    <div class="grid grid-cols-1 sm:grid-cols-4 mb-4">
+<dl class="mt-12 mb-8 lg:mb-0 lg:mt-8 text-sm">
+    <div class="grid grid-cols-1 sm:grid-cols-4">
         <dt class="leading-tight mb-4 pr-4">
-            <h3>{{ $heading }}</h3>
+            <h3 class="font-normal">{{ $heading }}</h3>
         </dt>
-        <dd class="sm:col-span-3 mb-6 pl-6 border-l border-gray-300 dark:border-neutral-700 uses-border">
+        <dd class="sm:col-span-3 pl-6 border-l border-gray-300 dark:border-neutral-700 uses-border">
             {{ $slot }}
         </dd>
     </div>

source/uses.blade.php

@@ -7,7 +7,7 @@
 @section('body')
 <h1>What I use</h1>
 
-<p class="mb-8">Here's what helps me do my day-to-day.</p>
+<p class="lg:mb-8">Here's what helps me do my day-to-day.</p>
 
 <div class="flow-root py-3">
     <x-uses-section heading="Workstations">
@@ -18,13 +18,13 @@
         </p>
 
         <h5>16-inch, M1 Pro, 2021 MacBook Pro</h5>
-        <p>
+        <p class="mb-0">
             This is my work machine and it's quite a bit more powerful! With a faster chipset, 32GB
             memory and 1TB of storage it makes light work with the software and containers I run.
         </p>
     </x-uses-section>
 
-    <x-uses-section heading="Development Software">
+    <x-uses-section heading="Development software">
         <h5><a href="https://www.jetbrains.com/">JetBrains IDEs</a></h5>
         <p>
             My go-to IDE is anything by JetBrains. They all come pre-packed with tons of features
@@ -44,7 +44,7 @@
         </p>
 
         <h5><a href="https://github.com/usebruno/bruno">Bruno</a></h5>
-        <p>
+        <p class="mb-0">
             The only "offline" API client with Git collaboration in mind. It's fairly new to the
             scene but it has already gained a lot of attention and works great.
         </p>
@@ -64,7 +64,7 @@
         </p>
 
         <h5><a href="https://boop.okat.best/">Boop</a></h5>
-        <p>
+        <p class="mb-0">
             A neat text manipulation tool that already comes with an array of useful scripts. You
             can also create your own scripts too.
         </p>
@@ -80,7 +80,7 @@
             <h6>Elgato Wave:3 Microphone</h6>
             <h6>Elgato Facecam</h6>
             <h6>Elgato Key Light Air</h6>
-            <h6>BenQ ScreenBar Halo</h6>
+            <h6 class="mb-0">BenQ ScreenBar Halo</h6>
         </div>
     </x-uses-section>
 </div>