Add "DRAFTED" watermark to drafted posts

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://codeberg.org/daudix/duckquill/compare/v5.4.0...main)
 
+### Added
+
+- Add "DRAFTED" watermark to drafted posts.
+
 ### Fixed
 
 - Fix navbar mods having broken border radius.

sass/_article.scss

@@ -1,3 +1,29 @@
+#draft-watermark {
+	position: fixed;
+	container-type: size;
+	margin: 0 auto;
+	inset: 50vh 0;
+	width: min(var(--container-width), 90%);
+
+	span {
+		-webkit-user-select: none;
+		display: block;
+		transform: translateY(-50%) rotate(-45deg);
+		margin: 0 auto;
+		border: 1cqw solid var(--fg-muted-1);
+		border-radius: 2cqw;
+		padding: 4cqw;
+		width: fit-content;
+		resize: horizontal;
+		pointer-events: none;
+		color: var(--fg-muted-1);
+		font-size: 20cqw;
+		line-height: 1;
+		user-select: none;
+		text-transform: uppercase;
+	}
+}
+
 #banner-container {
 	--mask: linear-gradient(black, transparent);
 	-webkit-user-select: none;

templates/article.html

@@ -12,6 +12,12 @@
 {%- endif -%}
 
 <article>
+	{%- if page.draft -%}
+		<div id="draft-watermark">
+			<span>{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}</span>
+		</div>
+	{%- endif -%}
+
 	{%- if page.extra.banner -%}
 		<div id="banner-container">
 			<img id="banner" class="full-bleed{% if page.extra.banner_pixels %} pixels{% endif %}" src="{{ current_url ~ page.extra.banner }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />