# Frontend Polish 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 (`- [x]`) syntax for tracking.

**Status:** ✅ Complete — implemented 2026-06-24

**Spec:** `docs/working/specs/2026-06-24-frontend-polish-design.md`

**Goal:** Visual polish across the five primary page templates: pill grammar, stats field-notes style, header identity, emoji replacement, trip card cover images, story progress bar, and story opening transition.

**Architecture:** Tasks 1–2 are pure CSS (style.css only). Task 3 touches one partial (emoji). Task 4 adds a blueprint field and updates one template. Tasks 5–6 each add CSS + a small Twig block to story.html.twig.

**Already done (this session):**
- `entry.html.twig` unified with feed partial — hero removed, PhotoSwipe replaces broken lightbox
- Dead CSS from old entry layout stripped from `style.css`

---

## Global Constraints

- All changes in `user/` — commit with `git -C user`, not main-repo git
- All new CSS uses token variables only — no hardcoded hex values
- Changes must degrade gracefully when optional data (cover image, location) is absent
- `prefers-reduced-motion` must be respected for any animations in Tasks 5–6
- Clear Grav cache after each template change: `make remote-cache-clear` or via Admin

---

## Task 1: Pure CSS — Pill grammar + Stats style + Header identity

**Files:**
- Modify: `user/themes/intotheeast/css/style.css`

**Interfaces:**
- Produces: visual changes to trip filter buttons, stats blocks, and site header across all pages

- [x] **Step 1: Pill grammar — change filter/sort buttons to rounded-rect**

Find `.trip-filter-btn,` selector block:
```css
.trip-filter-btn,
.trip-stats-btn {
    ...
    border-radius: var(--radius-full);
    ...
}
```

Change only `border-radius` to `var(--radius-sm)`. Leave all other properties unchanged.

- [x] **Step 2: Stats — remove box, add left rule**

Find `.stat-block` rule:
```css
.stat-block {
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
```

Replace with:
```css
.stat-block {
    border-left: 2px solid var(--color-accent);
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    text-align: left;
}
```

- [x] **Step 3: Stats — change number color from accent to ink**

Find `.stat-value` rule. It contains `color: var(--color-accent)`. Change to `color: var(--color-ink)`. Leave all other properties unchanged.

- [x] **Step 4: Header — widen site title tracking and size**

Find `.site-title` rule:
```css
.site-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: -0.01em;
    ...
}
```

Change:
- `font-size: var(--text-lg)` → `font-size: var(--text-xl)`
- `letter-spacing: -0.01em` → `letter-spacing: 0.06em`

- [x] **Step 5: Header — thicken and gradient the accent stripe**

Find `.site-header` rule. It contains `border-top: 3px solid var(--color-accent)`.

Change to:
```css
border-top: 4px solid transparent;
border-image: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)) 1;
```

- [x] **Step 6: Visual smoke check**

Open browser and verify:
- `/trips` — trip filter buttons are square-cornered (not pill-shaped)
- `/trips/<any-trip>` — stats panel shows left accent stripe, cream numbers, no box border
- Header — "into the east" is slightly larger with wider tracking; accent stripe has gradient

- [x] **Step 7: Commit**

```bash
git -C user add themes/intotheeast/css/style.css
git -C user commit -m "style: pill grammar, stats field-notes, header identity"
```

---

## Task 2: Replace emoji icons in journal entry partial

**Files:**
- Modify: `user/themes/intotheeast/templates/partials/entry-journal.html.twig`

**Interfaces:**
- Affects: every journal entry in the home feed, trip feed, and standalone entry page

- [x] **Step 1: Replace location emoji with SVG pin**

Find in the partial:
```twig
· 📍
```

Replace with:
```twig
· <svg width="11" height="13" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true" style="flex-shrink:0;vertical-align:-1px"><path d="M6 0C3.24 0 1 2.24 1 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.75A1.75 1.75 0 1 1 6 3.25a1.75 1.75 0 0 1 0 3.5z"/></svg>
```

