Add transition to header links

2023-01-07 10:52:07 -08:00
parent 3137b22176
commit 3ef9217a84
1 changed files with 13 additions and 1 deletions
--- a/layouts/partials/paige/style.html
+++ b/layouts/partials/paige/style.html
@@ -47,9 +47,21 @@ section[class="paige-content"] > div {
 }

 .paige-header-link {
-    display: none;
    margin-left: 0.5ch;
+    opacity: 0;
    position: absolute;
+    text-decoration: none;
+    transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .paige-header-link {
+        transition: none;
+    }
+}
+
+.paige-header-link:focus, .paige-header-link:hover, :hover > .paige-header-link, :target > .paige-header-link {
+    opacity: 1;
 }

 {{ with .Site.Params.paige.color_scheme }}