refine typography

src/components/BlogHeader.astro

@@ -24,7 +24,9 @@ const { title, date, slug } = Astro.props;
 <style>
 	h2,
 	h2 a {
-		font-size: 1.4rem;
+		font-size: 1.5rem;
+		font-family: Oswald, sans-serif;
+		margin-bottom: 0.5rem;
 	}
 
 	h3 {

src/components/Header.astro

@@ -72,15 +72,19 @@ const navLinks: NavLink[] = [
 
 	nav ul li a {
 		position: relative;
-		font-size: 1.2rem;
 		display: flex;
 		gap: 0.5rem;
 		align-items: center;
 		text-decoration: none;
 	}
 
+	nav ul li a span {
+		font-size: 1.2rem;
+	}
+
 	nav ul li a::before {
 		content: '•';
+		font-size: 1.6rem;
 		position: absolute;
 		left: -12px;
 		color: var(--blue);

src/layouts/About.astro

@@ -11,7 +11,7 @@ import Layout from '@layouts/Layout.astro';
 <style>
 	.portrait {
 		display: block;
-		max-width: 300px;
+		max-width: 250px;
 		margin: auto;
 		margin-bottom: 26px;
 		border-radius: 200px;

src/pages/index.astro

@@ -16,11 +16,11 @@ const posts = await getCollection('blog');
 					new Date(b.data.pubDate).valueOf() -
 					new Date(a.data.pubDate).valueOf()
 			)
-			.slice(0, 5)
+			.slice(0, 6)
 			.map((post) => <PostPreview post={post} />)
 	}
 	{
-		posts.length < 5 ? null : (
+		posts.length < 6 ? null : (
 			<div class="more-posts">
 				<a href="/archive/all?page=1">All Posts</a>
 			</div>

src/styles/global.css

@@ -4,6 +4,12 @@
 	font-style: normal;
 }
 
+@font-face {
+	font-family: Oswald;
+	src: url(./fonts/Oswald-VariableFont_wght.ttf) format('truetype');
+	font-style: normal;
+}
+
 @font-face {
 	font-family: JetBrainsMono;
 	src: url(./fonts/JetBrainsMono-VariableFont_wght.ttf) format('truetype');
@@ -34,9 +40,8 @@
 }
 
 * {
-	/* font-family: 'CrimsonText', serif; */
-	font-family: 'CrimsonText', serif;
-	font-size: 1.1rem;
+	font-family: 'CrimsonText', sans-serif;
+	font-size: 1rem;
 	color: var(--text);
 	letter-spacing: 0.03rem;
 }
@@ -67,7 +72,8 @@ h1,
 h2,
 h3,
 h4 {
-	font-weight: bold;
+	font-family: Oswald, sans-serif;
+	font-weight: 400;
 }
 
 p {
@@ -261,8 +267,7 @@ dialog {
 }
 
 .post-preview {
-	padding: 0.1rem 0rem 2rem;
-	margin: 0 0 1.5rem 0;
+	padding: 0.1rem 0rem 1rem;
 }
 
 svg {