Add specific view transitions

csswizardry · Sep 1, 2023 · 86eafa8 · 86eafa8
1 parent 906e004
commit 86eafa8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -14,7 +14,7 @@
 
             <time class=post__date datetime={{ page.date | date: "%Y-%m-%d" }}  itemprop=datePublished>{{ page.date | date: "%-d %B, %Y" }}</time>
 
-            <h1 itemprop="name  headline" elementtiming=page-title>{{ page.title }}</h1>
+            <h1 itemprop="name  headline" elementtiming=page-title style="view-transition-name: x-{{ page.date | date: '%Y-%m-%d' }}">{{ page.title }}</h1>
 
             <p class=hide>Written by <b itemprop=author>Harry Roberts</b> on <b itemprop=publisher>CSS Wizardry</b>.</p>
 
@@ -77,11 +77,11 @@ <h1 itemprop="name  headline" elementtiming=page-title>{{ page.title }}</h1>
             <nav class=c-pagination>
               {% if page.previous.url %}
                 <link rel=prerender href="{{page.previous.url}}" />
-                <a href="{{page.previous.url}}" class="c-pagination__item  c-pagination__prev">{{page.previous.title}}</a>
+                <a href="{{page.previous.url}}" class="c-pagination__item c-pagination__prev" style="view-transition-name: x-{{ page.previous.date | date: '%Y-%m-%d' }}">{{page.previous.title}}</a>
               {% endif %}
               {% if page.next.url %}
                 <link rel=prerender href="{{page.next.url}}" />
-                <a href="{{page.next.url}}" class="c-pagination__item c-pagination__next">{{page.next.title}}</a>
+                <a href="{{page.next.url}}" class="c-pagination__item c-pagination__next" style="view-transition-name: x-{{ page.next.date | date: '%Y-%m-%d' }}">{{page.next.title}}</a>
               {% endif %}
             </nav>
 

diff --git a/archive.html b/archive.html
@@ -25,7 +25,7 @@ <h2>{{ currentDate }}</h2>
     {% endif %}
       <li>
         <b><time class="" datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%B %d" }}</time>:</b>
-        <a href="{{ post.url }}">{{ post.title }}</a>
+        <a href="{{ post.url }}"style="view-transition-name: x-{{ post.date | date: '%Y-%m-%d' }}">{{ post.title }}</a>
       </li>
     {% if forloop.last %}</ol>{% endif %}
   {% endfor %}

diff --git a/index.html b/index.html
@@ -46,7 +46,7 @@ <h3 class=heading>Articles</h3>
           {% endif %}
 
           <time class="post__date" datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date: "%-d %B, %Y" }}</time>
-          <h3 class="post__title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
+          <h3 class="post__title" style="view-transition-name: x-{{ post.date | date: '%Y-%m-%d' }}"><a href="{{ post.url }}">{{ post.title }}</a></h3>
         </li>
         {% endfor %}
       </ul>