florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update nav

Browse source
This commit is contained in:
Florian RICHER 2024-01-12 23:09:34 +01:00
parent bd9f35c993
commit 7f2da56441
3 changed files with 32 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

27
style/nav.css
View file

@ -1,22 +1,29 @@
@layer components {
nav {
@apply flex flex-wrap flex-row justify-between items-center py-5;
@apply mx-auto max-w-3xl;
@apply font-semibold;
@apply mx-auto max-w-3xl py-5;
@apply md:flex md:justify-between md:items-center; /* Transition css only for mobile */
@apply font-semibold relative;
& > .nav-mobile {
@apply md:hidden scale-125;
}
& > .nav-main {
@apply max-md:flex max-md:justify-between max-md:items-center;
& > .nav-home {
@apply uppercase font-semibold text-lg;
& > .nav-mobile {
@apply md:hidden scale-125;
}
& > .nav-home {
@apply uppercase font-semibold text-lg;
}
}
& > .nav-links {
@apply hidden flex-row gap-5 md:h-auto md:flex;
@apply max-md:transition-transform max-md:scale-y-0; /* Transition css only for mobile */
@apply w-full flex flex-col gap-3 md:w-auto md:flex-row;
@apply bg-surface dark:bg-dark_surface;
@apply max-md:my-5 max-md:p-5 max-md:border-2 max-md:absolute max-md:z-10;
&.open {
@apply max-md:flex max-md:flex-col max-md:w-full max-md:my-5 max-md:py-5 max-md:border-y-2;
@apply max-md:scale-y-100; /* Transition css only for mobile */
}
}