✨ Mastodon post on homepage

src/components/BlogHeader.astro

@@ -13,9 +13,7 @@ const { title, date, slug } = Astro.props;
 ---
 
 <div class="blog-header">
-	<h2>
-		{slug ? <a href={`/blog/${slug}`}>{title}</a> : title}
-	</h2>
+	{slug ? <a href={`/blog/${slug}`}>{title}</a> : <h1>{title}</h1>}
 	<div>
 		<CalendarIcon class="calendar-icon" width={24} height={24} />
 		<strong>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</strong>
@@ -23,11 +21,15 @@ const { title, date, slug } = Astro.props;
 </div>
 
 <style>
+	a {
+		font-size: 1.3rem;
+	}
+
 	.calendar-icon {
 		transform: translateY(0.3rem);
 	}
 
 	strong {
-		font-weight: bold;
+		font-weight: bolder;
 	}
 </style>

src/components/Header/Header.astro

@@ -5,7 +5,7 @@ import Drawer from './Drawer.astro';
 
 <header>
 	<div class="container">
-		<h1><a href="/">ghall.space</a></h1>
+		<a href="/">ghall.space</a>
 		<Nav />
 		<Drawer />
 	</div>
@@ -21,6 +21,7 @@ import Drawer from './Drawer.astro';
 		top: 0;
 		position: fixed;
 		z-index: 1;
+		border-bottom: var(--border);
 	}
 
 	.container {
@@ -34,8 +35,15 @@ import Drawer from './Drawer.astro';
 		height: 100%;
 	}
 
-	h1 > a {
+	a {
 		font-size: 1.6rem;
 		color: var(--text);
+		font-weight: bold;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		header {
+			background-color: rgba(30, 30, 46, 90%);
+		}
 	}
 </style>

src/components/Header/Nav.astro

@@ -26,6 +26,7 @@ const pathComponents = pathname.split('/').slice(1);
 		list-style: none;
 		gap: 20px;
 		font-size: 1.15rem;
+		font-weight: 600;
 	}
 
 	a:hover {
@@ -33,7 +34,6 @@ const pathComponents = pathname.split('/').slice(1);
 	}
 
 	.selected {
-		font-weight: bold;
 	}
 
 	.underline {

src/components/LatestPost.astro

@@ -13,7 +13,6 @@
         this.latestPost = {
           link: item.querySelector('link').textContent,
           body: item.querySelector('description').textContent,
-          
         };
       })
       .catch((error) => {