Add view transitions

Author: C4ptainCrunch

www/templates/base.html

@@ -12,6 +12,7 @@
               rel="stylesheet" crossorigin="anonymous">
 
         <script type="module" src="https://unpkg.com/@hotwired/turbo@8.0.4" defer></script>
+        <meta name="view-transition" content="same-origin">
         <script type="module" src="{% static "main.js" %}" defer data-turbo-track="reload"></script>
 
         <!--
@@ -21,6 +22,64 @@
         <script defer data-domain="dochub.be" src="https://stats.dochub.be/js/plausible.js" data-turbo-track="reload"></script>
 
         <style>
+            nav {
+                view-transition-name: nav;
+            }
+
+            @keyframes fade-in {
+                from { opacity: 0; }
+            }
+
+            @keyframes fade-out {
+                to { opacity: 0; }
+            }
+
+            @keyframes slide-from-right {
+                from { transform: translateX(30px); }
+            }
+
+            @keyframes slide-to-left {
+                to { transform: translateX(-30px); }
+            }
+
+            @keyframes full-slide-from-right {
+                from { transform: translateX(100%); }
+            }
+
+            @keyframes full-slide-to-left {
+                to { transform: translateX(-100%); }
+            }
+
+            ::view-transition-old(root) {
+                animation: 300ms ease-out both full-slide-to-left;
+            }
+
+            ::view-transition-new(root) {
+                animation: 300ms ease-out both full-slide-from-right;
+            }
+
+            @media (min-width: 500px) {
+                ::view-transition-old(root) {
+                    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+                               300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+                }
+
+                ::view-transition-new(root) {
+                    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+                               300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+                }
+            }
+
+            @media (prefers-reduced-motion) {
+                ::view-transition-group(*),
+                ::view-transition-old(*),
+                ::view-transition-new(*) {
+                    animation: none !important;
+                }
+            }
+
+
+
             a .hover-underline {
                 text-decoration: underline;
                 text-decoration-color: transparent;