feat(blog): new meta post; update width snap

src/components/blog/Header.astro

@@ -106,7 +106,7 @@ import { SITE_AUTHOR_MASTODON, SITE_DESCRIPTION, SITE_PROJECT_REPO, SITE_TITLE }
 		display: flex;
 	}
 
-	@media (max-width: 720px) {
+	@media (max-width: 700px) {
 		nav {
 			display: block;
 			padding: 1em 0;

src/layouts/BlogPost.astro

@@ -113,7 +113,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			.last-updated-on {
 				font-style: italic;
 			}
-			@media (max-width: 720px) {
+			@media (max-width: 700px) {
 				main {
 					width: 100%;
 

src/pages/blog/index.astro

@@ -87,7 +87,7 @@ const posts = (await getCollection('blog')).sort(
 				margin: 0;
 				color: rgb(var(--gray));
 			}
-			@media (max-width: 720px) {
+			@media (max-width: 700px) {
 				ul {
 					gap: 0.5em;
 				}
@@ -108,8 +108,8 @@ const posts = (await getCollection('blog')).sort(
 							<li class="card">
 									{/* {
 									 post.data.heroImage
-									 	?	<img width={720} height={360} src={post.data.heroImage} alt="" />
-									 	:	<img width={720} height={360} src="/blog-placeholder-4.jpg" alt="" />
+									 	?	<img width={700} height={360} src={post.data.heroImage} alt="" />
+									 	:	<img width={700} height={360} src="/blog-placeholder-4.jpg" alt="" />
 									} */}
 									<small class="date">
 										<FormattedDate date={post.data.pubDate} />

src/styles/blog.css

@@ -149,7 +149,7 @@ hr {
 	border-top: 1px solid rgb(var(--gray-light));
 }
 
-@media (max-width: 720px) {
+@media (max-width: 700px) {
 	body {
 		font-size: 18px;
 	}