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;
}

32
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:list={ class="absolute top-0 left-0 pt-6 w-full z-10"
{
"absolute top-12 left-12 z-10": floating,
"pt-12 pb-6": !floating
}
}
> >
<nav aria-labelledby="Main pages"> <nav class="container text-[.8em]" aria-labelledby="Main pages">
<menu class="flex gap-12"> <menu class="px-6 py-2 bg-slate-900/50 rounded-xl backdrop-blur flex gap-6">
{menuItems.map((item) => ( {menuItems.map((item) => (
<li> <li>
<a href={item.to} class="py-2"> <a
href={"/" + item.to}
class="block py-2 underline-offset-4 hover:underline"
class:list={
{
"text-primary/80 hover:text-primary": activeSegment === item.to,
"text-body/80 hover:text-body": activeSegment !== item.to
}
}
>
{item.label} {item.label}
</a> </a>
</li> </li>

6
src/layouts/HomeLayout.astro
View File

@@ -1,4 +1,4 @@
--- ---
import '../../assets/css/main.css' import '../../assets/css/main.css'
import BgParticles from '../components/BgParticles.astro' import BgParticles from '../components/BgParticles.astro'
import BgGrid from '../components/BgGrid.astro' import BgGrid from '../components/BgGrid.astro'
@@ -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 />

6
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 />
<slot /> <div class="container pt-28">
<slot />
</div>
{hasParticles && {hasParticles &&
<BgParticles /> <BgParticles />