37 lines
No EOL
1.1 KiB
CSS
37 lines
No EOL
1.1 KiB
CSS
@layer components {
|
|
nav {
|
|
@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-main {
|
|
@apply max-md:flex max-md:justify-between max-md:items-center;
|
|
|
|
& > .nav-mobile {
|
|
@apply md:hidden scale-125;
|
|
}
|
|
|
|
& > .nav-home {
|
|
@apply uppercase font-semibold text-lg;
|
|
}
|
|
}
|
|
|
|
& > .nav-links {
|
|
@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:scale-y-100; /* Transition css only for mobile */
|
|
}
|
|
}
|
|
|
|
& a {
|
|
@apply transition-colors duration-500;
|
|
&:hover {
|
|
@apply text-primary underline;
|
|
}
|
|
}
|
|
}
|
|
} |