Add banner images to posts

For the webp variants, I decided to use lossless for the NeoPass one,
because anything lossy just looked really obviously crunchy. But for
the State of DTI one, I first ran this shopkeeper image through
waifu2x, then gave it a lossy webp conversion, cuz I thought it
compressed honestly pretty darn well.

```
convert neopass.png -define webp:lossless=true neopass.webp
convert state-of-dti-2024.png -quality 70 state-of-dti-2024.webp
```

_layouts/post.html

@@ -14,6 +14,12 @@ layout: default
 			</p>
 		</header>
 
-		{{ content }}
+		{% if page.banner %}
+		<img
+			src="{{ page.banner.url }}"
+			width="{{ page.banner.width }}"
+			height="{{ page.banner.height}}"
+		/>
+		{% endif %} {{ content }}
 	</article>
 </main>

_posts/2024-03-13-neopass-for-dti.md

@@ -3,6 +3,10 @@ layout: post
 title: "NeoPass for DTI"
 date: 2024-03-13 12:20:00 -0700
 author: Matchu
+banner:
+  url: /assets/images/banners/neopass.webp
+  width: 800
+  height: 232
 excerpt: |
   <p>We've got big news coming up: we're partnering with Neopets to add
   <strong>"Login with NeoPass"</strong> and some other integrations to bring our sites a bit closer

_posts/2024-09-20-state-of-dti-2024.md

@@ -3,6 +3,10 @@ layout: post
 title: "State of DTI: 2024"
 date: 2024-09-20 13:15:00 -0700
 author: Matchu
+banner:
+  url: /assets/images/banners/state-of-dti-2024.webp
+  width: 800
+  height: 267
 excerpt: |
   <p>After 15 years of DTI, and 15 years of changing
   circumstances, <strong>our primary focus is keeping DTI around for the

assets/css/main.css

@@ -90,6 +90,13 @@ article {
 		}
 	}
 
+	> img {
+		display: block;
+		max-width: 100%;
+		height: auto;
+		margin-inline: auto;
+	}
+
 	> :is(p, ul) {
 		font-family: var(--body-font-family);
 		line-height: 1.4;