extend navigation highlighting to taxonomy list pages (#220)

This adds the same kind of navigation highlighting as the PRs #191 and #211
when on [taxonomy list pages](https://gohugo.io/content-management/taxonomies/#default-destinations)
(e.g. `/categories/programming/` or `/tags/hugo/`), i.e. the selected tag or
category will be highlighted in the color of the chosen style (default, blue,
green, etc.)

10 files changed, 75 insertions, 12 deletions

diff --git a/layouts/partials/widgets/categories.html b/layouts/partials/widgets/categories.html
index 2242bab..0a7e126 100644
--- a/layouts/partials/widgets/categories.html
+++ b/layouts/partials/widgets/categories.html
@@ -4,17 +4,20 @@
 <div class="panel panel-default sidebar-menu">
 
     <div class="panel-heading">
-      <h3 class="panel-title">{{ i18n "categoriesTitle" }}</h3>
+        <h3 class="panel-title">{{ i18n "categoriesTitle" }}</h3>
     </div>
 
     <div class="panel-body">
         <ul class="nav nav-pills nav-stacked">
+            {{ $current := . }}
             {{ range $name, $items := .Site.Taxonomies.categories }}
-            <li><a href="{{ $.Site.BaseURL }}categories/{{ $name | urlize | lower }}">{{ $name }} ({{ len $items }})</a>
+            <li{{ if eq $current.RelPermalink ($name | urlize | lower | printf "/categories/%s/") }} class="active"{{ end }}>
+                <a href="{{ $.Site.BaseURL }}categories/{{ $name | urlize | lower }}">{{ $name }} ({{ len $items }})</a>
             </li>
             {{ end }}
         </ul>
     </div>
+
 </div>
 {{ end }}
 {{ end }}
diff --git a/layouts/partials/widgets/tags.html b/layouts/partials/widgets/tags.html
index 5f66d90..abe986a 100644
--- a/layouts/partials/widgets/tags.html
+++ b/layouts/partials/widgets/tags.html
@@ -2,18 +2,22 @@
 {{ if isset .Site.Taxonomies "tags" }}
 {{ if not (eq (len .Site.Taxonomies.tags) 0) }}
 <div class="panel sidebar-menu">
+
     <div class="panel-heading">
-      <h3 class="panel-title">{{ i18n "tagsTitle" }}</h3>
+        <h3 class="panel-title">{{ i18n "tagsTitle" }}</h3>
     </div>
 
     <div class="panel-body">
         <ul class="tag-cloud">
+            {{ $current := . }}
             {{ range $name, $items := .Site.Taxonomies.tags }}
-            <li><a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"><i class="fas fa-tags"></i> {{ $name }}</a>
+            <li{{ if eq $current.RelPermalink ($name | urlize | lower | printf "/tags/%s/") }} class="active"{{ end }}>
+                <a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"><i class="fas fa-tags"></i> {{ $name }}</a>
             </li>
             {{ end }}
         </ul>
     </div>
+
 </div>
 {{ end }}
 {{ end }}
diff --git a/static/css/style.blue.css b/static/css/style.blue.css
index 31e8a66..697579b 100644
--- a/static/css/style.blue.css
+++ b/static/css/style.blue.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #467fbf;
-  text-decoration: none;
   border-color: #467fbf;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #467fbf;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.default.css b/static/css/style.default.css
index 607c181..0c72d1b 100644
--- a/static/css/style.default.css
+++ b/static/css/style.default.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #38a7bb;
-  text-decoration: none;
   border-color: #38a7bb;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #38a7bb;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.green.css b/static/css/style.green.css
index 33887b3..cf1a5ee 100644
--- a/static/css/style.green.css
+++ b/static/css/style.green.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #6aae7a;
-  text-decoration: none;
   border-color: #6aae7a;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #6aae7a;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.marsala.css b/static/css/style.marsala.css
index bd71d57..08af88a 100644
--- a/static/css/style.marsala.css
+++ b/static/css/style.marsala.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #955251;
-  text-decoration: none;
   border-color: #955251;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #955251;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.pink.css b/static/css/style.pink.css
index b6ceb7c..b5faa8f 100644
--- a/static/css/style.pink.css
+++ b/static/css/style.pink.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #c27baa;
-  text-decoration: none;
   border-color: #c27baa;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #c27baa;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.red.css b/static/css/style.red.css
index fe45297..cf4710f 100644
--- a/static/css/style.red.css
+++ b/static/css/style.red.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #da4d4d;
-  text-decoration: none;
   border-color: #da4d4d;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #da4d4d;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.turquoise.css b/static/css/style.turquoise.css
index 4ef479d..cfdc204 100644
--- a/static/css/style.turquoise.css
+++ b/static/css/style.turquoise.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #4fbfa8;
-  text-decoration: none;
   border-color: #4fbfa8;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #4fbfa8;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;
diff --git a/static/css/style.violet.css b/static/css/style.violet.css
index 4647871..e71222f 100644
--- a/static/css/style.violet.css
+++ b/static/css/style.violet.css
@@ -983,12 +983,19 @@ fieldset[disabled] .btn-template-primary.active {
   letter-spacing: 0.08em;
   font-weight: 700;
   font-size: 12px;
+  text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
   color: #986dbd;
-  text-decoration: none;
   border-color: #986dbd;
 }
+.panel.sidebar-menu ul.tag-cloud li.active a {
+  color: #FFFFFF;
+  background-color: #986dbd;
+}
+.panel.sidebar-menu ul.tag-cloud li.active a:hover {
+  color: #FFFFFF;
+}
 .panel.sidebar-menu ul.popular,
 .panel.sidebar-menu ul.recent {
   list-style: none;