giving fable a shot

src/templates/partials/feature_project.html

@@ -1,30 +1,32 @@
-{% macro feature_project(id, title, tagline, body, stack, image=none) %}
-<div class="feature-project boxed{{ ' has-media' if image else '' }}" id="feature-{{ id }}">
-  <div class="feature-project-content">
-    <div class="feature-project-header" onclick="toggleFeatureProject(this)" onKeyDown="if(event.key==='Enter'||event.key===' ')toggleFeatureProject(this)" role="button" tabindex="0" aria-expanded="false" aria-controls="feature-{{ id }}-body">
-      {% if image %}
-      <div class="feature-project-media" style="background-image: url('{{ url_for('static', filename=image) }}')"></div>
-      {% endif %}
-      <div class="feature-project-heading">
-        <h3>{{ title }}</h3>
-        <p class="feature-project-tagline">{{ tagline }}</p>
-      </div>
-      <span class="feature-project-toggle" aria-hidden="true">+</span>
-    </div>
-    <div class="feature-project-body" id="feature-{{ id }}-body">
-      <div class="feature-project-body-inner">
-        <div class="feature-project-prose">
-          {{ body | safe }}
-        </div>
-        {% if stack %}
-        <div class="feature-project-stack">
-          {% for item in stack %}
-          <span class="feature-project-stack-item">{{ item }}</span>
-          {% endfor %}
-        </div>
-        {% endif %}
-      </div>
-    </div>
+{% macro feature_project(id, title, tagline, body, stack, image=none, caption='') %}
+<article class="feature{{ ' has-figure' if image else '' }}" id="feature-{{ id }}">
+  <div class="feature-head">
+    <h3>{{ title }}</h3>
+    <p class="feature-tagline">{{ tagline }}</p>
   </div>
-</div>
+  {% if image %}
+  <figure class="feature-figure feature-clip">
+    <img src="{{ url_for('static', filename=image) }}" alt="{{ caption or title }}" loading="lazy" width="1108" height="1017" />
+    {% if caption %}<figcaption>{{ caption }}</figcaption>{% endif %}
+  </figure>
+  {% endif %}
+  <div class="feature-body feature-clip" id="feature-{{ id }}-body">
+    <div class="prose">
+      {{ body | safe }}
+    </div>
+    {% if stack %}
+    <p class="feature-stack"><span class="label">Built with</span> {{ stack | join(', ') }}</p>
+    {% endif %}
+  </div>
+  <button
+    class="feature-expand"
+    type="button"
+    aria-expanded="false"
+    aria-controls="feature-{{ id }}-body"
+    onclick="toggleFeature(this)"
+  >
+    <span class="visually-hidden when-closed">Read more about {{ title }}</span>
+    <span class="visually-hidden when-open">Collapse {{ title }}</span>
+  </button>
+</article>
 {% endmacro %}

src/templates/partials/project.html

@@ -1,39 +1,27 @@
 {% macro project(title, classes, status, bgi, content, links) %}
-<div class="project {{ classes }}" data-aos="fade-up">
-  <div class="projImageWrap">
+{% set tags = classes.split() | reject('equalto', 'pinned') | list %}
+<li class="project" id="project-{{ title | slug }}">
+  <div class="project-thumb">
     {% if bgi|length > 0 %}
-      {% set path = url_for('static', filename='photos/projects/' + bgi) %}
-      <img src="{{ path }}" alt="Ref image for {{ title }} project" />
+      <img src="{{ url_for('static', filename='photos/projects/' + bgi) }}" alt="" loading="lazy" />
     {% else %}
-      <div class="projImagePlaceholder"></div>
+      <div class="project-thumb-empty" aria-hidden="true"></div>
     {% endif %}
   </div>
-  <div class="projContent">
-    <div class="projTitleRow">
-      <h3>{{ title }}</h3>
-      <span class="proj-status {{ status }}">{{ status }}</span>
-    </div>
-    {% if classes %}
-    <div class="projTags">
-      {% for cls in classes.split() %}
-        {% if cls != 'pinned' %}<span class="proj-tag">{{ cls }}</span>{% endif %}
-      {% endfor %}
-    </div>
-    {% endif %}
-    <p class="projDesc">{{ content }}</p>
+  <div class="project-body">
+    <h3>{{ title }}</h3>
+    <p class="project-meta">
+      <span class="status status-{{ status }}">{{ status }}</span>
+      {% if tags %}<span class="sep" aria-hidden="true">·</span> {{ tags | join(', ') }}{% endif %}
+    </p>
+    <p class="project-desc">{{ content }}</p>
     {% if links %}
-    <div class="projLinks">
-      {% for i in links %}
-        {% set src = 'icons/' + i[0] + '.svg' %}
-        {% if i[1].startswith('https://') or i[1].startswith('http://') %}
-        <a href="{{ i[1] }}" rel="noopener noreferrer" class="proj-link">
-          <img class="projectLink" src="{{ url_for('static', filename=src) }}" alt="{{ i[0] }}" />
-          <span>{{ i[2] }}</span>
-        </a>
-        {% endif %}
+    <p class="project-links">
+      {% for i in links if i[1].startswith('https://') or i[1].startswith('http://') %}
+        <a href="{{ i[1] }}" rel="noopener noreferrer">{{ i[2] }}</a>
       {% endfor %}
-    </div>
+    </p>
     {% endif %}
   </div>
-</div>
+</li>
 {% endmacro %}