Much fancier banners

content/blog/the-quill-of-duck/index.md

@@ -7,6 +7,7 @@ updated = "2024-06-21"
 [taxonomies]
 tags = ["Demo", "Test"]
 [extra]
+banner = "quill.png#pixels"
 toc = true
 disclaimer = """
 See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. This page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
@@ -18,8 +19,6 @@ user = "sungsphinx"
 id = "111789185826519979"
 +++
 
-![Quill](quill.png)
-
 ## The what?
 
 This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo.

sass/_article.scss

@@ -1,4 +1,4 @@
-#banner {
+#banner-container {
 	$mask: linear-gradient(black, transparent);
 	-webkit-mask-image: $mask;
 	-webkit-user-select: none;
@@ -7,9 +7,17 @@
 	left: 0;
 	z-index: -1;
 	mask-image: $mask;
-	transition: none;
+	width: 100vw;
-	margin: 0;
+	height: 50vw;
 	user-select: none;
+
+	#banner {
+		position: fixed;
+		top: 0;
+		left: 0;
+		transition: none;
+		margin: 0;
+	}
 }
 
 .banner-margin {

templates/article.html

@@ -5,7 +5,9 @@
 {%- 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" src="{{ current_url | safe }}{{ page.extra.banner }}" />
+		<div id="banner-container">
+			<img id="banner" class="full-bleed" src="{{ current_url | safe }}{{ page.extra.banner }}" />
+		</div>
 	{%- endif -%}
 
 	<h1 {% if page.extra.banner %}class="banner-margin"{%- endif -%}>{{ page.title }}</h1>