Add expand feature to subprojects

content/subprojects/blog/index.md

@@ -1,11 +1,10 @@
 +++
-weight = 1
+weight = 2
 title = "Blogs"
 description = "Duckling offers the blogs feature borrowed from Duckquill 🦆"
 [taxonomies]
 tags = ["Demo", "Test"]
 [extra]
 preview = "duckling.jpg"
+url = "/blog"
 +++
-
-Check out the [sample blog](/blog) to see the blogging feature in action!

content/subprojects/subproject/index.md

@@ -1,5 +1,5 @@
 +++
-weight = 2
+weight = 1
 title = "Subprojects"
 description = "Showcase parts of your project!"
 [taxonomies]
@@ -7,8 +7,13 @@ tags = ["Demo", "Test"]
 [extra]
 preview = "duckling.jpg"
 badge = "New"
+expand = true
 +++
 
 I'm an example for a subproject!
 
 The [subprojects page](/subprojects) shows multiple subprojects in a grid.
+
+<br>
+
+{{ image(url="duckling.jpg", alt="This is an image", no_hover=true) }}

sass/_subproject-list.scss

@@ -3,7 +3,6 @@
 	flex-wrap: wrap;
 
 	article {
-		width: calc(50% - 0.5rem);
 		min-width: 300px;
 		flex-grow: 1;
 
@@ -22,6 +21,14 @@
 		}
 	}
 
+	article:not(.expand) {
+		width: calc(50% - 0.5rem);
+	}
+
+	.expand {
+		flex-grow: 2;
+	}
+
 	.badge {
 		color: var(--accent-color);
 		pointer-events: none;

templates/partials/subprojects.html

@@ -1,6 +1,6 @@
 <div id="subproject-list">
 	{%- for page in section.pages %}
-		<article>
+		<article class="{%- if page.extra.expand -%}expand{%- endif -%}">
 			{%- if page.extra.url -%}
 				<a href="{{ page.extra.url }}"></a>
 			{%- else -%}