From 566a6c2174502d93d094af600c63c8143af5341c Mon Sep 17 00:00:00 2001
From: ayoayco <ayo@ayco.io>
Date: Wed, 14 Aug 2024 20:14:14 +0200
Subject: [PATCH] style(blog): fix layout to show full nav on mobile

---
 src/components/blog/Header.astro | 52 ++++++++++++++++++++++++--------
 src/layouts/BlogPost.astro       |  5 +++
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/blog/Header.astro b/src/components/blog/Header.astro
index 19f9ff0..8777c25 100644
--- a/src/components/blog/Header.astro
+++ b/src/components/blog/Header.astro
@@ -4,8 +4,9 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
 
 <header>
 	<nav>
-		<div>
-			<h2><a href="/blog">{SITE_TITLE} • {SITE_DESCRIPTION}</a></h2>
+		<div class="site-title">
+			<h2><a href="/blog">{SITE_TITLE}</a></h2>
+			<small class="site-description">{SITE_DESCRIPTION}</small>
 		</div>
 		<div class="social-links">
 			<a href="/" target="_blank">
@@ -41,7 +42,7 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
 	}
 	h2 {
 		margin: 0;
-		font-size: 1em;
+		font-size: x-large;
 	}
 
 	h2 a,
@@ -52,6 +53,7 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		padding: 1em 0.5em;
 
 		& span.primary-btn {
 			background-color: rgba(var(--black), 95%);
@@ -72,15 +74,22 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
 		}
 	}
 
-	nav a {
-		padding: 1em 0.5em;
+	nav .site-title {
+		display: flex;
+	}
+
+	nav a,
+	nav .site-description {
 		color: var(--black);
 		border-bottom: 4px solid transparent;
 		text-decoration: none;
+	}
 
-		&:hover {
-			color: var(--accent);
-		}
+	nav a {
+		padding: 0 0.5em;
+	}
+	nav a:hover {
+		color: var(--accent);
 	}
 
 	nav a.active {
@@ -90,13 +99,32 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
 	.social-links,
 	.social-links a {
 		display: flex;
-
-
 	}
 
 	@media (max-width: 720px) {
-		.social-links {
-			display: none;
+		nav {
+			display: block;
+			padding: 1em 0;
+
+			& .site-description {
+				font-size: 1rem;
+			}
+
+			& span.primary-btn { 
+				line-height: 1.5rem;
+				height: 1.5rem;
+			}
+
+			& .social-links a {
+				font-size: small;
+
+				svg {
+					height: 1.5rem;
+				}
+			}
+		}
+		nav a {
+			padding: 0.5em;
 		}
 	}
 </style>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index e080ca3..5555d42 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -54,6 +54,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			@media (max-width: 720px) {
 				main {
 					width: 100%;
+
+					.prose {
+						max-width: calc(100% - 1em);
+						padding: 0;
+					}
 				}
 			}
 		</style>