improve view transition styling

This commit is contained in:
Amolith 2023-05-31 19:54:26 -04:00
parent b72014384c
commit b25dd50157
Signed by: Amolith
GPG Key ID: 8AE30347CE28D101
3 changed files with 4 additions and 4 deletions

View File

@ -24,10 +24,10 @@
{{- range .Pages }} {{- range .Pages }}
{{- if .Params.rss_only }} {{- if .Params.rss_only }}
{{- else }} {{- 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-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-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 }} {{- if .Params.tags }}
<p class="tags"> <p class="tags">
{{ $title := .Title }} {{ $title := .Title }}

View File

@ -3,7 +3,7 @@
<article> <article>
<div class="frontmatter"> <div class="frontmatter">
<h1 class="post-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1> <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> <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 }} {{- if .Params.tags }}
<p class="tags"> <p class="tags">

View File

@ -3,7 +3,7 @@
<article> <article>
<div class="frontmatter"> <div class="frontmatter">
<h1 class="post-title" style="view-transition-name: title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1> <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> </div>
{{- if .Params.toc }} {{- if .Params.toc }}
<aside id="toc"> <aside id="toc">