Add images to creations on index page

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;