💡 Comments + new blog post

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "ghall.blog",
+	"name": "ghall.space",
 	"type": "module",
-  "version": "0.1.0",
+	"version": "2.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

src/components/Header/Drawer.astro

@@ -7,8 +7,8 @@ import { navLinks } from '../../data/nav-links';
 
 <!-- drawerOpened is defined in /src/layouts/Layout.astro -->
 <div class="drawer-container" @keydown.escape="drawerOpen = false">
-	<button @click="drawerOpen = !drawerOpen">
-		<BarsIcon class="bars-icon" width={24} height={24} />
+	<button class="icon-button" @click="drawerOpen = !drawerOpen">
+		<BarsIcon width={24} height={24} />
 	</button>
 	<div
 		class="overlay"
@@ -29,8 +29,8 @@ import { navLinks } from '../../data/nav-links';
 		x-transition:leave-end="hidden-drawer"
 	>
 		<div>
-			<button @click="drawerOpen = !drawerOpen">
-				<CloseIcon class="bars-icon" width={24} height={24} /></button
+			<button class="icon-button" @click="drawerOpen = !drawerOpen">
+				<CloseIcon width={24} height={24} /></button
 			>
 		</div>
 		<nav>
@@ -44,22 +44,6 @@ import { navLinks } from '../../data/nav-links';
 		--transition: all 0.3s ease-in-out;
 	}
 
-	button {
-		background: none;
-		padding: 2px 2px -2px;
-		border: none;
-		line-height: 1;
-		aspect-ratio: square;
-	}
-
-	button:active {
-		opacity: 0.3;
-	}
-
-	button > svg {
-		color: var(--text);
-	}
-
 	.drawer-container {
 		display: none;
 	}

src/components/LatestPost.astro

@@ -9,7 +9,6 @@
       )
       .then((data) => {
         const item = data.querySelector('item');
-				console.log(item)
         this.latestPost = {
           link: item.querySelector('link').textContent,
           body: item.querySelector('description').textContent,

src/content/blog/2025/the-new-ghall-dot-space.md

@@ -0,0 +1,14 @@
+---
+title: 'The New ghall.space'
+pubDate: '9/1/25'
+tags: ['Meta', 'Programming', 'Webdev']
+---
+It's been a while since I originally built this website, which started life as a little project to learn the, at the time, brand new web framework Astro. My skills in web development have improved greatly in that time, as has the functionality of the Astro framework. Therefore, I thought it would be a fun project to make some improvements to the site, both visually and in how the codebase is structured.
+
+One of the biggest front-facing changes I've made, aside from new typography and some layout adjustments, is a mobile-responsive navigation bar. Mobile is always something I've been conscious of when building this site, but I opted for a simplified approach by ensuring the site was usable on mobile without introducing many responsive elements. But as the site morphed from a simple blog to a more generalized space on the internet (hence the ".space" TLD), I've discovered the limits of that design philosophy.
+
+Behind the scenes, there have been a few changes as well. I originally built this site with Astro version 1.6.13, and I have periodically upgraded it over time. Today, it's using Astro 5.13.3, and while it's a credit to the Astro framework that the codebase for this site has seen very few upgrade-related changes over the various versions, some annoying tech debt has been building up – especially around [content collections](https://docs.astro.build/en/guides/content-collections/), which the blog section of this site relies on, and has been coasting along on legacy support for a previous implementation.
+
+Finally, I didn't fully appreciate Astro's support for scoped styles when I originally built this site. I pretty much dumped everything in a _global.css_ file, which would have been fine, but over time I started using scoped styles and it became a bit confusing where the styles for various elements were. So, as part of this revamp, I finally moved CSS that should be scoped into its respective page or component files.
+
+This is far from the final version of this revamp, but I think the design and structural changes will make it much easier to improve and build upon what's here. Addressing the tech debt will also allow me to make use of some newer features, especially around content collections, and hopefully make future upgrades to the Astro framework and its associated dependencies more painless.

src/global.css

@@ -67,6 +67,8 @@ main p {
 	line-height: 1.5;
 }
 
+/* Article image style */
+
 article img {
 	border-radius: var(--radius);
 	display: block;
@@ -75,6 +77,8 @@ article img {
 	height: auto;
 }
 
+/* Typography */
+
 .footnotes {
 	font-size: 1rem;
 }
@@ -110,3 +114,21 @@ kbd {
 	font-size: 0.85rem;
 	white-space: nowrap;
 }
+
+/* Icon button */
+
+.icon-button {
+	background: none;
+	padding: 2px 2px -2px;
+	border: none;
+	line-height: 1;
+	aspect-ratio: square;
+}
+
+.icon-button:active {
+	opacity: 0.3;
+}
+
+.icon-button > svg {
+	color: var(--text);
+}

src/layouts/Layout.astro

@@ -44,6 +44,7 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || 'Unknown';
 </html>
 
 <style>
+	/* Prevent scrolling when drawer (located in Header) is open */
 	.lock-scroll {
 		overflow: hidden;
 	}

src/pages/blog/page/[page].astro

@@ -24,9 +24,8 @@ const { page } = Astro.props;
 ---
 
 <Layout title="Blog Archive">
-	<ul>
 	{page.data.map((post) => <PostPreview post={post} />)}
-	</ul>
+
 	<div class="pagination">
 		{
 			page.currentPage !== 1 ? (

src/pages/blog/tag/[tag].astro

@@ -53,7 +53,6 @@ posts.sort(
 		{
 			posts.map((post) => (
 				<li>
-					{console.log(post)}
 					<a href={`/posts/${post.id}`}>{post.data.title}</a> -
 					<span>
 						{format(

src/pages/now.md

@@ -2,8 +2,9 @@
 layout: ../layouts/Layout.astro
 title: Now
 ---
+# Now
 
-Hey there, this is my [/now page](https://nownownow.com/about)!
+What's a [Now page](https://nownownow.com/about)?
 
 _Last updated: August 29, 2025_
 

src/pages/projects.md

@@ -3,6 +3,8 @@ layout: ../layouts/Layout.astro
 title: Projects
 ---
 
+# Projects
+
 ## Mac Apps
 
 ### [AutoDock](https://github.com/ghall89/AutoDock)