From ab2133c5ae5814141bbd69788a9c928f255dc789 Mon Sep 17 00:00:00 2001
From: Eric McCarthy <eric@limulus.net>
Date: Sun, 17 Nov 2024 03:29:37 +0000
Subject: [PATCH] feat: interstitial article photos

---
 www/_includes/components/article-photo.webc | 55 ++++++++++++++++++---
 www/_includes/layouts/article.webc          | 12 +----
 2 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/www/_includes/components/article-photo.webc b/www/_includes/components/article-photo.webc
index fd9c036..5f80d54 100644
--- a/www/_includes/components/article-photo.webc
+++ b/www/_includes/components/article-photo.webc
@@ -1,6 +1,49 @@
-<figure>
-  <pho-picture :@id="id" @renditions="lg, md" @attributes></pho-picture>
-  <figcaption>
-    <span @text="$data.photos[id].title"></span>
-  </figcaption>
-</figure>
+<template webc:root>
+  <figure>
+    <pho-picture :@id="id" @renditions="lg, md" @attributes></pho-picture>
+    <figcaption>
+      <span @text="$data.photos[id].title"></span>
+    </figcaption>
+  </figure>
+</template>
+
+<style webc:scoped>
+  :host img {
+    display: block;
+    margin-left: calc(var(--body-padding) * -1);
+    max-width: 100vw;
+    width: calc(100% + var(--body-padding) * 2);
+    height: auto;
+  }
+
+  @media (min-width: 600px) {
+    :host[placement='right'] img,
+    :host[placement='right'] figcaption {
+      display: block;
+      float: right;
+      clear: both;
+      width: calc(50% + var(--body-padding) / 2);
+      margin-left: 1.5rem;
+      margin-right: calc(var(--body-padding) / -2);
+    }
+
+    :host[placement='left'] img,
+    :host[placement='left'] figcaption {
+      display: block;
+      float: left;
+      clear: both;
+      width: calc(50% + var(--body-padding) / 2);
+      margin-left: calc(var(--body-padding) / -2);
+      margin-right: 1.5rem;
+    }
+  }
+
+  :host figcaption {
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+    text-align: right;
+    --var-font-wght: 400;
+    --var-font-slnt: -10;
+    font-synthesis: none;
+  }
+</style>
diff --git a/www/_includes/layouts/article.webc b/www/_includes/layouts/article.webc
index d15ddb2..a32ffe2 100644
--- a/www/_includes/layouts/article.webc
+++ b/www/_includes/layouts/article.webc
@@ -7,7 +7,7 @@ layout: page
     <article-photo
       webc:if="hero && hero.type === 'pho'"
       :@id="hero.id"
-      class="hero"
+      placement="hero"
     ></article-photo>
 
     <article-vod
@@ -45,7 +45,6 @@ layout: page
     font-synthesis: none;
   }
 
-  :host header img.hero,
   :host header video-on-demand.hero {
     display: block;
     margin-left: calc(var(--body-padding) * -1);
@@ -63,13 +62,4 @@ layout: page
   :host header figure {
     margin: 1rem 0;
   }
-
-  :host header figcaption {
-    margin: 0.5rem 0;
-    font-size: 0.9rem;
-    text-align: right;
-    --var-font-wght: 400;
-    --var-font-slnt: -10;
-    font-synthesis: none;
-  }
 </style>