Etheryo/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added hover animation

Browse source
This commit is contained in:
Yohan Boujon 2024-03-10 21:55:27 +01:00
parent a07ba08c78
commit a8ccc8d469
2 changed files with 49 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/lib/css/navbar.css
View file

@ -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;

2
frontend/src/routes/+layout.svelte
View file

@ -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>