Add Pi orientation graphic to legend

common/page.html

@@ -4,6 +4,7 @@
 					{{nav}}
 				</nav>
 				<div id="legend">
+					<div>
 						<h2>Legend</h2>
 						<p>Orientate your Pi with the GPIO on the right and the HDMI port on the left.</p>
 						<ul>
@@ -51,6 +52,8 @@
 							</li>
 						</ul>
 					</div>
+					<img src="{{resource_url}}pi-orientation.png" />
+				</div>
 			</div>
 			<div id="content">
 				<div id="interfaces">

resources/pinout.scss

@@ -602,6 +602,14 @@ nav {
         margin-top:5px;
         margin-bottom:5px;
     }
+    div {
+        width: 300px;
+        float: left;
+        display: block;
+    }
+    img {width:196px;height:auto;margin-top:4px;
+        float: left;
+        display: block;}
     p {
         font-size:$base-font-size * 0.7;
         padding: 0 10px 10px 0;

resources/pinout.scss.css

@@ -459,6 +459,16 @@ nav {
 #legend h2 {
   margin-top: 5px;
   margin-bottom: 5px; }
+#legend div {
+  width: 300px;
+  float: left;
+  display: block; }
+#legend img {
+  width: 196px;
+  height: auto;
+  margin-top: 4px;
+  float: left;
+  display: block; }
 #legend p {
   font-size: 0.84em;
   padding: 0 10px 10px 0; }