Make the links prettier

Author: jyn514

templates/about-base.html

@@ -1,14 +1,15 @@
 {% extends "base.html" %}
 {% block header %}
 <div class="cratesfyi-package-container">
-<div class="container">
+<div class="container about">
+	<h3 id="crate-title">Docs.rs documentation</h3>
 	<div class="pure-menu pure-menu-horizontal">
 	<ul class="pure-menu-list">
-		<li><a href="/about">About</a></li>
-		<li><a href="/about/badges">Badges</a></li>
-		<li><a href="/about/builds">Builds</a></li>
-		<li><a href="/about/metadata">Metadata</a></li>
-		<li><a href="/about/redirections">Redirections</a></li>
+		{{ macros::active_link(expected="index", href="/about", text="About") }}
+		{{ macros::active_link(expected="badges", href="/about/badges", text="Badges") }}
+		{{ macros::active_link(expected="builds", href="/about/builds", text="Builds") }}
+		{{ macros::active_link(expected="metadata", href="/about/metadata", text="Metadata") }}
+		{{ macros::active_link(expected="redirections", href="/about/redirections", text="Redirections") }}
 	</ul>
 	</div>
 </div>

templates/macros.html

@@ -2,6 +2,14 @@
     Makes the appropriate JS imports for highlighting
     * `languages` An array of strings where each is a valid highlight.js language
 #}
+{% macro active_link(expected, href, text) %}
+    <li class="pure-menu-item">
+        <a class="pure-menu-link {% if active_tab == expected %} pure-menu-active {% endif %}" href="{{ href }}">
+        {{ text }}
+        </a>
+    </li>
+{% endmacro active_link %}
+
 {% macro highlight_js(languages) %}
     {# Load the highlight script #}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js" type="text/javascript"