add lots of transitions

This commit is contained in:
Amolith 2023-05-21 17:13:16 -04:00
parent 9661785e20
commit b6abcbc776
Signed by: Amolith
GPG Key ID: 8AE30347CE28D101
4 changed files with 9 additions and 11 deletions

View File

@ -29,7 +29,6 @@
&-day { &-day {
float: right; float: right;
font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
} }
&-item { &-item {
padding-bottom: 35px; padding-bottom: 35px;

View File

@ -1,6 +1,6 @@
{{ define "main" }} {{ define "main" }}
<div class="list"> <div class="list">
<h1>{{ .Title }}</h1> <h1 style="view-transition-name: title">{{ .Title }}</h1>
<div class="content"> <div class="content">
{{ .Content | safeHTML }} {{ .Content | safeHTML }}
</div> </div>
@ -9,17 +9,15 @@
<input name="sites" type="hidden" value="secluded.site"> <input name="sites" type="hidden" value="secluded.site">
<input aria-label="Search this blog." name="q" type="text" placeholder="&#128270; Search this site with DuckDuckGo" > <input aria-label="Search this blog." name="q" type="text" placeholder="&#128270; Search this site with DuckDuckGo" >
</form> </form>
{{ $title := .Title }}
{{ if eq $title "Posts" }}
<div class="categories"> <div class="categories">
<h2>Categories</h2> <h2>Categories</h2>
<p> <p>
<a class="button" href="/posts">All</a>
{{ range ($.Site.GetPage "taxonomyTerm" "categories").Pages }} {{ range ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
<a class="button" href="{{.Permalink}}">{{.Title}}</a> <a class="button" href="{{.Permalink}}">{{.Title}}</a>
{{- end }} {{- end }}
</p> </p>
</div> </div>
{{ end }}
<hr/> <hr/>
@ -30,13 +28,14 @@
{{- else }} {{- else }}
<li class="posts-item"> <li class="posts-item">
<a href="{{.Permalink}}"> <a href="{{.Permalink}}">
<span class="posts-title" style="view-transition-name: post-{{ .Title | urlize }}">{{.Title}}</span> <span class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}">{{.Title}}</span>
<span class="posts-day">{{ if .Site.Params.dateformShort }}{{ .Date.Format .Site.Params.dateformShort }}{{ else }}{{ .Date.Format "Jan 02"}}{{ end }}</span> <span class="posts-day" style="view-transition-name: post-day-{{ .Title | urlize }}">{{ if .Site.Params.dateformShort }}{{ .Date.Format .Site.Params.dateformShort }}{{ else }}{{ .Date.Format "2006-01-02" }}{{ end }}</span>
</a> </a>
<p>{{ .Summary | truncate 140 }}</p> <p style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
<p> <p>
{{ $title := .Title }}
{{- range (.GetTerms "tags") }} {{- range (.GetTerms "tags") }}
<a class="button" href="{{.Permalink}}">{{.Title}}</a> <a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
{{- end }} {{- end }}
</p> </p>
</li> </li>

View File

@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<article> <article>
<div class="frontmatter"> <div class="frontmatter">
<h1 class="post-title" style="view-transition-name: post-{{ .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><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.rss_only }} {{- if .Params.rss_only }}

View File

@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<article> <article>
<div class="frontmatter"> <div class="frontmatter">
<h1 class="post-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 }}</a></p> <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>
</div> </div>
{{- if .Params.toc }} {{- if .Params.toc }}