Add images to creations on index page

content/.obsidian/workspace.json

@@ -55,12 +55,12 @@
             "state": {
               "type": "markdown",
               "state": {
-                "file": "Protovac Retro Terminal.md",
+                "file": "Garage Door Opener.md",
                 "mode": "source",
                 "source": false
               },
               "icon": "lucide-file",
-              "title": "Protovac Retro Terminal"
+              "title": "Garage Door Opener"
             }
           },
           {
@@ -165,7 +165,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "Protovac Retro Terminal.md",
+                "file": "Garage Door Opener.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -175,7 +175,7 @@
                 "unlinkedCollapsed": true
               },
               "icon": "links-coming-in",
-              "title": "Backlinks for Protovac Retro Terminal"
+              "title": "Backlinks for Garage Door Opener"
             }
           },
           {
@@ -184,13 +184,13 @@
             "state": {
               "type": "outline",
               "state": {
-                "file": "Protovac Retro Terminal.md",
+                "file": "Garage Door Opener.md",
                 "followCursor": false,
                 "showSearch": false,
                 "searchQuery": ""
               },
               "icon": "lucide-list",
-              "title": "Outline of Protovac Retro Terminal"
+              "title": "Outline of Garage Door Opener"
             }
           }
         ],
@@ -213,9 +213,9 @@
   },
   "active": "24a62ccdfd18a884",
   "lastOpenFiles": [
+    "Protovac Retro Terminal.md",
     "Spaceport.md",
     "QotNews.md",
-    "Protovac Retro Terminal.md",
     "Fake Dog.md",
     "Bypassing Ports.md",
     "Backup Strategy.md",

themes/theme/templates/index.html

@@ -49,10 +49,17 @@
 
 				<p>Sometimes I create art or interactive tech.</p>
 
+				<div class="creations">
 				{% for article in articles_page.object_list if article.category.name == 'Creations' %}
-				<h3><a href="{{ article.url }}">{{ article.title }}</a></h3>
+					<div class="creation">
+						<a href="{{ article.url }}">
+							<img src="media/{{ article.image }}" alt="{{ article.summary }}" />
+							{{ article.title }}
+						</a>
+					</div>
 
 				{% endfor %}
+				</div>
 
 				<h2>Writing</h2>
 

themes/theme/templates/style.css

@@ -35,6 +35,33 @@
 				font: 1.1rem/1.5 serif;
 			}
 
+			.index .creations {
+				display: flex;
+				flex-wrap: wrap;
+			}
+
+			.index .creations .creation a {
+				border-bottom: none;
+			}
+
+			.creation > a {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				margin: 1rem;
+				margin-bottom: 1.5rem;
+				font: 1.1rem/1.5 serif;
+
+				width: 14rem;
+				text-align: center;
+			}
+
+			.creation img {
+				max-width: 14rem;
+				max-height: 14rem;
+			}
+
 			.source {
 				font: 0.9rem/1.5 serif;
 			}
@@ -108,7 +135,7 @@
 				font: 1.1rem/1.5 serif;
 			}
 
-			.content img:not(.floated) {
+			.content img:not(.floated, .creation img) {
 				width: 100%;
 				max-width: 36rem;
 				height: auto;