Tweak creative projects page

_includes/custom-gallery

@@ -5,30 +5,44 @@ assign gallery_layout = 'half' %} {% elsif gallery.size >= 3 %} {% assign
 gallery_layout = 'third' %} {% else %} {% assign gallery_layout = '' %} {% endif
 %} {% endif %}
 
+<link rel="stylesheet" href="/assets/css/custom-gallery.css" />
 <figure class="{{ gallery_layout }} {{ include.class }}">
   {% for img in gallery %} {% if img.url %}
-  <a
-    href="{{ img.url | relative_url }}"
-    {%
-    if
-    img.title
-    %}title="{{ img.title }}"
-    {%
-    endif
-    %}
-  >
+  <div>
+    <a
+      href="{{ img.url | relative_url }}"
+      {% if img.title %}
+        title="{{ img.title }}"
+      {% endif %}
+
+      {% if img.open-in-new-tab %}
+        target="_blank"
+      {% endif %}
+    >
+      <img
+        src="{{ img.image_path | relative_url }}"
+        alt="{% if img.alt %}{{ img.alt }}{% endif %}"
+        {% if img.open-in-new-tab %}
+          target="_blank"
+        {% endif %}
+      />
+    </a>
+    <div class="caption">
+      {{ img.caption }}
+    </div>
+    <div class="description">
+      {{ img.description }}
+    </div>
+  </div>
+
+  {% else %}
+
+  <div>
     <img
       src="{{ img.image_path | relative_url }}"
       alt="{% if img.alt %}{{ img.alt }}{% endif %}"
     />
-  </a>
-
-  {% else %}
-
-  <img
-    src="{{ img.image_path | relative_url }}"
-    alt="{% if img.alt %}{{ img.alt }}{% endif %}"
-  />
+  </div>
 
   {% endif %} {% endfor %} {% if include.caption %}
   <figcaption>

_pages/creative-projects.html

@@ -6,18 +6,22 @@
   - url: https://www.instagram.com/ebethme
     image_path: /assets/blog-post-assets/creative-gallery-thumbnails/insta-photo-latest.jpg
     alt: "photo of a computer screen with radio signals"
+    open-in-new-tab: true
     title: "Photos from Instagram, ongoing"
     caption: "Photos from Instagram, ongoing"
   - url: https://www.instagram.com/ebethme_daily
     image_path: /assets/blog-post-assets/creative-gallery-thumbnails/50-days-of-yoga-cropped.jpg
     alt: "long exposure photo of lights during yoga"
+    open-in-new-tab: true
     title: "50 Days of Yoga @ebethme_daily, early 2023"
     caption: "50 Days of Yoga @ebethme_daily, early 2023"
+    description: "In early 2023 I captured my daily yoga practice via creative computing and long exposure photography."
   - url: /photo-a-day.html
     image_path: /assets/blog-post-assets/creative-gallery-thumbnails/photo-a-day-2-12.jpg
     alt: "photo of ice on the Chicago River"
     title: "Photo-a-day project, 2018"
     caption: "Photo-a-day project, 2018"
+    description: "I took a photo nearly every day in 2018, capturing moments from my daily life."
 ---
 
 <link rel="stylesheet" href="/assets/css/style.css" />

_pages/photo-a-day.html

@@ -5,7 +5,7 @@
   - url: /photos/photo-a-day-title.png
     image_path: /photos/photo-a-day-title.png
     alt: "photo a day - 2018"
-    title: ""
+    title: "2018 Photo-a-day"
   - url: /photos/1-1.jpeg
     image_path: /photos/1-1.jpeg
     alt: "January 1, 2018"
@@ -1453,7 +1453,10 @@
     title: ""
 ---
 
+<link rel="stylesheet" href="/assets/css/style.css" />
+<script src="https://use.fontawesome.com/5ab198183d.js"></script>
+
 <div class="header-container">
-  <h1 class="title">2018 photo-a-day</h1>
+  <h1 class="title">2018 Photo-a-day</h1>
 </div>
 {% include gallery %}

assets/css/custom-gallery.css

@@ -0,0 +1,21 @@
+@media (min-width: 37.5em) {
+  figure.third > a,
+  figure.third > img,
+  figure.third > div {
+      width: calc(33.3333% - 0.5em);
+  }
+}
+
+div.caption {
+  padding-right: 0.25em;
+  padding-left: 0.25em;
+  font-size: 0.75em;
+  font-style: italic;
+}
+
+div.description {
+  padding-top: 0.25em;
+  padding-right: 0.25em;
+  padding-left: 0.25em;
+  font-size: 0.65em;
+}