Changes to spacing and microexpressions on hover

Components/Layout/navbar.jsx

@@ -18,8 +18,8 @@ const Navbar = () => {
     <header>
       <nav className={`nav`}>
         <Link href={"/"}>
-        <div className="flex items-center"><Image src="/shilohlogowhite.png" alt="Description of the image" width={50} height={50} />
+        <div className="flex items-center hover:fade"><Image src="/shilohlogowhite.png" alt="Description of the image" width={30} height={30} />
-          <h1 className="logo px-5">shiloh</h1></div>
+          <h1 className="logo px-2">shiloh</h1></div>
         </Link>
         <div
           onClick={() => setNavActive(!navActive)}

styles/globals.css

@@ -82,15 +82,28 @@ nav{
 }
 .nav__menu-list.active{
   right: 0;
+  background-color:rgba(0, 0, 0, 0.815);
 }
-.nav__link{
+.nav__item{
   font-size: 18px; 
   position: relative;
   transition: all 0.2s;
 }
 
-.nav__link:hover{
+.nav__item::before{
- font-weight: bold;
+  content: '';
+  position: absolute;
+  width: 0%;
+  height: 1px;
+  bottom: -2px;
+  left: 0;
+  background-color: rgb(59, 130, 246);
+  transition: all 0.2s;
+  z-index: 1;
+}
+
+.nav__item:hover::before{
+  width: 100%;
 }
 
 .center{
@@ -99,6 +112,7 @@ nav{
   justify-content: center;
   align-items: center;
 }
+
 @media screen and (min-width: 768px) {
   .nav__menu-bar{
     display: none;
@@ -111,18 +125,21 @@ nav{
     column-gap: 24px;
     align-items: center;
   }
-  .nav__link::before{
+  .nav__item::before{
     content: '';
     position: absolute;
     width: 0%;
-    height: 6px;
+    height: 1px;
-    bottom: -16px;
+    bottom: -1px;
     left: 0;
     background-color: white;
     transition: all 0.2s;
+    z-index: 1;
   }
   
-  .nav__link:hover:before{
+  .nav__item:hover::before{
    width: 100%;
   }
 }
+
+

tailwind.config.js

@@ -53,6 +53,7 @@ module.exports = {
     "px-20",
     "px-5",
     "text-base",
+    "px-2",
   ],
   theme: {
     extend: {