art page structure

_includes/series.njk

@@ -0,0 +1,9 @@
+<h2>{{ series.data.title }}</h2>
+
+<div class="imgset">
+  {% for img in series.data.imgs %}
+    <img src="/img/{{ img.src }}" alt="{{ img.alt }}">
+  {% endfor %}
+</div>
+
+{{ series.content | safe }}

css/art.css

@@ -0,0 +1,16 @@
+h2 {
+	text-align: center;
+}
+
+.imgset {
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
+	max-width: 100%;
+	flex-flow: row wrap;
+
+	img {
+		max-height: 33vh;
+		width: auto;
+	}
+}

css/main.css

@@ -61,7 +61,7 @@ body {
 #content {
 	width: 65%;
 	max-width: 1800px;
-	margin: 1rem auto;
+	margin: 1rem auto 4rem;
 }
 
 @media (max-width: 1100px) {
@@ -73,6 +73,7 @@ body {
 @media (max-width: 650px) {
 	#content {
 		width: 92%;
+		margin-block-end: 2rem;
 	}
 }
 

src/art/art.11tydata.js

@@ -0,0 +1,6 @@
+export default {
+	permalink: false,
+	tags: [
+		"art"
+	],
+}

src/art/understory-tarot.md

@@ -0,0 +1,14 @@
+---
+title: understory tarot
+imgs:
+  - src: tarot0.jpeg
+    alt: tarot
+  - src: tarot1.jpeg
+    alt: tarot
+  - src: tarot2.jpeg
+    alt: tarot
+---
+
+This is a test paragraph.
+
+This is a second paragraph.

src/pages/art.njk

@@ -4,3 +4,8 @@ eleventyNavigation:
   key: art
   order: 2
 ---
+{% css %}{% include "css/art.css" %}{% endcss %}
+
+{% for series in collections["art"] %}
+  {% include "series.njk" %}
+{% endfor %}