- [x] **Step 2: Strip weather emoji prefix**

Find in the partial:
```twig
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
```

Replace with:
```twig
<span class="journal-post-weather">· {{ entry.header.weather_desc }}</span>
```

The `weather_icons` map at the top of the partial can stay (removing it is optional cleanup); it will simply go unused.

- [x] **Step 3: Smoke check**

Open any trip page in browser. Confirm:
- Location shows small SVG pin instead of 📍
- Weather shows plain text (e.g. "· Sunny") with no emoji

- [x] **Step 4: Commit**

```bash
git -C user add themes/intotheeast/templates/partials/entry-journal.html.twig
git -C user commit -m "style: replace emoji icons with SVG pin and plain weather text"
```

---

## Task 3: Trip cards — cover image

**Files:**
- Modify: `user/themes/intotheeast/blueprints/trip.yaml`
- Modify: `user/themes/intotheeast/templates/trips.html.twig`
- Modify: `user/themes/intotheeast/css/style.css`

**Interfaces:**
- Produces: optional cover image banner on each trip card
- Consumes: `trip.header.cover_image` (new field) or first image from first published entry

- [x] **Step 1: Read the current trip blueprint**

```bash
cat user/themes/intotheeast/blueprints/trip.yaml
```

Locate the correct position to insert the new field (after `tagline` or near other media fields).

- [x] **Step 2: Add cover_image field to blueprint**

Insert in `trip.yaml` at an appropriate location:
```yaml
cover_image:
    type: filepicker
    label: Cover Image
    preview_images: true
    folder: '@self'
    accept:
        - image/*
```

- [x] **Step 3: Add cover image CSS to style.css**

In the `/* ── Past trips archive */` section, add after `.trip-card-counts`:

```css
.trip-card-cover {
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-border);
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
}

.trip-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.trip-card:hover .trip-card-cover img { transform: scale(1.04); }
```

- [x] **Step 4: Update trips.html.twig to render cover image**

Inside the `{% for trip in trips %}` loop, before the `.trip-card-title` div, add:

```twig
{# Cover image: explicit field first, then first entry's first image #}
{% set cover = null %}
{% if trip.header.cover_image and trip.media[trip.header.cover_image] is defined %}
    {% set cover = trip.media[trip.header.cover_image] %}
{% elseif dailies_page %}
    {% set first_entry = dailies_page.children.published()|first %}
    {% if first_entry and first_entry.media.images|length > 0 %}
        {% set cover = first_entry.media.images|first %}
    {% endif %}
{% endif %}
{% if cover %}
<div class="trip-card-cover">
    <img src="{{ cover.cropResize(720, 240).url }}" alt="{{ trip.title }}" loading="lazy">
</div>
{% endif %}
```

- [x] **Step 5: Smoke check**

Open `/trips` in browser. Confirm:
- Trips with media show a 3:1 cover photo banner
- Trips without media show text-only card (no broken image element)
- Hover scales the image slightly

- [x] **Step 6: Commit**

```bash
git -C user add themes/intotheeast/blueprints/trip.yaml themes/intotheeast/templates/trips.html.twig themes/intotheeast/css/style.css
git -C user commit -m "feat: trip cards show cover image with 3:1 crop and hover zoom"
```

---

## Task 4: Story opening transition

**Files:**
- Modify: `user/themes/intotheeast/templates/story.html.twig`
- Modify: `user/themes/intotheeast/css/style.css`

**Interfaces:**
- Consumes: `date_str` and `location` already computed at the top of `story.html.twig`
- Produces: a centered location/date block at the top of `.story-body` with fade-in animation

- [x] **Step 1: Add story-opener CSS to style.css**

In the `/* ── Story pages */` section, after `.story-body p` rules, add:

```css
.story-opener {
    text-align: center;
    padding-bottom: var(--space-12);
    margin-bottom: var(--space-12);
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    animation: storyReveal 0.9s cubic-bezier(.16,1,.3,1) 0.8s both;
}

.story-opener__text {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .story-opener { opacity: 1; animation: none; }
}
```

