mguilbert/matheoguilbert.fr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved styling of the header component

Browse Source
This commit is contained in:
Mathéo GUILBERT
2026-04-15 10:10:15 +02:00
parent 3bcb45372f
commit 59973de815
2 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/layout.tsx
+16 -16
View File
@@ -4,31 +4,31 @@ import "./globals.css";
import Header from "@/components/layout/Header"; import Header from "@/components/layout/Header";
const playfairDisplay = Playfair_Display({ const playfairDisplay = Playfair_Display({
variable: "--font-playfair", variable: "--font-playfair",
subsets: ["latin"], subsets: ["latin"],
}); });
const inter = Inter({ const inter = Inter({
variable: "--font-inter", variable: "--font-inter",
subsets: ["latin"], subsets: ["latin"],
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Mathéo Guilbert - Développeur Full Stack", title: "Mathéo Guilbert - Développeur Full Stack",
description: "Portfolio de Mathéo Guilbert, développeur web freelance.", description: "Portfolio de Mathéo Guilbert, développeur web freelance.",
}; };
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-[11px] antialiased`}> <html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-[11px] antialiased`}>
<body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown"> <body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown">
<Header /> <Header />
{children} {children}
</body> </body>
</html> </html>
); );
} }
components/layout/Header.tsx
+4 -4
View File
@@ -1,16 +1,16 @@
export default function Header() { export default function Header() {
return ( return (
<header className="bg-brand-brown text-brand-beige w-full py-6 px-10 flex justify-between items-center"> <header className="bg-brand-brown text-brand-beige w-full py-6 px-10 flex justify-between items-center rounded-[10px]">
<div className="font-serif text-2xl font-bold">M. Guilbert</div> <div className="font-serif text-2xl font-light">M. Guilbert</div>
<nav> <nav>
<ul className="flex gap-8 font-sans uppercase text-sm tracking-widest"> <ul className="flex gap-8 font-sans text-base font-light">
<li>Accueil</li> <li>Accueil</li>
<li>Projets</li> <li>Projets</li>
<li>À propos</li> <li>À propos</li>
<li>Blog</li> <li>Blog</li>
</ul> </ul>
</nav> </nav>
<div>🇫🇷</div> <div className="font-sans text-base font-light">France</div>
</header> </header>
); );
} }