Haozheng Wan

Haozheng Wan

PHD student at HKU, B.Eng. at HIT

Gallery Featured Cards Implementation Plan

Gallery Featured Cards Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Add a photo-led featured album area to /Gallery/ while preserving the existing intro, updated date line, and complete year archive below it.

Architecture: Keep the existing archive layout and _talks collection. Add header.teaser metadata to existing published album entries, update _pages/Gallery.html to render featured cards above the original year archive, and move persistent styles into _sass/_archive.scss under Gallery-specific classes.

Tech Stack: Jekyll, Liquid, HTML, Sass, Minimal Mistakes/Academic Pages archive layout.

File Structure

  • Modify _talks/*.md: add header.teaser front matter to existing published Gallery albums.
  • Modify _pages/Gallery.html: preserve the intro and updated date, add featured album markup, keep the complete year archive below All Albums.
  • Modify _sass/_archive.scss: add scoped Gallery styles for the featured cards and archive year controls.
  • Do not modify _layouts/archive.html, _includes/archive-single-talk.html, _data/navigation.yml, individual album body content, or any image files.
  • Do not add header.teaser to _talks/to be released/202412_Beijing_Tianjin.md.

Task 1: Add Album Cover Metadata

Files:

  • Modify: _talks/202306_1_wudalianchi.md
  • Modify: _talks/202306_2_graduate.md
  • Modify: _talks/202307_mount.md
  • Modify: _talks/202308_qinghai.md
  • Modify: _talks/202308_xian.md
  • Modify: _talks/202312_taipei.md
  • Modify: _talks/202402_shenzhen.md
  • Modify: _talks/202408_hulunbuir.md
  • Modify: _talks/202410_suzhoushanghai.md

  • Modify: _talks/202410_tuanjian.md

  • Step 1: Run the pre-metadata check

Run:

rg -n "header:|teaser:" _talks/*.md

Expected: no matches in top-level published _talks/*.md files before this task.

  • Step 2: Add teaser metadata to Wudalianchi

In _talks/202306_1_wudalianchi.md, change the front matter to:

---
title: "Volcanic lake in Northeast China"
collection: talks
type: "Wudalianchi"
permalink: /talks/202306_1_wudalianchi
venue: "Before Graduation"
date: 2023-06-08
location: "Heilongjiang Province, China"
header:
  teaser: Gallery/Wudalianchi/IMG_20230608_083430.jpg
---
  • Step 3: Add teaser metadata to HIT graduation

In _talks/202306_2_graduate.md, change the front matter to:

---
title: "Graduate from HIT"
collection: talks
type: "Harbin Institute of Technology"
permalink: /talks/202306_2_graduate
venue: "Graduation Ceremony"
date: 2023-06-10
location: "Harbin, China"
header:
  teaser: Gallery/IMG_20230603_122614.jpg
---
  • Step 4: Add teaser metadata to mountain scenery

In _talks/202307_mount.md, change the front matter to:

---
title: "Mountain scenery in Southeast China"
collection: talks
type: "Mount Longhushan and Huangshan"
permalink: /talks/202307_mount
venue: "Vacation Travelling"
date: 2023-07-01
location: "Jiangxi Province and Anhui Province, China"
header:
  teaser: Gallery/Mount/IMG_20230712_115401.jpg
---
  • Step 5: Add teaser metadata to Qinghai

In _talks/202308_qinghai.md, change the front matter to:

---
title: "The ultimate beauty of Northwest China"
collection: talks
type: "Qinghai Lake, Dachaidan Emerald Lake, Dunhuang"
permalink: /talks/202308_qinghai
venue: "Vacation Travelling"
date: 2023-08-01
location: "Qinghai and Gansu Province, China"
header:
  teaser: Gallery/Qinghai/IMG_20230802_100232_1.jpg
---
  • Step 6: Add teaser metadata to Xi’an

In _talks/202308_xian.md, change the front matter to:

---
title: "Xi'an, the ancient capital of 13 dynasties"
collection: talks
type: "Xi'an City Wall, Big Wild Goose Pagoda"
permalink: /talks/202308_xian
venue: "Vacation travelling"
date: 2023-08-10
location: "Xi'an, China"
header:
  teaser: Gallery/Xian/IMG_20230808_203410.jpg
---
  • Step 7: Add teaser metadata to Taipei

In _talks/202312_taipei.md, change the front matter to:

---
title: "Taipei night scene"
collection: talks
type: "Elephant Mountain and Taipei 101"
permalink: /talks/202312_taipei
venue: "Vacation travelling"
date: 2023-12-31
location: "Taiwan, China"
header:
  teaser: Gallery/Taiwan/mmexport1703985310303.jpg
---
  • Step 8: Add teaser metadata to Shenzhen

In _talks/202402_shenzhen.md, change the front matter to:

---
title: "CANLab at Werewolf Valley Campsite"
collection: talks
type: "Werewolf Valley Campsite"
permalink: /talks/202402_shenzhen
venue: "Group Activity"
date: 2024-02-01
location: "Shenzhen, China"
header:
  teaser: Gallery/mmexport1707041158220.jpg
---
  • Step 9: Add teaser metadata to Hulunbuir

In _talks/202408_hulunbuir.md, change the front matter to:

---
title: "Grasslands and forests in Hulunbuir"
collection: talks
type: "Hulunbuir"
permalink: /talks/202408_hulunbuir
venue: "Vacation Travelling"
date: 2024-08-17
location: "Hulunbuir, China"
header:
  teaser: Gallery/Hulunbuir/IMG_7085.JPG
---
  • Step 10: Add teaser metadata to Suzhou and Shanghai

In _talks/202410_suzhoushanghai.md, change the front matter to:

---
title: "Suzhou and Shanghai"
collection: talks
type: "Shanghai"
permalink: /talks/202410_suzhoushanghai
venue: "Vacation Travelling"
date: 2024-10-17
location: "Shanghai, China"
header:
  teaser: Gallery/Suzhou_Shanghai/IMG_0228 2024-10-17 16_18_01.jpg
---
  • Step 11: Add teaser metadata to Huizhou

In _talks/202410_tuanjian.md, change the front matter to:

---
title: "A pleasant weekend spent with my fellow students"
collection: talks
type: "Huizhou"
permalink: /talks/202410_tuanjian
venue: "Group Activity"
date: 2024-10-24
location: "Huizhou, Guangdong, China"
header:
  teaser: Gallery/Huizhou/IMG_6473 2024-10-24 16_41_50.jpg
---
  • Step 12: Verify teaser metadata and image files

Run:

rg -n "header:|teaser:" _talks/*.md
if rg -n "header:|teaser:" "_talks/to be released"; then exit 1; else echo "unreleased album teaser metadata unchanged"; fi
test -f "images/Gallery/Wudalianchi/IMG_20230608_083430.jpg"
test -f "images/Gallery/IMG_20230603_122614.jpg"
test -f "images/Gallery/Mount/IMG_20230712_115401.jpg"
test -f "images/Gallery/Qinghai/IMG_20230802_100232_1.jpg"
test -f "images/Gallery/Xian/IMG_20230808_203410.jpg"
test -f "images/Gallery/Taiwan/mmexport1703985310303.jpg"
test -f "images/Gallery/mmexport1707041158220.jpg"
test -f "images/Gallery/Hulunbuir/IMG_7085.JPG"
test -f "images/Gallery/Suzhou_Shanghai/IMG_0228 2024-10-17 16_18_01.jpg"
test -f "images/Gallery/Huizhou/IMG_6473 2024-10-24 16_41_50.jpg"

Expected:

unreleased album teaser metadata unchanged

The rg command prints teaser metadata for the ten top-level album files, and all test -f commands exit 0.

  • Step 13: Review and commit metadata

Run:

git diff -- _talks
git add _talks/202306_1_wudalianchi.md _talks/202306_2_graduate.md _talks/202307_mount.md _talks/202308_qinghai.md _talks/202308_xian.md _talks/202312_taipei.md _talks/202402_shenzhen.md _talks/202408_hulunbuir.md _talks/202410_suzhoushanghai.md _talks/202410_tuanjian.md
git commit -m "data: add gallery album cover teasers"

Expected: one commit containing only the ten top-level _talks/*.md metadata updates.

Task 2: Update Gallery Page Structure

Files:

  • Modify: _pages/Gallery.html

  • Step 1: Run the pre-structure check

Run:

rg -n "Here is the photo gallery|Updated at|year-header|posts-container|toggleYear|for post in site.talks reversed" _pages/Gallery.html

Expected: matches for the existing intro, updated date, year archive classes, toggle function, and original site.talks reversed loop.

  • Step 2: Replace _pages/Gallery.html with the new structure

Set _pages/Gallery.html to:

---
layout: archive
title: "Gallery"
permalink: /Gallery/
author_profile: true
---


<p class="gallery-intro">Here is the photo gallery, and I will record my life here.</p>

<p class="gallery-updated"><small>Updated at 2024-12-08</small></p>

<!-- I will record my life here and it is to be constructed! -->
<!-- "Amidst the chaos of life, I have found solace in the beauty of self-expression". 
 This space is my sanctuary, where words dance and emotions flow freely. 
 Through my words, I strive to capture the essence of my journey, the highs and lows, the joys and sorrows. 
 Here, you'll find a glimpse of my soul, painted with the colors of vulnerability, passion, and resilience. -->

<!-- 
Each word I pen carries a piece of my heart, a whisper of my dreams, and a fragment of my experiences. 
It is through this medium that I aim to connect, to touch the lives of others, and to inspire. 
In this vast digital realm, I invite you to join me on a voyage of introspection and discovery.

Let these words be a bridge, transcending boundaries of time and distance. 
May they evoke emotions, spark reflection, and remind you of the extraordinary beauty that resides within your own story. 
Together, let's celebrate the power of words and the incredible tapestry of human emotions that unites us all.

Thank you for visiting, and may your journey through my words be filled with moments of solace, inspiration, and connection. 
Here's to embracing the extraordinary magic that lies within the simplicity of self-expression."-->



<section class="gallery-featured" aria-labelledby="gallery-featured-title">
  <div class="gallery-featured__header">
    <p class="gallery-featured__kicker">Featured Albums</p>
    <h2 id="gallery-featured-title">Recent journeys</h2>
  </div>

  <div class="gallery-featured__grid">
    
    
      
    
      
        
        
        
        
        <a class="gallery-featured-card gallery-featured-card--primary" href="https://haozhengwan.github.io/talks/202410_tuanjian">
          <img src="https://haozhengwan.github.io/images/Gallery/Huizhou/IMG_6473 2024-10-24 16_41_50.jpg" alt="A pleasant weekend spent with my fellow students">
          <span class="gallery-featured-card__shade"></span>
          <span class="gallery-featured-card__body">
            <span class="gallery-featured-card__title">A pleasant weekend spent with my fellow students</span>
            <span class="gallery-featured-card__meta">Oct 2024 &middot; Huizhou, Guangdong, China</span>
          </span>
        </a>
      
    
      
        
        
        
        
        <a class="gallery-featured-card" href="https://haozhengwan.github.io/talks/202410_suzhoushanghai">
          <img src="https://haozhengwan.github.io/images/Gallery/Suzhou_Shanghai/IMG_0228 2024-10-17 16_18_01.jpg" alt="Suzhou and Shanghai">
          <span class="gallery-featured-card__shade"></span>
          <span class="gallery-featured-card__body">
            <span class="gallery-featured-card__title">Suzhou and Shanghai</span>
            <span class="gallery-featured-card__meta">Oct 2024 &middot; Shanghai, China</span>
          </span>
        </a>
      
    
      
        
        
        
        
        <a class="gallery-featured-card" href="https://haozhengwan.github.io/talks/202408_hulunbuir">
          <img src="https://haozhengwan.github.io/images/Gallery/Hulunbuir/IMG_7085.JPG" alt="Grasslands and forests in Hulunbuir">
          <span class="gallery-featured-card__shade"></span>
          <span class="gallery-featured-card__body">
            <span class="gallery-featured-card__title">Grasslands and forests in Hulunbuir</span>
            <span class="gallery-featured-card__meta">Aug 2024 &middot; Hulunbuir, China</span>
          </span>
        </a>
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
  </div>
</section>

<section class="gallery-archive" aria-labelledby="gallery-archive-title">
  <div class="gallery-archive__header">
    <h2 id="gallery-archive-title">All Albums</h2>
    <p>Browse the complete photo archive by year.</p>
  </div>

  
  
  
    
    
      
      <button class="gallery-year-header is-open" type="button" onclick="toggleYear('2024')" aria-expanded="true" aria-controls="posts-2024">
        <span class="gallery-year-icon" aria-hidden="true">&#9654;</span>
        <span>2024</span>
      </button>
      <div id="posts-2024" class="gallery-posts" style="display: block;">
      
      
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202412_Beijing_Tianjin" rel="permalink">Visiting Beijing and meet old friends
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> December 08, 2024</p>
    <p class="archive__item-excerpt" itemprop="description">Beijing & Tianjin, Vacation Travelling,  Beijing, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202410_tuanjian" rel="permalink">A pleasant weekend spent with my fellow students
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> October 24, 2024</p>
    <p class="archive__item-excerpt" itemprop="description">Huizhou, Group Activity,  Huizhou, Guangdong, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202410_suzhoushanghai" rel="permalink">Suzhou and Shanghai
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> October 17, 2024</p>
    <p class="archive__item-excerpt" itemprop="description">Shanghai, Vacation Travelling,  Shanghai, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202408_hulunbuir" rel="permalink">Grasslands and forests in Hulunbuir
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> August 17, 2024</p>
    <p class="archive__item-excerpt" itemprop="description">Hulunbuir, Vacation Travelling,  Hulunbuir, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202402_shenzhen" rel="permalink">CANLab at Werewolf Valley Campsite
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> February 01, 2024</p>
    <p class="archive__item-excerpt" itemprop="description">Werewolf Valley Campsite, Group Activity,  Shenzhen, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
      
        </div>
      
      <button class="gallery-year-header" type="button" onclick="toggleYear('2023')" aria-expanded="false" aria-controls="posts-2023">
        <span class="gallery-year-icon" aria-hidden="true">&#9654;</span>
        <span>2023</span>
      </button>
      <div id="posts-2023" class="gallery-posts" style="display: none;">
      
      
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202312_taipei" rel="permalink">Taipei night scene
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> December 31, 2023</p>
    <p class="archive__item-excerpt" itemprop="description">Elephant Mountain and Taipei 101, Vacation travelling,  Taiwan, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202308_xian" rel="permalink">Xi’an, the ancient capital of 13 dynasties
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> August 10, 2023</p>
    <p class="archive__item-excerpt" itemprop="description">Xi'an City Wall, Big Wild Goose Pagoda, Vacation travelling,  Xi'an, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202308_qinghai" rel="permalink">The ultimate beauty of Northwest China
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> August 01, 2023</p>
    <p class="archive__item-excerpt" itemprop="description">Qinghai Lake, Dachaidan Emerald Lake, Dunhuang, Vacation Travelling,  Qinghai and Gansu Province, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202307_mount" rel="permalink">Mountain scenery in Southeast China
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> July 01, 2023</p>
    <p class="archive__item-excerpt" itemprop="description">Mount Longhushan and Huangshan, Vacation Travelling,  Jiangxi Province and Anhui Province, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202306_2_graduate" rel="permalink">Graduate from HIT
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> June 10, 2023</p>
    <p class="archive__item-excerpt" itemprop="description">Harbin Institute of Technology, Graduation Ceremony,  Harbin, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
    
    
    





<div class="list__item">
  <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="https://haozhengwan.github.io/talks/202306_1_wudalianchi" rel="permalink">Volcanic lake in Northeast China
</a>
      
    </h2>
    
    <p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> June 08, 2023</p>
    <p class="archive__item-excerpt" itemprop="description">Wudalianchi, Before Graduation,  Heilongjiang Province, China 
    <p class="archive__item-excerpt" itemprop="description"><hr />

</p>
  </article>
</div>

  
  </div>
</section>

<script>
  function toggleYear(year) {
    var container = document.getElementById('posts-' + year);
    var button = document.querySelector('[aria-controls="posts-' + year + '"]');

    if (!container) {
      return;
    }

    var isClosed = container.style.display === 'none';
    container.style.display = isClosed ? 'block' : 'none';

    if (button) {
      button.setAttribute('aria-expanded', isClosed ? 'true' : 'false');
      button.classList.toggle('is-open', isClosed);
    }
  }
</script>
  • Step 3: Run the post-structure check

Run:

rg -n "gallery-intro|Here is the photo gallery|gallery-updated|Updated at|gallery-featured|Featured Albums|Recent journeys|All Albums|gallery-archive|for post in site.talks reversed|archive-single-talk.html|toggleYear" _pages/Gallery.html
if rg -n "<style>|year-header|posts-container|triangle-" _pages/Gallery.html; then exit 1; else echo "legacy inline gallery styles removed"; fi

Expected:

legacy inline gallery styles removed

The first rg command prints matches for the preserved intro/update text, featured section, all-albums section, original archive loop, include, and toggle function.

  • Step 4: Review and commit page structure

Run:

git diff -- _pages/Gallery.html
git add _pages/Gallery.html
git commit -m "feat: add featured gallery section"

Expected: one commit containing only _pages/Gallery.html.

Files:

  • Modify: _sass/_archive.scss

  • Step 1: Run the pre-style selector check

Run:

rg -n "gallery-intro|gallery-featured|gallery-archive|gallery-year-header|gallery-posts" _sass/_archive.scss

Expected: no matches before this task.

  • Step 2: Add the Gallery Sass block

Insert this block in _sass/_archive.scss immediately after the first existing .archive { ... } block and before .archive__subtitle:

.archive {
  .gallery-intro {
    margin: 0.25em 0 0.25em;
    color: $dark-gray;
    font-size: $type-size-5;
    line-height: 1.55;
  }

  .gallery-updated {
    margin: 0 0 1.5em;
    color: mix(#fff, $gray, 20%);
  }

  .gallery-featured {
    margin: 1.5em 0 2.5em;
  }

  .gallery-featured__header {
    margin-bottom: 0.85em;
  }

  .gallery-featured__kicker {
    margin: 0 0 0.25em;
    color: $link-color;
    font-size: $type-size-6;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .gallery-featured__header h2,
  .gallery-archive__header h2 {
    margin: 0;
    color: $darker-gray;
    font-size: $type-size-3;
    line-height: 1.2;
  }

  .gallery-featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.75fr);
    grid-auto-rows: minmax(12.5rem, 1fr);
    gap: 0.9em;
  }

  .gallery-featured-card {
    position: relative;
    display: block;
    min-height: 12.5rem;
    overflow: hidden;
    border-radius: $border-radius;
    background: $border-color;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(#000, 0.13);

    &:hover {
      color: #fff;
      text-decoration: none;

      img {
        transform: scale(1.035);
      }
    }

    &:focus {
      outline: 3px solid mix(#fff, $link-color, 35%);
      outline-offset: 3px;
    }
  }

  .gallery-featured-card--primary {
    grid-row: span 2;
    min-height: 25.9rem;
  }

  .gallery-featured-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .gallery-featured-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(#000, 0.72), rgba(#000, 0.08) 58%, rgba(#000, 0));
  }

  .gallery-featured-card__body {
    position: absolute;
    right: 1em;
    bottom: 0.95em;
    left: 1em;
    z-index: 1;
  }

  .gallery-featured-card__title {
    display: block;
    font-size: $type-size-4;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(#000, 0.45);
  }

  .gallery-featured-card--primary .gallery-featured-card__title {
    font-size: $type-size-3;
  }

  .gallery-featured-card__meta {
    display: block;
    margin-top: 0.35em;
    color: rgba(#fff, 0.86);
    font-size: $type-size-6;
    line-height: 1.35;
  }

  .gallery-archive {
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px solid $border-color;
  }

  .gallery-archive__header {
    margin-bottom: 0.8em;
  }

  .gallery-archive__header p {
    margin: 0.3em 0 0;
    color: mix(#fff, $gray, 15%);
    font-size: $type-size-6;
    line-height: 1.45;
  }

  .gallery-year-header {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.6em;
    margin: 0.85em 0 0;
    padding: 0.7em 0.85em;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: $code-background-color;
    color: $darker-gray;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;

    &:hover,
    &:focus {
      border-color: mix(#fff, $link-color, 35%);
      background: mix(#fff, $code-background-color, 45%);
      outline: none;
    }
  }

  .gallery-year-icon {
    display: inline-block;
    color: $link-color;
    transition: transform 0.2s ease;
  }

  .gallery-year-header.is-open .gallery-year-icon {
    transform: rotate(90deg);
  }

  .gallery-posts {
    margin: 0.8em 0 0 1.25em;
  }

  .gallery-posts .list__item {
    padding-right: 0;
  }

  @include breakpoint(max-width $medium) {
    .gallery-featured__grid {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }

    .gallery-featured-card,
    .gallery-featured-card--primary {
      grid-row: auto;
      min-height: 14rem;
    }

    .gallery-featured-card--primary {
      min-height: 18rem;
    }
  }

  @include breakpoint(max-width $small) {
    .gallery-featured__header h2,
    .gallery-archive__header h2 {
      font-size: $type-size-4;
    }

    .gallery-featured-card__title,
    .gallery-featured-card--primary .gallery-featured-card__title {
      font-size: $type-size-5;
    }

    .gallery-posts {
      margin-left: 0;
    }
  }
}
  • Step 3: Run the post-style selector check

Run:

rg -n "gallery-intro|gallery-featured|gallery-archive|gallery-year-header|gallery-posts" _sass/_archive.scss

Expected: the command prints matches for the new Gallery selectors.

  • Step 4: Review and commit styles

Run:

git diff -- _sass/_archive.scss
git add _sass/_archive.scss
git commit -m "style: polish gallery album cards"

Expected: one commit containing only _sass/_archive.scss.

Task 4: Static and Build Verification

Files:

  • Verify: _pages/Gallery.html
  • Verify: _sass/_archive.scss

  • Verify: _talks/*.md

  • Step 1: Verify clean working tree before final checks

Run:

git status --short

Expected: no output after Tasks 1, 2, and 3 are committed.

  • Step 2: Run Gallery content checks

Run:

rg -n "layout: archive|permalink: /Gallery/|author_profile: true" _pages/Gallery.html
rg -n "Here is the photo gallery, and I will record my life here.|Updated at" _pages/Gallery.html
rg -n "gallery-featured|Featured Albums|Recent journeys|gallery-featured-card|All Albums|gallery-archive|for post in site.talks reversed|archive-single-talk.html" _pages/Gallery.html
if rg -n "<style>|year-header|posts-container|triangle-" _pages/Gallery.html; then exit 1; else echo "legacy inline gallery styles removed"; fi

Expected:

legacy inline gallery styles removed

The first three commands print matches for preserved front matter, intro/update text, featured cards, and the complete archive loop.

  • Step 3: Run metadata and asset checks

Run:

rg -n "header:|teaser:" _talks/*.md
if rg -n "header:|teaser:" "_talks/to be released"; then exit 1; else echo "unreleased album teaser metadata unchanged"; fi
test -f "images/Gallery/Huizhou/IMG_6473 2024-10-24 16_41_50.jpg"
test -f "images/Gallery/Suzhou_Shanghai/IMG_0228 2024-10-17 16_18_01.jpg"
test -f "images/Gallery/Hulunbuir/IMG_7085.JPG"

Expected:

unreleased album teaser metadata unchanged

The rg command prints teaser metadata for top-level Gallery albums, and the image checks exit 0.

  • Step 4: Run style checks

Run:

rg -n "gallery-intro|gallery-featured|gallery-archive|gallery-year-header|gallery-posts" _sass/_archive.scss
git diff --check HEAD~3..HEAD

Expected: selector matches print, and git diff --check exits 0.

  • Step 5: Attempt Jekyll build

Run:

bundle exec jekyll build --config _config.yml,_config.dev.yml

Expected in a healthy local Ruby/Jekyll environment: build exits 0 and prints output containing Destination: ./_site and done in.

Known current environment blocker from this repository state: this command may exit 127 with bundler: command not found: jekyll because the local Ruby/Bundler environment lacks the Jekyll executable. If that happens, record the exact output and continue to Step 6. Do not change Gemfile or install dependencies as part of this Gallery implementation task.

  • Step 6: Review final implementation diff

Run:

git diff HEAD~3..HEAD --stat
git diff HEAD~3..HEAD -- _pages/Gallery.html _sass/_archive.scss _talks
git status --short

Expected: the diff includes only _pages/Gallery.html, _sass/_archive.scss, and the ten top-level _talks/*.md front matter updates. git status --short prints no output.