Navbar change

This commit is contained in:
Saahil dutta 2024-06-22 17:05:05 -04:00
parent 35a0df789a
commit b52e25d57f
2 changed files with 39 additions and 1 deletions

View file

@ -20,7 +20,7 @@ export default function Navbar() {
<NavLinks />
</ul>
</div>
<a className="btn btn-ghost text-xl" href="#">saahild.com</a>
<a className="btn btn-ghost text-xl " href="#"><span className="nav-text-gradient">saahild.com</span></a>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1 nav-links">

View file

@ -1,4 +1,42 @@
.nav-links {
font-size:medium;
@apply font-bold;
}
.nav-text-gradient {
background: linear-gradient(var(--mauve), var(--mauve));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradient-animation222 infinite 20s linear;
}
@keyframes gradient-animation222 {
0% {
background: linear-gradient(var(--mauve), var(--blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
20% {
background: linear-gradient(var(--blue), var(--red));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
40% {
background: linear-gradient(var(--red), var(--pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
60% {
background: linear-gradient(var(--pink), var(--rosewater));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
80% {
background: linear-gradient(var(--rosewater), var(--flamingo));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
100% {
background: linear-gradient(var(--mauve), var(--pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}