- [x] **Step 2: Add opener block to story.html.twig**

Inside `.story-body`, immediately before `{{ page.content|raw }}`, add:

```twig
{% if location or date_str %}
<div class="story-opener">
    <span class="story-opener__text">
        {{- date_str -}}
        {%- if location and date_str %} · {% endif -%}
        {{- location -}}
    </span>
</div>
{% endif %}
```

- [x] **Step 3: Smoke check**

Open any published story in browser. Confirm:
- A small uppercase line showing date and location appears below the hero spacer
- It is separated from the prose by a thin horizontal rule
- It fades in after the hero title animation completes
- On a story with no location set: only date appears (or nothing if both are absent)

- [x] **Step 4: Commit**

```bash
git -C user add themes/intotheeast/templates/story.html.twig themes/intotheeast/css/style.css
git -C user commit -m "feat: story opening transition with location and date eyebrow"
```

---

## Task 5: Reading progress bar on story pages

**Files:**
- Modify: `user/themes/intotheeast/templates/story.html.twig`
- Modify: `user/themes/intotheeast/css/style.css`

**Interfaces:**
- Produces: 2px teal bar fixed at bottom of site header, progress tied to `.story-body` scroll position
- No bar rendered at all if `prefers-reduced-motion` is set (JS skips creating it)

- [x] **Step 1: Add progress bar CSS to style.css**

In the `/* ── Story pages */` section, add:

```css
.story-progress {
    position: fixed;
    top: var(--site-header-height);
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--color-accent);
    z-index: 200;
    pointer-events: none;
    will-change: width;
}
```

- [x] **Step 2: Add progress bar element and JS to story.html.twig**

Immediately after `{% block content %}` (before the hero markup), add:

```twig
<div class="story-progress" id="story-progress"></div>
```

In the `<script>` block at the bottom (after the existing scroll/reveal scripts), add:

```javascript
/* ── Reading progress bar ────────────────────────────────── */
(function () {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    var bar  = document.getElementById('story-progress');
    var body = document.querySelector('.story-body');
    if (!bar || !body) return;

    function update() {
        var rect    = body.getBoundingClientRect();
        var total   = body.offsetHeight - window.innerHeight;
        var scrolled = -rect.top;
        var pct     = total > 0 ? Math.min(100, Math.max(0, (scrolled / total) * 100)) : 0;
        bar.style.width = pct.toFixed(1) + '%';
    }

    window.addEventListener('scroll', update, { passive: true });
    update();
})();
```

- [x] **Step 3: Smoke check**

Open any published story in browser. Confirm:
- A thin teal line appears at the top of the content area (below the sticky header) as you scroll into the story body
- Bar is at 0% when the hero is visible, fills to 100% as you reach the story footer
- Bar is invisible (absent) on a device with `prefers-reduced-motion`

- [x] **Step 4: Commit**

```bash
git -C user add themes/intotheeast/templates/story.html.twig themes/intotheeast/css/style.css
git -C user commit -m "feat: reading progress bar on story pages"
```

---

## Final Verification

After all tasks complete:

1. Visual check list (browser):
   - `/trips` — cover images on trip cards, hover scales; text-only fallback if no media
   - `/trips/<any-trip>` — filter buttons square-cornered; stats left-rule style with cream numbers
   - `/trips/<any-trip>/dailies/<any-entry>` (standalone URL) — SVG location pin, plain weather text, photo strip + PhotoSwipe, no hero image
   - `/trips/<any-trip>/<any-story>` — opener block visible below hero; progress bar fills on scroll; no emoji anywhere
   - Any page header — "into the east" wider-tracked; accent stripe slightly thicker with gradient

2. Reduced-motion check: simulate `prefers-reduced-motion: reduce` in browser devtools and confirm no animations fire on story pages (opener snaps visible immediately, progress bar absent).

3. Empty-data check: visit a trip with no media attached and confirm `/trips` degrades to text-only card without errors.