Joururi/joururi-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed navbar style

Browse Source
This commit is contained in:
Alexis
2026-01-18 17:58:01 +01:00
parent 0b03f8bbe6
commit 04c12865ac
4 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/main.css
View File

@@ -98,3 +98,14 @@
} }
} }
} }
@theme {
--color-body: var(--color-slate-50);
--color-background: var(--color-slate-950);
--color-primary: var(--color-emerald-500)
}
@utility container {
padding-inline: 1rem;
margin-inline: auto;
}

28
src/components/Navbar.astro
View File

@@ -7,34 +7,34 @@ interface MenuItem {
const menuItems: MenuItem[] = [ const menuItems: MenuItem[] = [
{ {
label: "Home", label: "Home",
to: "/" to: ""
}, },
{ {
label: "Projects", label: "Projects",
to: "/projects" to: "projects"
} }
] ]
interface Props { const activeSegment = Astro.url.pathname.split("/")[1]
floating?: boolean
}
const { floating = false } = Astro.props
--- ---
<header <header
class="absolute top-0 left-0 pt-6 w-full z-10"
>
<nav class="container text-[.8em]" aria-labelledby="Main pages">
<menu class="px-6 py-2 bg-slate-900/50 rounded-xl backdrop-blur flex gap-6">
{menuItems.map((item) => (
<li>
<a
href={"/" + item.to}
class="block py-2 underline-offset-4 hover:underline"
class:list={ class:list={
{ {
"absolute top-12 left-12 z-10": floating, "text-primary/80 hover:text-primary": activeSegment === item.to,
"pt-12 pb-6": !floating "text-body/80 hover:text-body": activeSegment !== item.to
} }
} }
> >
<nav aria-labelledby="Main pages">
<menu class="flex gap-12">
{menuItems.map((item) => (
<li>
<a href={item.to} class="py-2">
{item.label} {item.label}
</a> </a>
</li> </li>

4
src/layouts/HomeLayout.astro
View File

@@ -83,8 +83,8 @@ const websiteDomain = "alexcreates.fr"
</script> </script>
</head> </head>
<body class="h-screen relative bg-slate-950 text-white px-12 overflow-hidden"> <body class="h-screen relative bg-background text-body px-12 overflow-hidden">
<Navbar floating /> <Navbar />
<slot /> <slot />

4
src/layouts/Layout.astro
View File

@@ -83,10 +83,12 @@ const websiteDomain = "alexcreates.fr"
</script> </script>
</head> </head>
<body class="h-screen relative bg-slate-950 text-white px-4 md:px-12 grid grid-rows-[auto_1fr] grid-cols-[100%] gap-4 pb-12"> <body class="h-screen relative bg-slate-950 text-white">
<Navbar /> <Navbar />
<div class="container pt-28">
<slot /> <slot />
</div>
{hasParticles && {hasParticles &&
<BgParticles /> <BgParticles />