Added hover animation

frontend/src/lib/css/navbar.css

@@ -44,10 +44,53 @@ nav > div {
     text-decoration: none;
     font-family: Gabarito;
     font-weight: 400;
+    transition: all .3s ease 0s;
+}
+
+.navbar-categories div {
+    position: relative;
     margin-left: 1rem;
     margin-right: 1rem;
 }
 
+.navbar-categories>div>a::before,
+.navbar-categories>div>a::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    background-color: var(--palette-purple);
+    transition: all .3s ease 0s;
+    height: 2px;
+}
+
+.navbar-categories-white>div>a::before,
+.navbar-categories-white>div>a::after {
+    background-color: var(--palette-pink) !important;
+}
+
+.navbar-categories>div>a::before {
+    top: -6px;
+    height: 3px;
+}
+
+.navbar-categories>div>a::after {
+    bottom: -6px;
+    right: 0;
+}
+
+.navbar-categories>div>a:hover::before,
+.navbar-categories>div>a:hover::after {
+    width: 100%;
+}
+
+.navbar-categories>div>a:hover {
+    color: var(--palette-purple) !important;
+}
+
+.navbar-categories-white>div>a:hover {
+    color: var(--palette-pink) !important;
+}
+
 .navbar-search {
     align-items: center;
     justify-content: center;

frontend/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 	<div class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}>
 		<h1>Etheryo Blog</h1>
 	</div>
-	<div class={scrollY < 50 ? 'navbar-categories flex-row flex-end navbar-background shadow' : 'flex-end navbar-categories h-100'}>
+	<div class={scrollY < 50 ? 'navbar-categories navbar-categories-white flex-row flex-end navbar-background shadow' : 'flex-end navbar-categories'}>
 		<div>
 			<a href="/">Articles</a>
 		</div>