I think I have the styling down to how I want it?

.eleventy.js

@@ -11,11 +11,12 @@ export default async function (config) {
 	config.setTemplateFormats(['md', 'liquid', 'html']);
 	config.addPassthroughCopy('src/styles.css');
 	config.addPassthroughCopy('src/styles/**/*.css');
+	config.addPassthroughCopy('src/assets/**/*');
 
 	config.setServerOptions({
 		watch: ['src/styles/**/*.css'],
 	});
 
 	config.addFilter('dump', dumpFilter);
-	config.addFilter('formatDate', dateObj => DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED));
+	config.addFilter('formatDate', dateObj => DateTime.fromJSDate(dateObj).toUTC().toLocaleString(DateTime.DATE_MED));
 }

src/assets/hash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="m240-160 40-160H120l20-80h160l40-160H180l20-80h160l40-160h80l-40 160h160l40-160h80l-40 160h160l-20 80H660l-40 160h160l-20 80H600l-40 160h-80l40-160H360l-40 160h-80Zm140-240h160l40-160H420l-40 160Z"/></svg>

src/index.liquid

@@ -16,12 +16,18 @@
 
 	<main>
 	{%- for post in collections.all -%}
-	{%- if post.data.type == "post" -%}
-		<section class="post">
+	{%- if post.data.type == "thought" -%}
+		<section class="thought">
 			<header>
-				<span>Posted on {{ post.date | formatDate }}</span>
+				<object data="assets/hash.svg" type="image/svg+xml"></object>
+				An errant thought...
 			</header>
-			{{ post.content }}
+			<div class="content">
+				{{ post.content }}
+			</div>
+			<footer>
+				Posted on {{ post.date | formatDate }}
+			</footer>
 		</section>
 	{%- endif -%}
 	{%- endfor -%}

src/styles.css

@@ -26,29 +26,55 @@ body > header {
 }
 
 body > header > .header__title {
+	background-color: var(--color-bg);
+	color: var(--color-on-bg);
 	padding: var(--size-md) var(--size-xl);
 }
 
-body > header > .header__title {
-	background-color: var(--color-bg);
-	color: var(--color-on-bg);
-}
-
 body > header > .header__title > h1 {
+	font-size: var(--font-title);
 	font-weight: 300;
 	margin: 0;
 }
 
 main {
+	align-items: center;
 	display: flex;
 	flex-direction: column;
+	font-size: var(--font-body);
 	grid-area: content;
 }
 
-main > .post {
-	width: 66%;
+main > .thought {
+	border: 2px solid var(--color-black);
+	width: 75%;
 }
 
-main > .post > p {
+main > .thought > header {
+	align-items: center;
+	display: flex;
+	font-size: var(--font-post-header);
+	padding: var(--size-md) var(--size-md) 0 var(--size-md);
+}
+
+main > .thought > header > object {
+	height: 20px;
+	margin-right: var(--size-sm);
+	width: 20px;
+}
+
+main > .thought > .content {
+	border-top: 2px solid var(--color-black);
+	margin-top: var(--size-md);
+	padding: var(--size-xl) var(--size-2x);
+}
+
+main > .thought > .content > p:first-of-type {
 	margin: 0;
 }
+
+main > .thought > footer {
+	background-color: var(--color-bg);
+	color: var(--color-on-bg);
+	padding: var(--size-md);
+}

src/styles/variables.css

@@ -10,6 +10,11 @@
 	--size-md: 16px;
 	--size-lg: 20px;
 	--size-xl: 24px;
+	--size-2x: calc(var(--size-md) * 2);
+
+	--font-title: 2.4em;
+	--font-body: 1.6em;
+	--font-post-header: 0.8em;
 
 	--gap-sm: 16px;
 	--gap-md: 32px;

src/thoughts/thoughts.11tydata.js

@@ -2,13 +2,13 @@ import { DateTime } from 'luxon';
 
 export default {
 	date: 'git Created',
-	type: 'post',
+	type: 'thought',
 	permalink: function ({ page }) {
 		// console.log(arguments);
 		const { date, fileSlug, outputFileExtension } = page;
 		const today = DateTime.fromJSDate(date).toUTC();
 
-		return `/posts/${today.year}/${String(today.month).padStart(2, '0')}/${String(today.day).padStart(
+		return `/thought/${today.year}/${String(today.month).padStart(2, '0')}/${String(today.day).padStart(
 			2,
 			'0'
 		)}/${fileSlug}.${outputFileExtension}`;