design tweaks and astro 3

src/components/BlogHeader.astro

@@ -5,6 +5,7 @@ import Calendar from './icons/Calendar.astro'
 interface Props {
 	title: String
 	date: String
+	slug: String
 }
 
 const { title, date, slug } = Astro.props
@@ -13,19 +14,26 @@ const { title, date, slug } = Astro.props
 <div class="blog-header">
 	<h2>
 		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
-		<h3>
-			<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
-			<Calendar />
-			<FormattedDate date={date} />
-		</h3>
 	</h2>
-
-	<style>
-		h3 {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-			font-size: 1.1rem;
-		}
-	</style>
+	<h3>
+		<!-- <img class="svg-icon" src={calendarIcon} alt="" /> -->
+		<Calendar />
+		<FormattedDate date={date} />
+	</h3>
 </div>
+
+<style>
+	a {
+		text-decoration: none;
+	}
+	a:hover {
+		text-decoration: none;
+	}
+
+	h3 {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 1.1rem;
+	}
+</style>

src/components/Header.astro

@@ -74,6 +74,7 @@ const navLinks = [
 		display: flex;
 		gap: 0.5rem;
 		align-items: center;
+		text-decoration: none;
 	}
 
 	nav ul li a::before {

src/components/Tags.astro

@@ -25,6 +25,7 @@ const { tags } = Astro.props
 		background: var(--blue);
 		line-height: 2rem;
 		transition: filter 0.15s;
+		text-decoration: none;
 	}
 
 	.tag:hover {

src/styles/global.css

@@ -87,7 +87,8 @@ hr {
 
 a {
 	color: var(--blue);
-	text-decoration: none;
+	text-decoration: underline;
+	text-decoration-style: dotted;
 }
 
 a:hover {
@@ -149,6 +150,7 @@ button,
 	border: none;
 	border-radius: 5px;
 	transition: filter 0.15s;
+	text-decoration: none;
 }
 
 button:hover,