neon/saahildcom
1
0
Fork 0
mirror of https://github.com/NeonGamerBot-QK/saahild.com.git synced 2024-11-22 04:43:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Navbar change

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/navbar/index.tsx
View file

@ -20,7 +20,7 @@ export default function Navbar() {
<NavLinks /> <NavLinks />
</ul> </ul>
</div> </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"> <div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1 nav-links"> <ul className="menu menu-horizontal px-1 nav-links">

38
src/components/navbar/nav.css
View file

@ -2,3 +2,41 @@
font-size:medium; font-size:medium;
@apply font-bold; @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;
}
}