feat: add CSS view-transitions

Author: ArnaudLigny

assets/css/styles.css

@@ -68,3 +68,20 @@ summary::-webkit-details-marker {
 pre code.hljs {
   padding: 0 !important;
 }
+
+@view-transition {
+  navigation: auto;
+}
+
+@layer view-transitions {
+  ::view-transition-group(.page-transition) {
+    animation-duration: 0.6s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-old(root),
+    ::view-transition-new(root) {
+      animation: none;
+    }
+  }
+}

assets/css/tailwind.css

@@ -24,11 +24,11 @@
               </div>
               {#- title ~#}
               {%- if in_list|default(false) == true ~%}
-              <h2 class="mb-2 text-2xl md:text-3xl font-display font-extrabold xl:leading-snug text-violet dark:text-blue-500">
+              <h2 style="view-transition-name: {{ p.slug }}" class="mb-2 text-2xl md:text-3xl font-display font-extrabold xl:leading-snug text-violet dark:text-blue-500">
                 <a href="{{ url(p) }}" class="hover:underline dark:hover:text-blue-300">{{ p.title }}</a>
               </h2>
               {%- else ~%}
-              <h1 class="mb-2 text-2xl md:text-3xl font-display font-extrabold xl:leading-snug text-violet dark:text-blue-500">
+              <h1 style="view-transition-name: {{ p.slug }}" class="mb-2 text-2xl md:text-3xl font-display font-extrabold xl:leading-snug text-violet dark:text-blue-500">
                 {{ p.title }}
               </h1>
               {%- endif ~%}

layouts/partials/post-header.html.twig

@@ -13,7 +13,7 @@
       </nav>
       {#- title ~#}
       <h1 class="text-4xl font-display font-extrabold text-center text-violet-dark dark:text-blue-500">
-        Articles &laquo;&nbsp;<span class="capitalize text-rose-600">{{ page.title|title }}</span>&nbsp;&raquo;
+        Articles &laquo;&nbsp;<span style="view-transition-name: {{ page.title|slugify }}" class="capitalize text-rose-600">{{ page.title|title }}</span>&nbsp;&raquo;
       </h1>
     </div>
     {%- endblock ~%}

layouts/term.html.twig

@@ -11,7 +11,7 @@
         <ul>
           {%- for term in page.terms ~%}
           <li>
-            <a href="{{ url(term.id, {language: site.language}) }}">{{ term.name }}</a> ({{ term|length }})
+            <a style="view-transition-name: {{ term.name|slugify }}" href="{{ url(term.id, {language: site.language}) }}">{{ term.name }}</a> ({{ term|length }})
           </li>
           {%- endfor ~%}
         </ul>