Post banners!

sass/_article.scss

@@ -0,0 +1,18 @@
+#banner {
+	$mask: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
+	-webkit-mask-image: $mask;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+	mask-image: $mask;
+	transition: none;
+	margin: 0;
+	user-select: none;
+
+	&.bright {
+		$mask: linear-gradient(rgba(0, 0, 0, 0.3), transparent);
+		-webkit-mask-image: $mask;
+		mask-image: $mask;
+	}
+}

sass/_code.scss

@@ -12,7 +12,7 @@ code:not(pre code) {
 	background-color: var(--fg-muted-1);
 	padding: 0.125rem 0.375rem;
 	color: var(--red-fg);
-	font-size: 0.875rem;
+	font-size: 0.875em;
 }
 
 pre {

sass/_typography.scss

@@ -27,7 +27,7 @@ h3 {
 
 small {
 	color: var(--fg-muted-5);
-	font-size: 0.875rem;
+	font-size: 0.875em;
 }
 
 abbr[title] {
@@ -39,7 +39,7 @@ abbr[title] {
 
 figcaption {
 	color: var(--fg-muted-4);
-	font-size: 0.875rem;
+	font-size: 0.875em;
 	text-align: center;
 }
 
@@ -83,7 +83,7 @@ ins {
 samp {
 	background-color: var(--fg-muted-1);
 	color: var(--fg-muted-5);
-	font-size: 0.875rem;
+	font-size: 0.875em;
 }
 
 q {
@@ -121,7 +121,7 @@ kbd {
 	border-radius: var(--rounded-corner-small);
 	background-color: var(--fg-muted-2);
 	padding: 0.125rem 0.375rem;
-	font-size: 0.875rem;
+	font-size: 0.875em;
 	line-height: normal;
 
 	// Small nice thingy, keys can be pressed!

sass/style.scss

@@ -10,6 +10,7 @@
 
 @use "alerts";
 @use "article-list";
+@use "article";
 @use "buttons";
 @use "code";
 @use "comments";

templates/article.html

@@ -4,6 +4,10 @@
 {%- set date_format = macros_translate::translate(key="date_format", default="%B %d, %Y", language_strings=language_strings) -%}
 {%- set date_locale = macros_translate::translate(key="date_locale", default="en_US", language_strings=language_strings) -%}
 <article>
+	{%- if page.extra.banner -%}
+		<img id="banner" class="full-bleed{% if page.extra.banner_bright %} bright{% endif %}" src="{{ current_url | safe }}{{ page.extra.banner }}" />
+	{%- endif -%}
+
 	<h1>{{ page.title }}</h1>
 
 	{%- if page.date -%}