Update styles

Author: derekmbrown

src/components/Nav.astro

@@ -3,29 +3,21 @@ import Emoji from 'astro-emoji'
 import { Icon } from 'astro-icon/components'
 ---
 
-<!-- <nav class="flex flex-col mt-12 mb-10 text-[#F2F5F7]">
-  <div class="flex font-['Merriweather'] text-4xl font-black mb-3">
-    <a href="/">Derek Brown <Emoji symbol="👨🏻‍💻" label="person" /></a>
-  </div>
-  <div class="font-['Merriweather'] text-xl flex items-center gap-4">
-    <span class="navItem" id="notes"><a href="/">Notes</a></span>
-    <span class="navItem" id="tags"><a href="/tags">Tags</a></span>
-    <span class="navItem" id="about"><a href="/about">About</a></span>
-    <span class="navItem" id="search">
-      <a href="/notes/search"><Icon name="mdi:search" width="30" height="27"/></a>
-    </span>
-  </div>
-</nav> -->
-
 <nav class="flex flex-col mt-12 mb-10 text-[#F2F5F7]">
   <div class="flex font-['Merriweather'] text-4xl font-black mb-3">
     <a href="/">Derek Brown <Emoji symbol="👨🏻‍💻" label="person" /></a>
   </div>
-  <div class="text-lg flex items-center gap-3">
-    <span class="bg-[#1E262F] px-3.5 py-2 rounded-lg" id="notes"><a href="/">Notes</a></span>
-    <span class="bg-[#1E262F] px-3.5 py-2 rounded-lg" id="tags"><a href="/tags">Tags</a></span>
-    <span class="bg-[#1E262F] px-3.5 py-2 rounded-lg" id="about"><a href="/about">About</a></span>
-    <span class="bg-[#1E262F] px-3 py-2 rounded-lg" id="search">
+  <div class="text-lg flex items-center gap-2.5">
+    <span class="navItem bg-[#1E262F] px-3.5 py-2 rounded-lg" id="notes">
+      <a href="/">Notes</a>
+    </span>
+    <span class="navItem bg-[#1E262F] px-3.5 py-2 rounded-lg" id="tags">
+      <a href="/tags">Tags</a>
+    </span>
+    <span class="navItem bg-[#1E262F] px-3.5 py-2 rounded-lg" id="about">
+      <a href="/about">About</a>
+    </span>
+    <span class="navItem bg-[#1E262F] px-3.5 py-2 rounded-lg" id="search">
       <a href="/notes/search"><Icon name="mdi:search" width="30" height="27"/></a>
     </span>
   </div>

src/components/ui/Search.jsx

@@ -33,7 +33,7 @@ export default function Search({ searchList }) {
           class="px-4 py-4"
         />
       </div>
-      {query.length > 1 && (
+      {query.length >= 1 && (
         <div class="my-5 text-lg">
           <div>{notes.length} {notes.length === 1 ? 'note' : 'notes'} found with <span class="font-bold">{query}</span>:
           </div>

src/pages/tags/[tag].astro

@@ -28,7 +28,7 @@ const title = `Tag: ${tag}`
   MetaTag="website", 
   MetaUrl="https://derekbrown.io"
 >
-  <div class="mb-6 text-lg">{filteredNotes.length} notes tagged with <span class="font-bold">{tag}</span>:</div>
+  <div class="mb-6 text-lg">{filteredNotes.length} {filteredNotes.length === 1 ? 'note' : 'notes'} tagged with <span class="font-bold">{tag}</span>:</div>
   {filteredNotes.map((note) =>
     <NoteItem note={note} />
   )}

src/styles/global.css

@@ -7,15 +7,15 @@ html, body {
 }
 
 .navItem {
-  border-bottom: 2px solid transparent;
+  border: 1px solid transparent;
 }
 
 .navItem:hover {
-  border-bottom: 2px solid;
+  border: 1px solid;
   transition: 0.8s;
   cursor: pointer;
 }
 
 .active {
-  border-bottom: 3px solid;
+  border: 1px solid;
 }