loke/lorenzoiovino.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: align navbar and footer with the page content width

Browse source
This commit is contained in:
Lorenzo Iovino 2026-09-29 00:36:29 +02:00
parent 0cf0762b13
commit 7a53279e60
3 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Footer.astro
View file

@ -1,11 +1,17 @@
--- ---
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import forgejoIcon from "../assets/forgejo.svg"; import forgejoIcon from "../assets/forgejo.svg";
interface Props {
width?: "4xl" | "7xl";
}
const { width = "4xl" } = Astro.props;
const maxWidth = width === "7xl" ? "max-w-7xl" : "max-w-4xl";
--- ---
<div class="w-full bg-secondary dark:bg-gray-800 py-8 px-4 transition-colors duration-200"> <div class="w-full bg-secondary dark:bg-gray-800 py-8 transition-colors duration-200">
<div <div
class="max-w-6xl mx-auto flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center" class:list={[maxWidth, "mx-auto px-4 sm:px-6 lg:px-8 flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center"]}
> >
<div <div
class="text-center sm:text-left text-gray-800 dark:text-gray-200 flex flex-col items-center sm:items-start" class="text-center sm:text-left text-gray-800 dark:text-gray-200 flex flex-col items-center sm:items-start"

8
src/components/Navbar.astro
View file

@ -1,11 +1,17 @@
--- ---
interface Props {
// Match the page content: 4xl for reading pages, 7xl for posts with the table of contents
width?: "4xl" | "7xl";
}
const { width = "4xl" } = Astro.props;
const maxWidth = width === "7xl" ? "max-w-7xl" : "max-w-4xl";
const currentPath = Astro.url.pathname; const currentPath = Astro.url.pathname;
--- ---
<nav <nav
class="fixed top-0 left-0 right-0 z-50 bg-secondary dark:bg-gray-800 shadow-sm transition-colors duration-200" class="fixed top-0 left-0 right-0 z-50 bg-secondary dark:bg-gray-800 shadow-sm transition-colors duration-200"
> >
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> <div class={`${maxWidth} mx-auto px-4 sm:px-6 lg:px-8`}>
<div class="flex justify-between items-center h-16"> <div class="flex justify-between items-center h-16">
<!-- Logo/Brand --> <!-- Logo/Brand -->
<a <a

4
src/pages/blog/[slug].astro
View file

@ -38,7 +38,7 @@ const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
modifiedTime={entry.data.updatedDate} modifiedTime={entry.data.updatedDate}
tags={entry.data.tags} tags={entry.data.tags}
> >
<Navbar /> <Navbar width="7xl" />
<div class="min-h-screen pt-16 bg-gray-50 dark:bg-gray-900 transition-colors duration-200"> <div class="min-h-screen pt-16 bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
<div class="flex gap-8 items-start"> <div class="flex gap-8 items-start">
@ -200,5 +200,5 @@ const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer width="7xl" />
</BaseLayout> </BaseLayout>