Link hover style (#152)

* added teal for hover and active state

* added color for active state

* fixed error

* Remove visited link style

All links in a documentation will be visited very soon. The value of
coloring them different (especially the same as the hover style) is
therefore questionable.

* Reduce colors for link style

The theme is already using quite a few colors. In an attempt to
consolidate all these colors and reduce the number of used colors, the
teal on hover is now replaced with the underline/border color (green).

On hover and active, line and text are now of the same color. This feels
a bit cleaner to me.

* Use underline style insread of border

The border was too far way and is influenced by the padding. This is not
really what we wanted.

* Remove underline from logo link

* Add underline to first level main toc links again

* Close underline gap in pager links

* Remove underline from source buttons

* Remove underline from footer links

Co-authored-by: PaarthAgarwal <[email protected]>

sass/_component_footer.scss

@@ -1,5 +1,5 @@
 footer {
 	a {
-		border: none;
+		text-decoration: none;
 	}
 }

sass/_component_header.scss

@@ -9,7 +9,7 @@ header {
     .navbar-brand {
         display: flex;
         padding: 0;
-        border: none;
+        text-decoration: none;
         margin-right: 0;
         font-size: $h3-font-size;
         line-height: 1.2;

sass/_component_link.scss

@@ -1,15 +1,18 @@
 a {
-	border-bottom: 2px solid;
-	color: $link-color;
-	border-color: $link-border-color;
+    color: $link-color;
+    text-decoration: 2px solid underline;
+    text-decoration-color: $link-border-color;
+    text-underline-offset: 3px;
 
-	&:hover {
-		color: $link-hover-color;
-		border-color: $link-border-hover-color;
-		text-decoration: none;
-	}
+    &:focus,
+    &:hover {
+        color: $link-hover-color;
+        // This is necessary because of some weird `hover` mixin in bootstrap.
+        text-decoration: 2px solid underline;
+    }
 
-	&:visited {
-		color: $link-hover-color;
-	}
+    &:active {
+        color: $link-active-color;
+        text-decoration: 2px solid underline;
+    }
 }

sass/_component_toc.scss

@@ -5,15 +5,14 @@
         display: inline-block;
         line-height: 1.25;
         padding: ($spacer / 4) 0;
-        text-decoration: none;
     }
 
     li {
         margin: $size-1 0;
     }
 
     li:not(.toctree-l1) a {
-        border: none;
+        text-decoration: none;
     }
 
     ul {

sass/_variables.scss

@@ -13,8 +13,11 @@ $gray-800:          #313131;
 $gray-900:          #212121;
 $black:             #000000;
 
+$teal:              #007d7e;
 $indigo:            #251657;
 $bright-green: 		#3beccd;
+$bright-green-700: darken($bright-green, 15%);
+$bright-green-900: darken($bright-green, 30%);
 
 $primary:           $indigo;
 $success:           #a456c9;
@@ -25,11 +28,14 @@ $search:            #ffe69c;
 
 
 $link-color: $primary;
-$link-hover-color: darken($link-color, 15%);
 $link-border-color: $bright-green;
-$link-border-hover-color: darken($bright-green, 15%);
+$link-hover-color: $bright-green-700;
+$link-active-color: $bright-green-900;
+$link-border-active-color: $bright-green-900;
+
 $link-alternate-color: #ffffff;
 $link-alternate-hover-color: darken($link-alternate-color, 15%);
+
 $table-bg:          $white;
 
 $yiq-contrasted-threshold: 160;

sphinx_wagtail_theme/pager.html

@@ -2,12 +2,12 @@
 <nav aria-label="Page navigation" class="py-4 my-5 clearfix font-weight-bold border-top">
     {%- if prev %}
     <a class="float-left" href="{{ prev.link|e }}" title="{{ _('Previous') }}">
-        <span aria-hidden="true" class="mr-1">←</span> {{ prev.title }}
+        <span aria-hidden="true">←&nbsp;</span>{{ prev.title }}
     </a>
     {%- endif %}
     {%- if next %}
     <a class="float-right" href="{{ next.link|e }}" title="{{ _('Next') }}">
-        {{ next.title }} <span aria-hidden="true" class="ml-1">→</span>
+        {{ next.title }} <span aria-hidden="true">&nbsp;→</span>
     </a>
     {%- endif %}
 </nav>

sphinx_wagtail_theme/source-buttons.html

@@ -1,12 +1,12 @@
 <div>
     {%- if theme_github_url %}
-        <a class="btn btn-sm btn-light" href="{{ theme_github_url }}{{ pagename }}{{ page_source_suffix }}" rel="nofollow">
+        <a class="btn btn-sm btn-light text-decoration-none" href="{{ theme_github_url }}{{ pagename }}{{ page_source_suffix }}" rel="nofollow">
             <span class="btn-icon"><span class="fab fa-github"></span></span>
             <span class="btn-text">{{ _('Edit on GitHub') }}</span>
         </a>
     {%- endif %}
     {%- if show_source and has_source and sourcename %}
-        <a class="btn btn-sm btn-light" href="{{ pathto('_sources/' + sourcename, true)|e }}" rel="nofollow">
+        <a class="btn btn-sm btn-light text-decoration-none" href="{{ pathto('_sources/' + sourcename, true)|e }}" rel="nofollow">
             <span class="btn-icon"><span class="fas fa-code"></span></span>
             <span class="btn-text">View source</span>
         </a>