diff options
| -rw-r--r-- | assets/css/components/_animation.scss | 10 | ||||
| -rw-r--r-- | layouts/_default/single.html | 10 | ||||
| -rw-r--r-- | layouts/index.html | 5 |
3 files changed, 15 insertions, 10 deletions
diff --git a/assets/css/components/_animation.scss b/assets/css/components/_animation.scss index a47bfafc..039de17e 100644 --- a/assets/css/components/_animation.scss +++ b/assets/css/components/_animation.scss @@ -1,9 +1,5 @@ -/* transition swup */ +/* page transition */ -html.is-changing .transition-fade { - transition: opacity 0.25s; - opacity: 1; -} -html.is-animating .transition-fade { - opacity: 0; +@view-transition { + navigation: auto; } diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 3733936e..243f8549 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,12 +1,18 @@ {{ partial "snippets/document-start.html" . }} - <article class="post {{ .Site.Language.LanguageName }}" id="article"> + <article + class="post {{ .Site.Language.LanguageName }}" + id="article" + > {{ if eq .Type "posts" }} {{ partial "components/breadcrumbs.html" . }} {{ else }} {{ partial "header.html" . }} {{ end }} <!-- Post Header --> - <header class="post-header"> + <header + style="view-transition-name: post-{{ .File.UniqueID }}" + class="post-header" + > {{ if in .Site.Params.mainSections .Type }} {{ partial "components/banner.html" . }} <!-- Title and Subtitle --> diff --git a/layouts/index.html b/layouts/index.html index e8fadb65..47f2fb03 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -26,6 +26,7 @@ <div class="row"> <div class="col-xs-11 col-sm-10"> <a + style="view-transition-name: post-{{ .File.UniqueID }}" class="posts-title-link" href="{{ .RelPermalink }}" data-umami-event="Click Post Link from Index" @@ -44,7 +45,9 @@ <div class="col-xs-1 col-sm-2 posts-categories"> {{ with .Params.categories }} <div class="posts-category"> - <a href="/categories/{{ . }}/"><strong>{{ . }}</strong></a> + <a + href="/categories/{{ . }}/" + ><strong>{{ . }}</strong></a> </div> {{ end }} </div> |