From 9d3a0a96470d4446db8ca85336e6886201758aa9 Mon Sep 17 00:00:00 2001
From: Phil Howard <phil@gadgetoid.com>
Date: Sat, 13 Apr 2019 20:49:01 +0100
Subject: [PATCH] Pin legend for #308

---
 common/layout.html        |  2 +-
 common/page.html          | 12 +++++++++
 resources/pinout.scss     | 52 +++++++++++++++++++++++++++++++++++++++
 resources/pinout.scss.css | 47 +++++++++++++++++++++++++++++++++++
 4 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/common/layout.html b/common/layout.html
index a4e8153..b60f18b 100644
--- a/common/layout.html
+++ b/common/layout.html
@@ -5,7 +5,7 @@
 		<title>{{title}}</title>
 		<meta name="description" content="{{description}}" />
 		<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
-		<link href="{{resource_url}}pinout.scss.css" rel="stylesheet">
+		<link href="{{resource_url}}pinout.scss.css?v=4c5780" rel="stylesheet">
 		<link href="{{resource_url}}print.css" rel="stylesheet" media="print">
 		<!-- Build: {{v}} -->
 		{{twittercard}}
diff --git a/common/page.html b/common/page.html
index 1e3206a..37f42ff 100644
--- a/common/page.html
+++ b/common/page.html
@@ -3,6 +3,18 @@
 					<div id="pinbase"></div>
 					{{nav}}
 				</nav>
+				<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>
+					</ul>
+				</div>
 			</div>
 			<div id="content">
 				<div id="interfaces">
diff --git a/resources/pinout.scss b/resources/pinout.scss
index 7b1d71a..1841eb9 100644
--- a/resources/pinout.scss
+++ b/resources/pinout.scss
@@ -591,6 +591,58 @@ nav {
     .uart .pin {background:$color-purple;}
 }
 
+#legend {
+    h2 {
+        margin-top:20px;
+        margin-bottom:5px;
+        font-size:16px;
+    }
+    ul, li {
+        list-style:none;
+        margin:0;
+        padding:0;
+    }
+    li {
+        position:relative;
+        padding-left:25px;
+        line-height:20px;
+        small {
+            font-size:10px;
+        }
+    }
+
+    .pow3v3 .pin {background:$color-yellow;}
+    .pow5v .pin {background:$color-red;}
+    .gpio .pin {background:$color-green;}
+    .i2c .pin {background:$color-blue;}
+    .spi .pin {background:$color-pink;}
+    .uart .pin {background:$color-purple;}
+
+    .pin {
+        display:block;
+        border:1px solid transparent;
+        border-radius:50%;
+        width:16px;
+        height:16px;
+        background:#002B36;
+        position:absolute;
+        left:2px;
+        top:2px;
+
+        &:after {
+            content:'';
+            display:block;
+            border-radius:100%;
+            background:#FDF6E3;
+            position:absolute;
+            left:5px;
+            top:5px;
+            width:6px;
+            height:6px;
+        }
+    }
+}
+
 #pinbase {
     width:58px;
     position:absolute;
diff --git a/resources/pinout.scss.css b/resources/pinout.scss.css
index 02cf581..9a660a0 100644
--- a/resources/pinout.scss.css
+++ b/resources/pinout.scss.css
@@ -451,6 +451,53 @@ nav {
 #gpio .uart .pin {
   background: #6c71c4; }
 
+#legend h2 {
+  margin-top: 20px;
+  margin-bottom: 5px;
+  font-size: 16px; }
+#legend ul, #legend li {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+#legend li {
+  position: relative;
+  padding-left: 25px;
+  line-height: 20px; }
+  #legend li small {
+    font-size: 10px; }
+#legend .pow3v3 .pin {
+  background: #B58900; }
+#legend .pow5v .pin {
+  background: #DC322F; }
+#legend .gpio .pin {
+  background: #859900; }
+#legend .i2c .pin {
+  background: #268BD2; }
+#legend .spi .pin {
+  background: #D33682; }
+#legend .uart .pin {
+  background: #6c71c4; }
+#legend .pin {
+  display: block;
+  border: 1px solid transparent;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  background: #002B36;
+  position: absolute;
+  left: 2px;
+  top: 2px; }
+  #legend .pin:after {
+    content: '';
+    display: block;
+    border-radius: 100%;
+    background: #FDF6E3;
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    width: 6px;
+    height: 6px; }
+
 #pinbase {
   width: 58px;
   position: absolute;