tags: Change style to Bootstrap label

Avoid confusion between tags and link buttons such as those on project
or publication pages.

Close #588
Inspired by #549

layouts/partials/css/academic.css

@@ -991,6 +991,35 @@ footer a#back_to_top i {
   color: #899596;
 }
 
+/*************************************************
+ *  Tags/Labels
+ **************************************************/
+
+.label-default {
+  border: none;
+  color: rgba(0,0,0,.68);
+  background: rgba(0,0,0,.05);
+  font-weight: normal;
+  border-radius: 3px;
+  padding: 5px 10px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.article-tags > .label-default:last-child {
+  margin-right: 0;
+}
+
+.label-default[href]:focus,
+.label-default[href]:hover {
+  background: rgba(0,0,0,.1);
+}
+
+a.label:focus,
+a.label:hover {
+  color: rgba(0,0,0,.68);
+}
+
 /*************************************************
  *  Button Primary: Color Override
  **************************************************/

layouts/partials/tags.html

@@ -3,7 +3,7 @@
 {{ if gt $tagsLen 0 }}
 <div class="article-tags">
   {{ range $k, $v := $.Params.tags }}
-  <a class="btn btn-primary btn-outline" href="{{ ($.Site.GetPage "taxonomyTerm" "tags" .).Permalink }}">{{ . }}</a>
+  <a class="label label-default" href="{{ ($.Site.GetPage "taxonomyTerm" "tags" .).Permalink }}">{{ . }}</a>
   {{ end }}
 </div>
 {{ end }}