From cf562a31666ea9540c0cbb7745d1eae71f5a81a3 Mon Sep 17 00:00:00 2001
From: Peter Blazejewicz <peterblazejewicz@users.noreply.github.com>
Date: Sat, 28 Sep 2019 22:20:12 +0200
Subject: [PATCH] Make legend entries into links. See #308

- links into category if available
- if there is no directory, links to the first relevant entry within
  page (e.g. 5V category)

Thanks!
---
 common/page.html          | 49 +++++++++++++++++++++++++++++++++------
 resources/pinout.scss     | 10 +++++++-
 resources/pinout.scss.css |  6 ++++-
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/common/page.html b/common/page.html
index 37f42ff..51e4487 100644
--- a/common/page.html
+++ b/common/page.html
@@ -6,13 +6,48 @@
 				<div id="legend">
 					<h2>Legend</h2>
 					<ul>
-						<li class="gpio"><span class="pin"></span> GPIO <small>(General Purpose IO)</small></li>
-						<li class="spi"><span class="pin"></span> SPI <small>(Serial Peripheral Interface)</small></li>
-						<li class="i2c"><span class="pin"></span> I<sup>2</sup>C <small>(Inter-integrated Circuit)</small></li>
-						<li class="uart"><span class="pin"></span> UART <small>(Universal Asyncronous Receiver/Transmitter)</small></li>
-						<li class="gnd"><span class="pin"></span> Ground</li>
-						<li class="pow5v"><span class="pin"></span> 5v <small>(Power)</small></li>
-						<li class="pow3v3"><span class="pin"></span> 3v <small>(Power)</small></li>
+						<li class="gpio">
+							<a href="/pinout/wiringpi" title="GPIO (General Purpose IO)">
+								<span class="default"></span>
+								<span class="pin"></span> GPIO <small>(General Purpose IO)</small>
+							</a>
+						</li>
+						<li class="spi">
+							<a href="/pinout/spi" title="SPI (Serial Peripheral Interface)">
+								<span class="default"></span>
+								<span class="pin"></span> SPI <small>(Serial Peripheral Interface)</small>
+							</a>
+						</li>
+						<li class="i2c">
+							<a href="/pinout/i2c" title="I2C (Inter-integrated Circuit)">
+								<span class="default"></span>
+								<span class="pin"></span> I<sup>2</sup>C <small>(Inter-integrated Circuit)</small>
+							</a>
+						</li>
+						<li class="uart">
+							<a href="/pinout/uart" title="UART (Universal Asyncronous Receiver/Transmitter)">
+								<span class="default"></span>
+								<span class="pin"></span> UART <small>(Universal Asyncronous Receiver/Transmitter)</small>
+							</a>
+						</li>
+						<li class="gnd">
+							<a href="/pinout/ground" title="Ground">
+								<span class="default"></span>
+								<span class="pin"></span> Ground
+							</a>
+						</li>
+						<li class="pow5v">
+							<a href="/pinout/pin2_5v_power" title="5v (Power)">
+								<span class="default"></span>
+								<span class="pin"></span> 5v <small>(Power)</small>
+							</a>
+						</li>
+						<li class="pow3v3">
+							<a href="/pinout/pin1_3v3_power" title="3.3v (Power)">
+								<span class="default"></span>
+								<span class="pin"></span> 3.3v <small>(Power)</small>
+							</a>
+						</li>
 					</ul>
 				</div>
 			</div>
diff --git a/resources/pinout.scss b/resources/pinout.scss
index 1841eb9..96ce1a6 100644
--- a/resources/pinout.scss
+++ b/resources/pinout.scss
@@ -604,13 +604,21 @@ nav {
     }
     li {
         position:relative;
-        padding-left:25px;
+        margin-bottom:2px;
         line-height:20px;
         small {
             font-size:10px;
         }
     }
 
+    a {
+        padding: 0 12px 0 30px;
+    }
+
+    li, a {
+        color:$overlay-pin-fg;
+    }
+
     .pow3v3 .pin {background:$color-yellow;}
     .pow5v .pin {background:$color-red;}
     .gpio .pin {background:$color-green;}
diff --git a/resources/pinout.scss.css b/resources/pinout.scss.css
index 9a660a0..227c448 100644
--- a/resources/pinout.scss.css
+++ b/resources/pinout.scss.css
@@ -461,10 +461,14 @@ nav {
   padding: 0; }
 #legend li {
   position: relative;
-  padding-left: 25px;
+  margin-bottom: 2px;
   line-height: 20px; }
   #legend li small {
     font-size: 10px; }
+#legend a {
+  padding: 0 12px 0 30px; }
+#legend li, #legend a {
+  color: #063541; }
 #legend .pow3v3 .pin {
   background: #B58900; }
 #legend .pow5v .pin {