Add badges to subprojects #2

content/subprojects/docs/index.md

@@ -6,6 +6,7 @@ description = "No need for a separate documentation page - coming soon!"
 tags = ["Demo", "Test"]
 [extra]
 preview = "pond.jpg"
+badge = "Coming Soon"
 +++
 
 This feature is not yet implemented. Coming soon!

content/subprojects/subproject/index.md

@@ -6,6 +6,7 @@ description = "Showcase parts of your project!"
 tags = ["Demo", "Test"]
 [extra]
 preview = "duckling.jpg"
+badge = "New"
 +++
 
 I'm an example for a subproject!

sass/_article-list.scss

@@ -191,8 +191,11 @@
 				}
 			}
 
-			.badge {
+			.badge:not(.subproject-badge) {
 				background-color: var(--accent-color-alpha);
+			}
+
+			.badge {
 				color: var(--accent-color);
 
 				.icon {

sass/_subproject-list.scss

@@ -21,4 +21,14 @@
 			padding: 1.5rem;
 		}
 	}
+
+	.badge {
+		color: var(--accent-color);
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+		margin: 20px;
+		right: 0;
+		background-color: var(--bg-color)
+	}
 }

templates/partials/subprojects.html

@@ -2,11 +2,18 @@
 	{%- for page in section.pages %}
 		<article>
 			<a href="{{ page.permalink | safe }}"></a>
+			{% if page.extra.badge %}
+					<span class="badge subproject-badge">
+						{{ page.extra.badge }}
+					</span>
+				{%- endif %}
 			{%- if page.extra.preview -%}
 				<img class="preview" src="{{ current_url ~ page.slug ~ "/" ~ page.extra.preview }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
 			{%- endif -%}
 			<div id="subproject-info">
-				<h3>{{ page.title }}</h3>
+				<h3>
+					{{ page.title }}
+				</h3>
 				{%- if page.description %}
 					{{ page.description | markdown | safe }}
 				{%- endif %}