More fancy styles

assets/site.css

@@ -1,5 +1,9 @@
 @import url(https://fonts.bunny.net/css?family=fira-mono:400|josefin-sans:300,300i,400,400i,700,700i);
 
+@view-transition {
+	navigation: auto;
+}
+
 :root {
 	--font-body: 'Josefin Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

components/section-link.html

@@ -18,16 +18,17 @@
         text-decoration: none !important;
         text-transform: uppercase;
         color: inherit;
+        --bg-hover: black;
         background-image: linear-gradient(135deg,
-            black 0%,
-            black 50%,
+            var(--bg-hover) 0%,
+            var(--bg-hover) 50%,
             transparent 50%,
             transparent 100%
         );
         background-size: 250%;
         background-position: 90% 90%;
         border: 2px solid;
-        transition-property: color, border-color, background-position;
+        transition-property: color, border-color, background-position, background-color, background-image;
         transition-duration: .75s;
     }
     a span, a svg {
@@ -38,4 +39,10 @@
         background-position: 0% 0%;
         border-color: black;
     }
+    a:active {
+        --bg-hover: var(--color-theme-1);
+        border-color: var(--color-theme-1);
+        color: var(--color-theme-1);
+        background-position: -75% -75%;
+    }
 </style>