add lots of transitions

Amolith created 2 years ago

Change summary

themes/secluded/assets/scss/_list.scss       |  1 -
themes/secluded/layouts/_default/list.html   | 15 +++++++--------
themes/secluded/layouts/_default/single.html |  2 +-
themes/secluded/layouts/generic/single.html  |  2 +-
4 files changed, 9 insertions(+), 11 deletions(-)

Detailed changes

themes/secluded/assets/scss/_list.scss

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

themes/secluded/layouts/_default/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <div class="list">
-    <h1>{{ .Title }}</h1>
+    <h1 style="view-transition-name: title">{{ .Title }}</h1>
     <div class="content">
         {{ .Content | safeHTML }}
     </div>
@@ -9,17 +9,15 @@
         <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" >
     </form>
-    {{ $title := .Title }}
-    {{ if eq $title "Posts" }}
     <div class="categories">
         <h2>Categories</h2>
         <p>
+            <a class="button" href="/posts">All</a>
             {{ range ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
             <a class="button" href="{{.Permalink}}">{{.Title}}</a>
             {{- end }}
         </p>
     </div>
-    {{ end }}
 
     <hr/>
 
@@ -30,13 +28,14 @@
             {{- else }}
             <li class="posts-item">
                 <a href="{{.Permalink}}">
-                    <span class="posts-title" style="view-transition-name: post-{{ .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-title" style="view-transition-name: post-title-{{ .Title | urlize }}">{{.Title}}</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>
-                <p>{{ .Summary | truncate 140 }}</p>
+                <p style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
                 <p>
+                    {{ $title := .Title }}
                     {{- 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 }}
                 </p>
             </li>

themes/secluded/layouts/_default/single.html

@@ -2,7 +2,7 @@
 <div class="wrapper">
     <article>
         <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>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 }}

themes/secluded/layouts/generic/single.html

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