fix: hero section sizing

Author: ringoldsdev

src/components/Navigation.astro

@@ -11,7 +11,7 @@ import { Icon } from "astro-icon/components";
 		<div class="text-2xl font-bold">LOGO</div>
 		<div class="flex justify-end">
 			<!-- Desktop Navigation -->
-			<div class="hidden sm:flex items-center space-x-8">
+			<div class="hidden md:flex items-center space-x-8">
 				<a href="#" class="hover:text-gray-300">Blog</a>
 				<a href="#" class="hover:text-gray-300">Snippets</a>
 				<a href="#" class="hover:text-gray-300">Projects</a>
@@ -34,7 +34,7 @@ import { Icon } from "astro-icon/components";
 			</button>
 			<!-- Mobile Hamburger Button -->
 			<button
-				class="sm:hidden text-white focus:outline-none ml-8"
+				class="md:hidden text-white focus:outline-none ml-8"
 				@click="mobileMenuOpen = true"
 			>
 				<Icon name="hamburger" size="24" />

src/layouts/BlogLayout.astro

@@ -49,7 +49,9 @@ const { title, backgroundText } = Astro.props as Props;
 			<Navigation />
 			<NavigationPlaceholder />
 			<ParallaxTextOverlay text={backgroundText} slot="background" />
-			<slot name="hero" />
+			<div class="sm:pt-10 pb-8 px-8 sm:px-20 text-white">
+				<slot name="hero" />
+			</div>
 		</div>
 		<MobileMenu />
 		<slot />

src/pages/blog/[id].astro

@@ -20,8 +20,8 @@ const { Content, headings } = await render(post);
 	title={post.data.title as string}
 	backgroundText={post.data.title as string}
 >
-	<div slot="hero" class="pt-10 pb-8 text-center text-white">
-		<h1 class="text-4xl lg:text-6xl font-bold font-display leading-tight">
+	<div slot="hero" class="pt-10 pb-8 sm:text-center text-white">
+		<h1 class="text-4xl sm:text-6xl font-bold font-display leading-tight">
 			{post.data.title}
 		</h1>
 		{
@@ -33,7 +33,7 @@ const { Content, headings } = await render(post);
 		}
 		{
 			post.data?.tags && (
-				<Tags class="mt-4 -ml-4 sm:ml-0">
+				<Tags class="mt-4 -ml-3 sm:ml-0">
 					{post.data.tags.map((tag) => (
 						<TagLink href={`/tags/${tag.toLowerCase()}`} text={tag} />
 					))}