Add animated link highlight

flake.nix

@@ -38,7 +38,7 @@
         {
           packages.default = with pkgs; stdenv.mkDerivation {
             pname = "personal-site";
-            version = "2022-12-21";
+            version = "2023-01-27";
             src = gitignoreSource ./.;
             nativeBuildInputs = [ optimize-images update-date zola ];
             configurePhase = ''

sass/style/parts/_misc.scss

@@ -11,12 +11,6 @@
   background-color: var(--primary-color);
 }
 
-::-moz-selection {
-  background: var(--primary-color);
-  color: var(--hover-color);
-  text-shadow: none;
-}
-
 ::selection {
   background: var(--primary-color);
   color: var(--hover-color);
@@ -40,14 +34,34 @@ blockquote {
 }
 
 a {
-  border-bottom: 3px solid var(--primary-color);
   color: inherit;
   text-decoration: none;
+  position: relative;
+  transition: all .2s ease-in;
 }
 
 a:hover {
-  background-color: var(--primary-color);
   color: var(--hover-color);
+  transition: all .2s ease;
+}
+
+a::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  z-index: -1;
+  bottom: -3px;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: var(--primary-color);
+  transition: all .2s ease-in;
+}
+
+a:hover::after {
+  height: 100%;
+  transform: translateY(-3px);
+  transition: all .2s ease;
 }
 
 time {