improve view transition styling

Amolith created

Change summary

themes/secluded/layouts/_default/list.html   | 4 ++--
themes/secluded/layouts/_default/single.html | 2 +-
themes/secluded/layouts/generic/single.html  | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)

Detailed changes

themes/secluded/layouts/_default/list.html 🔗

@@ -24,10 +24,10 @@
             {{- range .Pages }}
             {{- if .Params.rss_only }}
             {{- else }}
-            <li class="posts-item">
+            <li style="view-transition-name: post-container-{{ .Title | urlize }}" class="posts-item">
                 <p class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{.Permalink}}">{{.Title}}</a></p>
                 <p class="posts-summary" style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
-                <p class="posts-meta"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }}</p>
+                <p style="view-transition-name: post-meta-{{ .Title | urlize }}" class="posts-meta"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }}</p>
                 {{- if .Params.tags }}
                 <p class="tags">
                     {{ $title := .Title }}

themes/secluded/layouts/_default/single.html 🔗

@@ -3,7 +3,7 @@
     <article>
         <div class="frontmatter">
             <h1 class="post-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
-            <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p>
+            <p style="view-transition-name: post-meta-{{ .Title | urlize }}"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p>
             <p><strong>Download this post as:</strong> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.pdf">PDF,</a> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.epub">EPUB,</a> or <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.txt">plaintext</a></p>
             {{- if .Params.tags }}
             <p class="tags">

themes/secluded/layouts/generic/single.html 🔗

@@ -3,7 +3,7 @@
     <article>
         <div class="frontmatter">
             <h1 class="post-title" style="view-transition-name: title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
-            <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}></p>
+            <p style="view-transition-name: post-meta-{{ .Title | urlize }}"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}></p>
         </div>
         {{- if .Params.toc }}
         <aside id="toc">