From 14e51391329163fa414ac55d77fdf6da521ab644 Mon Sep 17 00:00:00 2001
From: Danny Guo <dannyguo91@gmail.com>
Date: Sun, 20 May 2018 12:01:56 -0400
Subject: [PATCH] Animate link underlines on hover

There are other CSS-only solutions, but this one works perfectly when
the link spans multiple lines. The other one (that uses :after) only
underlines the part of the link that's on the first line.
---
 static/css/general.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/static/css/general.css b/static/css/general.css
index 33fde51..0c859aa 100644
--- a/static/css/general.css
+++ b/static/css/general.css
@@ -25,8 +25,18 @@ a {
   text-decoration: none;
 }
 
+/* Animated link underline on hover
+   Adapted from https://codepen.io/shshaw/details/pdyJBW */
+a:not(.anchorjs-link):not(.link-button) {
+  background-image: linear-gradient(currentColor, currentColor);
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  background-size: 0% 2px;
+  transition: background-size .3s;
+}
+
 a:not(.anchorjs-link):not(.link-button):hover {
-  text-decoration: underline;
+  background-size: 100% 2px;
 }
 
 body {