From f690ec110556c89f9ab13ee41e2834cc464e1e84 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sat, 13 Jul 2024 22:48:55 +0300
Subject: [PATCH] Post banners!

---
 sass/_article.scss     | 18 ++++++++++++++++++
 sass/_code.scss        |  2 +-
 sass/_typography.scss  |  8 ++++----
 sass/style.scss        |  1 +
 templates/article.html |  4 ++++
 5 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 sass/_article.scss

diff --git a/sass/_article.scss b/sass/_article.scss
new file mode 100644
index 0000000..4aa2a24
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/sass/_code.scss b/sass/_code.scss
index e2b94f9..ea83e11 100644
--- a/sass/_code.scss
+++ b/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 {
diff --git a/sass/_typography.scss b/sass/_typography.scss
index 64425c9..86012a4 100644
--- a/sass/_typography.scss
+++ b/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!
diff --git a/sass/style.scss b/sass/style.scss
index 519ccc9..a9bdbb2 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -10,6 +10,7 @@
 
 @use "alerts";
 @use "article-list";
+@use "article";
 @use "buttons";
 @use "code";
 @use "comments";
diff --git a/templates/article.html b/templates/article.html
index 71b800b..993970b 100644
--- a/templates/article.html
+++ b/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 -%}