From 27390b6e772a798bcd7e3997547d1dfb5dc2c333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleks=20R=C5=ABti=C5=86=C5=A1?= <aleks@rutins.com>
Date: Sun, 2 Jun 2024 19:29:39 -0400
Subject: [PATCH] More fancy styles

---
 assets/site.css              |  4 ++++
 components/section-link.html | 13 ++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/assets/site.css b/assets/site.css
index aff677c..5ee6b0a 100644
--- a/assets/site.css
+++ b/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;
diff --git a/components/section-link.html b/components/section-link.html
index b9b895e..e9c9830 100644
--- a/components/section-link.html
+++ b/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>
\ No newline at end of file