feat: interstitial article photos

limulus · Nov 17, 2024 · ab2133c · ab2133c
1 parent 6402738
commit ab2133c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 17 deletions.
diff --git 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
@@ -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>