Conversation
|
🚀 Draft Preview: https://pr177-draft.lc0.org/ |
There was a problem hiding this comment.
Pull Request Overview
Enables cross-document View Transitions for a site-wide fade effect and links blog list titles to post titles for shared element transitions.
- Opts into navigation transitions when users do not prefer reduced motion.
- Adds deterministic view-transition-name to blog summary/title elements to animate titles from list to detail pages.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| themes/leela/assets/css/main.css | Enables View Transitions API for navigation when motion is allowed. |
| layouts/blog/section.html | Adds view-transition-name to each blog summary title using a stable hash. |
| layouts/blog/page.html | Adds the same view-transition-name to the blog post h1 to match the list item. |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| } | ||
|
|
||
| } | ||
|
|
There was a problem hiding this comment.
Consider explicitly disabling navigation transitions for users who prefer reduced motion to ensure accessibility regardless of UA defaults. Add a complementary block: @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }.
| @media (prefers-reduced-motion: reduce) { | |
| @view-transition { | |
| navigation: none; | |
| } | |
| } |
| {{ range $paginator.Pages }} | ||
| <div class="blog-summary"> | ||
| <div class="blog-summary-title"> | ||
| <div class="blog-summary-title" style="view-transition-name: post-title-{{ printf "%s/%s" .Language.Lang .Path | hash.FNV32a }};"> |
There was a problem hiding this comment.
[nitpick] The hash expression is inlined here and also in page.html; compute it once in a local variable to avoid duplication and make it easier to change later. Example: {{- $vt := printf "%s/%s" .Language.Lang .Path | hash.FNV32a -}} then style=\"view-transition-name: post-title-{{$vt}};\".
|
|
||
| <div class="blog-date">{{ .PublishDate.Format "2006-01-02" }}</div> | ||
| <h1 class="blog-title">{{ .Title }}</h1> | ||
| <h1 class="blog-title" style="view-transition-name: post-title-{{ printf "%s/%s" .Language.Lang .Path | hash.FNV32a }};">{{ .Title }}</h1> |
There was a problem hiding this comment.
[nitpick] Mirror the approach from section.html by assigning the hashed value to a local variable and reusing it, which reduces duplication and risk of mismatch across templates. Example: {{- $vt := printf "%s/%s" .Language.Lang .Path | hash.FNV32a -}} then use post-title-{{$vt}}.
|
🚀 Draft Preview: https://pr177-draft.lc0.org/ |
|
Hmm doesn't really look like an improvement to me.. In general when a user wants immediate response and instead some animation starts to play, it feels sluggish. |
Adds a simple fade between all pages, for blog posts, the title animates in to place.