start adding images

_includes/zines.njk

@@ -1,6 +1,7 @@
 <ul id="zine-container">
   {% for zine in zines | sortAlphabeticallyByArtist %}
     <li>
+      <div class="zine-text">
         {% if allyears %}
           <p>In {{ zine | getYear }},</p>
         {% endif %}
@@ -28,6 +29,12 @@
         {% endif %}
 
         <blockquote>{{ zine.content | safe }}</blockquote>
+      </div>
+
+      {% if zine.data.img.src and zine.data.img.alt %}
+        <img src="/img/{{ zine.data.img.src }}" alt="{{ zine.data.img.alt }}">
+      {% endif %}
+
     </li>
   {% endfor %}
 </ul>

css/zines.css

@@ -1,51 +1,72 @@
 #zine-container {
 	padding: 0;
-}
 
-#zine-container > li {
+	> li {
 		list-style: none;
 		border-bottom: solid;
 		border-left: solid;
-  border-radius: 4px;
+		border-radius: .25rem;
 		padding: 0 .4rem .4rem;
 		margin-bottom: 2rem;
-}
 
-#zine-container h2,
+		&:has(img) {
-#zine-container p {
+			display: grid;
+			grid-template-areas: "text img";
+			gap: .75rem;
+			grid-template-columns: 3fr 2fr;
+
+			img {
+				border-radius: .2rem;
+			}
+		}
+	}
+
+	h2,
+	p {
 		border: none;
 		display: inline;
-}
+	}
 
-#zine-container h2 a {
+	h2 a {
 		background-color: var(--color-header);
 		line-height: 135%;
-}
+	}
 
-#zine-container h3 {
+	h3 {
 		background-color: var(--color-warn);
 		color: var(--color-text);
-  border-radius: 3px;
+		border-radius: .2rem;
 		padding: 0 .2rem;
 		text-align: right;
 		line-height: 150%;
 		margin: .25rem 0 .75rem 0;
-}
+	}
 
-#zine-container blockquote {
+	blockquote {
 		margin: 0;
 		color: var(--color-header);
-}
 
-#zine-container blockquote p {
+		p {
 			display: block;
 			margin-block: .75rem;
-}
+		}
 
-#zine-container blockquote p:first-child {
+		p:first-child {
 			margin-top: .5rem;
+		}
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
 }
 
-#zine-container blockquote p:last-child {
+@media (max-width: 650px) {
-	margin-bottom: 0;
+	#zine-container > li:has(img) {
+		display: block;
+
+		img {
+			margin-block-start: .5rem;
+		}
+	}
 }

src/zines/2026/lee.md

@@ -3,6 +3,9 @@ artist: lee
 site: "https://leecat.art"
 format: physical/digital
 titles:
+img:
+  src: 2026-2027/lee.jpg
+  alt: 3 copies of the same zine with 3 different color covers. The cover says 'Leatherworking Tools' 'by Lee' and has many small icons of different tools and processes on it.
 ---
 
-digitally designed zine in color about leatherworking tools and basics. will have a digital printable version as well as a web version with text alternatives and with all tools linked to actual listings in a store.
+digitally designed zine in color about leatherworking tools and basics. will have a home printable version, a digital reading version, and a web version with text alternatives and with all tools linked to actual listings in a store.