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

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

@ -6,7 +6,7 @@ nav {
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
nav > div { nav>div {
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
@ -44,10 +44,53 @@ nav > div {
text-decoration: none; text-decoration: none;
font-family: Gabarito; font-family: Gabarito;
font-weight: 400; font-weight: 400;
transition: all .3s ease 0s;
}
.navbar-categories div {
position: relative;
margin-left: 1rem; margin-left: 1rem;
margin-right: 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 { .navbar-search {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -85,17 +128,17 @@ nav > div {
height: 4rem; height: 4rem;
} }
.floating > div { .floating>div {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
color: var(--color-text); color: var(--color-text);
} }
.floating > div > h1 { .floating>div>h1 {
color: var(--color-text) !important; color: var(--color-text) !important;
} }
.floating > div > div > a { .floating>div>div>a {
color: var(--color-text) !important; color: var(--color-text) !important;
} }

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'}> <div class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}>
<h1>Etheryo Blog</h1> <h1>Etheryo Blog</h1>
</div> </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> <div>
<a href="/">Articles</a> <a href="/">Articles</a>
</div> </div>