style changes

website/public/css/base.css

@@ -109,7 +109,7 @@ img {
       [media-end content-start]
       minmax(var(--grid-max-content-width), auto)
       [content-end grid-end];
-		column-gap: var(--spacing-block-sm);
+    column-gap: var(--spacing-block-sm);
     max-width: var(--grid-total-width);
 
     --body-margin-inline-end: 6rem;
@@ -151,11 +151,11 @@ img {
       [media-end content-start]
       minmax(auto, var(--grid-max-content-width))
       [content-end margin-start]
-      minmax(auto, var(--grid-max-content-width))
+      auto
       [margin-end grid-end];
 
     --grid-total-width: 80rem;
-    --grid-max-content-width: 36rem;
+    --grid-max-content-width: 40rem;
   }
 }
 

website/public/css/feed.css

@@ -1,16 +1,35 @@
 /* Assumes there is at most one level of subheading for sub-dividing entries */
 .h-feed :is(h2, h3, h4, h5, h6) {
-	margin-block-start: var(--spacing-block-md);
+  margin-block-start: var(--spacing-block-md);
 }
 
 .h-feed .h-entry {
-	margin-block-start: var(--spacing-block-xs);
+  display: flex;
+  flex-direction: column;
+}
+
+.h-feed .h-entry + .h-entry {
+  margin-block-start: var(--spacing-block-md);
+}
+
+.h-feed .h-entry > * {
+  order: 1;
+  margin: 0;
+}
+
+.h-feed .h-entry .dt-published {
+  order: 0;
+  font-size: var(--font-size-sm);
+}
+
+.h-feed .h-entry .p-name {
+  font-size: var(--font-size-md);
 }
 
 .h-feed .full-feed-link {
-	text-align: end;
+  text-align: end;
 }
 
 .h-feed :is(a.full-feed-link, .full-feed-link a)::after {
-	content: ' >'
+  content: " >";
 }

website/src/components/BlogFeed.astro

@@ -6,10 +6,11 @@ import FormattedDate from './FormattedDate.astro';
 export interface Props {
 	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6,
 	hideAuthor?: boolean,
+	hideSubheadings?: boolean,
 	maxEntries?: number,
 };
 
-const { headingLevel = 2, hideAuthor = false, maxEntries } = Astro.props;
+const { headingLevel = 2, hideSubheadings = false, hideAuthor = false, maxEntries } = Astro.props;
 
 const allPosts = (await getCollection('blog')).filter((post) => !post.data.hidden);
 
@@ -32,41 +33,46 @@ function sortByPubDateDescending(post1: CollectionEntry<'blog'>, post2: Collecti
 	return date2 - date1;
 }
 
-const headingElem = `h${headingLevel}`;
+const HeadingElem = `h${headingLevel} class="p-name"`;
-const subHeadingElem = `h${headingLevel + 1}`
+const SubHeadingElem = `h${headingLevel + 1}`;
+const AuthorElem = `p${hideAuthor ? " hidden" : ""}`;
 
 const canonicalBlogUrl = new URL('blog', Astro.site)
 ---
 
 <section class="h-feed">
-	<Fragment set:html={`
+	<HeadingElem>
-		<${headingElem} class="p-name">
+		My blog
-			My blog
+	</HeadingElem>
-		</${headingElem}>
-	`} />
 
 	<aside>
-		<p hidden={hideAuthor}>
+		<AuthorElem>
 			This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
-		</p>
+		</AuthorElem>
 
 		<p hidden>
 			<a class="u-url" href={canonicalBlogUrl}>Permalink</a>
 		</p>
 	</aside>
 
-	{ distinctYears.map(year => (
+	{ hideSubheadings
-		<Fragment set:html={`
+	  ? <ul>
-			<${subHeadingElem}>
+			{ posts.sort(sortByPubDateDescending).map(post => (
-				${year}
+				<li class="h-entry">
-			</${subHeadingElem}>
+					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>
-		`} />
+					<p class="p-summary" set:html={post.data.description} />
+					<FormattedDate className="dt-published" date={post.data.pubDate} />
+				</li>
+			)) }
+			</ul>
+	  : distinctYears.map(year => (
+		<SubHeadingElem>{year}</SubHeadingElem>
 		<ul>
 			{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
 				<li class="h-entry">
-					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>.
+					<a class="u-url p-name" href={`/blog/${post.id}`}>{post.data.title}</a>
-					<Fragment set:html={post.data.description} />
+					<p class="p-summary" set:html={post.data.description} />
-					Added: <FormattedDate date={post.data.pubDate} />
+					<FormattedDate className="dt-published" date={post.data.pubDate} />
 				</li>
 			)) }
 		</ul>

website/src/components/LinksFeed.astro

@@ -63,9 +63,9 @@ const canonicalLinksUrl = new URL('links', Astro.site)
 		<ul>
 			{ links.filter(matchesYear(year)).sort(sortByDateAddedDescending).map(link => (
 				<li class="h-entry e-content">
-					<a class="u-url p-name" href={link.href} set:html={link.title} />.
+  				<FormattedDate className="dt-published" date={link.isoDateAdded} />
-					<Fragment set:html={link.description} />
+					<a class="u-url p-name" href={link.href} set:html={link.title} />
-					Added: <FormattedDate date={link.isoDateAdded} />
+					<p class="p-description" set:html={link.description} />
 				</li>
 			)) }
 		</ul>

website/src/pages/index.astro

@@ -8,6 +8,6 @@ import Page from '../layouts/Page.astro';
 
 <Page title={SITE_TITLE} description={SITE_DESCRIPTION}>
 	<Me />
-	<BlogFeed hideAuthor maxEntries={3} />
+	<BlogFeed hideAuthor hideSubheadings maxEntries={1} />
-	<LinksFeed hideAuthor maxEntries={5} />
+	<LinksFeed hideAuthor maxEntries={1} />
 </Page>