Blog (slash news) article hero

Author: liamjohnston

cdhweb/static_src/global/components/blog-hero.scss

@@ -0,0 +1,149 @@
+/* 
+Blog hero. Similar to standard hero. Key differences:
+- image ratio (TODO – maybe?)
+- image goes inline at `lg`, not `md` (so the break-grid rules differ too)
+- image has a caption (like project hero)
+- text content – more of it
+*/
+
+// has `.grid-standard`
+.blog-hero {
+  --title-top-space: 40px;
+
+  margin-block-end: 56px;
+
+  // t = heading/intro (h1 title ad meta info)
+  // d = description
+  // i = img + credit
+
+  // Layout if there is _no_ image:
+  grid-template-areas:
+    't t t t t t t t t t t t'
+    'd d d d d d d d d d d d';
+
+  @include sm {
+    margin-block-end: 120px;
+  }
+
+  @include md {
+    --title-top-space: 32px;
+    grid-template-areas:
+      't t t t t t t t t t t t'
+      '. d d d d d d d d d d d';
+  }
+  @include lg {
+    --title-top-space: 64px;
+
+    grid-template-areas:
+      '. t t t t t t t t t t .'
+      '. . d d d d d d d d d .';
+  }
+  @include xl {
+    --title-top-space: 104px;
+  }
+  @include xxl {
+    --title-top-space: 160px;
+    grid-template-areas:
+      '. t t t t t t t t t . .'
+      '. . d d d d d d d d . .';
+  }
+
+  // Different layout if the hero has an image:
+  &:has(img) {
+    grid-template-areas:
+      'i i i i i i i i i i i i'
+      't t t t t t t t t t t t'
+      'd d d d d d d d d d d d';
+
+    @include lg {
+      grid-template-areas:
+        '. t t t t t i i i i i i'
+        '. . d d d d i i i i i i';
+    }
+  }
+}
+
+.blog-hero__text {
+  grid-area: t;
+  line-height: 1.125;
+
+  :where(h1) {
+    margin-block-start: var(--title-top-space);
+  }
+
+  :where(ul) {
+    margin-block-start: 16px;
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    @include lg {
+      font-size: px2rem(20);
+    }
+  }
+  :where(li) {
+    margin: 0;
+  }
+  :where(.tag-list) {
+    margin-block-start: 24px;
+
+    @include xl {
+      margin-block-start: 40px;
+    }
+  }
+}
+
+.blog-hero__date {
+  font-weight: bold;
+  margin: 16px 0 0;
+  font-size: px2rem(16);
+
+  @include xl {
+    font-size: px2rem(18);
+  }
+}
+
+.blog-hero__authors {
+  font-size: px2rem(16);
+
+  @include xl {
+    font-size: px2rem(18);
+  }
+  @include xl {
+    font-size: px2rem(20);
+  }
+}
+
+.blog-hero__description {
+  grid-area: d;
+  margin-block-start: 32px;
+  font-size: px2rem(20);
+
+  @include lg {
+    margin-block-start: 40px;
+  }
+  @include xl {
+    margin-block-start: 48px;
+    font-size: px2rem(24);
+  }
+}
+
+.blog-hero__img {
+  grid-area: i;
+
+  :where(img) {
+    @include break-grid;
+
+    @include sm {
+      @include undo-break-grid;
+    }
+    @include lg {
+      @include break-grid-right;
+    }
+    @include xxxl {
+      @include undo-break-grid;
+    }
+  }
+}

cdhweb/static_src/global/components/project-hero.scss

@@ -1,6 +1,6 @@
 /*
 Similar to standard hero, but with a tag/chip thing that can show above the title,
-and some meta info that can appear below the description.
+and some meta info that can appear below the description (like blog hero).
 */
 
 // has `.grid-standard`

cdhweb/static_src/styles.scss

@@ -56,6 +56,7 @@
 @import './global/components/project-hero.scss';
 @import './global/components/person-hero.scss';
 @import './global/components/event-hero.scss';
+@import './global/components/blog-hero.scss';
 @import './global/components/breadcrumbs.scss';
 @import './global/components/jumplinks.scss';
 @import './global/components/sidenav.scss';

templates/includes/blog_hero.html

@@ -9,9 +9,9 @@ <h1>{{ page.title }}</h1>
             {{ page.first_published_at|date:"j F Y" }}
         </p>
 
-        {% if page.authors %}
-            <div>
-                <h2 class="sr-only"></h2>
+        {% if page.authors.all %}
+            <div class="blog-hero__authors">
+                <h2 class="sr-only">Authors</h2>
                 <ul>
                     {% for author in page.authors.all %}
                         <li>{{ author.person }}</li>
@@ -20,22 +20,24 @@ <h2 class="sr-only"></h2>
             </div>
         {% endif %}
 
-        {% if page.tags %}
+        {% if page.tags.all %}
             <div class="tag-list">
                 {% for tag in page.tags.all %}
                     <div class="tag">{{ tag }}</div>    
                 {% endfor %}
             </div>
         {% endif %}
 
-        <div class="blog-hero__description">
-            {% if page.description %}
-                {{ page.description | richtext }}
-            {% endif %}
     </div>
+    
+    {% if page.description %}
+        <div class="blog-hero__description">
+            {{ page.description|richtext }}
+        </div>
+    {% endif %}
 
     {% if page.image %}
-        <figure class="event-hero__img">
+        <figure class="blog-hero__img">
             {% comment %}    
                 All are cropped to a 16:9 ratio. This differs from design, as discussed.
                 If changing this by image rendition, update aspect-ratio in the CSS instead
@@ -55,7 +57,7 @@ <h2 class="sr-only"></h2>
                     style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
                 />
             </picture>
-            
+
             {% if page.caption or page.credit %}
                 <figcaption class="sk-image__text-content">
                     {% if page.credit %}
@@ -71,7 +73,7 @@ <h2 class="sr-only"></h2>
                 </figcaption>
             {% endif %}
         </figure>
-            
+
     {% endif %}
 
 </div>