lectures.alex.balgavy.eu

commit 93d1647226c45729fb98ea81ffbb1f1b5d7be614
parent 0e101908579549d49ff777234e2329b40de3e412
Author: Alex Balgavy <alex@balgavy.eu>
Date:   Wed, 27 Jan 2021 19:16:14 +0100

Add a slight animation for clicked anchor links

Diffstat:
M
sass/dark.scss
 | 
11
+++++++++++
M
sass/light.scss
 | 
11
+++++++++++

2 files changed, 22 insertions(+), 0 deletions(-)
diff --git a/sass/dark.scss b/sass/dark.scss
@@ -61,3 +61,14 @@ code {
   background: lighten($bgcolor, 5%);
   color: lighten($textcolor, 8%);
 }
+
+:target {
+  background-clip: border-box;
+  animation-name: anchor-jump;
+  animation-duration: 1s;
+  animation-timing-function: ease-out;
+}
+@keyframes anchor-jump {
+  from {background-color: lighten($bgcolor, 10%);}
+  to {background-color: $bgcolor;}
+}
diff --git a/sass/light.scss b/sass/light.scss
@@ -45,3 +45,14 @@ blockquote {
 code {
   background: darken(white, 10%);
 }
+
+:target {
+  background-clip: border-box;
+  animation-name: anchor-jump;
+  animation-duration: 2s;
+  animation-timing-function: ease-out;
+}
+@keyframes anchor-jump {
+  from {background-color: darken($bgcolor, 5%);}
+  to {background-color: white;}
+}