Create a layout for individual thoughts

src/_includes/thought.njk

@@ -0,0 +1,21 @@
+{% extends "base.njk" %}
+
+{%- block title -%}
+<title>Z. Charles Dziura | Thought</title>
+{%- endblock -%}
+
+{%- block body -%}
+
+{%- import "header.njk" as header -%}
+{{ header.header(page='') }}
+<main>
+	<article class="thought">
+		<div class="content">
+			{{ page.rawInput | safe }}
+		</div>
+		<footer>
+			Posted on {{ page.date | formatDate }}
+		</footer>
+	</article>
+</main>
+{%- endblock -%}

src/index.njk

@@ -14,10 +14,10 @@
 {%- if post.data.type == "thought" -%}
 	<section class="thought">
 		<header>
-			<img class="hash" src="assets/hash.svg" type="image/svg+xml">
+			<img class="hash" src="/assets/hash.svg" type="image/svg+xml">
 			<span>An errant thought...</span>
 			<a href="{{ post.url }}" class="link">
-				<img src="assets/link.svg" type="image/svg+xml">
+				<img src="/assets/link.svg" type="image/svg+xml">
 			</a>
 		</header>
 		<div class="content">

src/styles.css

@@ -107,6 +107,11 @@ main > .thought > .content {
 	padding: var(--size-xl) var(--size-2x);
 }
 
+main > article.thought > .content {
+	border-top: unset;
+	margin-top: unset;
+}
+
 main > .thought > .content > p:first-of-type {
 	margin: 0;
 }

src/thoughts/thoughts.11tydata.js

@@ -3,6 +3,7 @@ import { DateTime } from 'luxon';
 export default {
 	date: 'git Created',
 	type: 'thought',
+	layout: 'thought.njk',
 	permalink: function ({ page }) {
 		const { date, fileSlug, outputFileExtension } = page;
 		const today = DateTime.fromJSDate(date).toUTC();