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[] = [
{
label: "Home",
to: "/"
to: ""
},
{
label: "Projects",
to: "/projects"
to: "projects"
}
]
interface Props {
floating?: boolean
}
const { floating = false } = Astro.props
const activeSegment = Astro.url.pathname.split("/")[1]
---
<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={
{
"absolute top-12 left-12 z-10": floating,
"pt-12 pb-6": !floating
"text-primary/80 hover:text-primary": activeSegment === item.to,
"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}
</a>
</li>

4
src/layouts/HomeLayout.astro
View File

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

4
src/layouts/Layout.astro
View File

@@ -83,10 +83,12 @@ const websiteDomain = "alexcreates.fr"
</script>
</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 />
<div class="container pt-28">
<slot />
</div>
{hasParticles &&
<BgParticles />