Added support for alt functions, improved CSS/layout

description/index.md

@@ -1,18 +1,18 @@
 #Pinout!
 
-###The comprehensive Raspberry Pi Pinout guide for the Raspberry Pi, now with Model B+ and Pi 2
+###The comprehensive Raspberry Pi GPIO Pinout guide, now with Raspberry Pi Model B+ and Raspberry Pi 2
 
-Pinout isn't meant to be printable, but it's a great quick-reference and a comprehensive starter guide to learning about your Raspberry Pi's GPIO pins.
+This GPIO Pinout isn't meant to be printable, but it's both a great quick-reference and a comprehensive guide to your Raspberry Pi's GPIO pins.
 
 ##What do these numbers mean, anyway?
 
-* BCM - Broadcom pin number, these are the ones you probably want to use with RPi.GPIO
+* BCM - Broadcom pin number, commonly called "GPIO", these are the ones you probably want to use with RPi.GPIO
 * WiringPi - Wiring Pi pin number, for Gordon's Wiring Pi library
 * Physical - Number corresponding to the pins physical location on the header
 
 ##Pi 2+
 
-To celebrate the launch of the Pi 2 and the new Pi-enthusiasts it'll bring, Pinout has been updated to be cleaner, more comprehensive and more accurate.
+To celebrate the launch of the Pi 2 and the new Pi-enthusiasts it'll bring, Pinout has been updated to be cleaner, more comprehensive and more accurate and will continue to be improved.
 
 ##Model B+
 

generate-html.py

@@ -151,8 +151,13 @@ def load_md(filename):
 	except IOError:
 		return ''
 
-def render_pin_text(pin_num, pin_url, pin_name, pin_subtext):
-	return '<article class="{}"><h1>{}</h1>{}{}</article>'.format(pin_url,pin_name,pin_subtext,load_md('description/pins/pin-{}.md'.format(pin_num)))
+def render_pin_text(pin_num, pin_url, pin_name, pin_functions, pin_subtext):
+	return '<article class="{pin_url}"><h1>{pin_name}</h1>{pin_functions}{pin_subtext}{pin_text}</article>'.format(
+		pin_url=pin_url,
+		pin_name=pin_name,
+		pin_functions=pin_functions,
+		pin_subtext=pin_subtext,
+		pin_text=load_md('description/pins/pin-{}.md'.format(pin_num)))
 
 def render_overlay_page(overlay):
 	if overlay == None:
@@ -197,10 +202,44 @@ def render_pin_page(pin_num):
 	if 'description' in pin:
 		pin_text_name = '{} ({})'.format(pin_text_name, pin['description'])
 
+	fn_headings = []
+	fn_functions = []
+	pin_functions = ''
+	if 'functions' in pin:
+		for x in range(6):
+			fn_headings.append( 'Alt' + str(x) )
+
+			function = ''
+			if 'alt' + str(x) in pin['functions']:
+				function = pin['functions']['alt' + str(x)]
+
+			fn_functions.append( function )
+
+		pin_functions = '''<table class="pin-functions">
+		<thead>
+			<tr>
+				<th>{headings}</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>{functions}</td>
+			</tr>
+		</tbody>
+		</table>'''.format(headings='</th><th>'.join(fn_headings), functions='</td><td>'.join(fn_functions))
+
+
+
 
 	pin_url = slugify('pin{}_{}'.format(pin_num,pin_url))
 
-	pin_text = render_pin_text(pin_num,pin_url,pin_text_name,'<ul><li>{}</li></ul>'.format('</li><li>'.join(pin_subtext)))
+	pin_text = render_pin_text(
+		pin_num,
+		pin_url,
+		pin_text_name,
+		pin_functions,
+		'<ul><li>{}</li></ul>'.format('</li><li>'.join(pin_subtext))
+		)
 	#if pin_text != None:
 	return (pin_url, pin_text, pin_text_name) #pages[pin_url] = pin_text
 

resources/pinout.css

@@ -8,6 +8,9 @@ table td, table th {border:1px solid #073642;padding:5px;}
 table th {background:#073642;color:#EBE6D3;}
 table * {text-align:left;font-size:13px;}
 
+table.pin-functions {width:100%;}
+table.pin-functions td {width:16.6666%;}
+
 h2 {font-size:18px;margin-top:20px;}
 
 .main-nav {
@@ -253,8 +256,9 @@ div#pinbasebplus {
 	top:401px;
 }
 .logo {
-	width:250px;
-	font-size:34px;
+	width:350px;
+	font-size:28px;
+	line-height:45px;
 	color:#888888;
 	margin-bottom:5px;
 	cursor:pointer;
@@ -262,6 +266,9 @@ div#pinbasebplus {
 	left:0px;
 	top:5px;
 }
+.logo a {
+	color:#888888;
+}
 .logo img {float:left;position:relative;top:0px;margin:0 13px;
 	-moz-transform:rotate(-45deg);
 	-webkit-transform:rotate(-45deg);
@@ -274,6 +281,9 @@ div#pinbasebplus {
 .logo span.out {
 	color:#5FB12D;
 }
+.logo a:hover span, .logo a:hover, .logo a:hover span.out {
+	color:#5FB12D;
+}
 .pin27, .pin28 {margin-top:16px;}
 p.intro {
 	color:#268BD2;
@@ -298,8 +308,11 @@ h3 {
 .overlay-container {
 	position: absolute;
 	right: 0px;
-	top: 40px;
+	top: 35px;
+	font-size:20px;
+	color:#D6264E;
 }
+.overlay-container select {font-size:20px;}
 article a {color:#859900;text-decoration:underline;}
 article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}
 ul.legend {

template/layout.html

@@ -26,9 +26,9 @@
 			<li><a href="https://twitter.com/gadgetoid"><i class="fa fa-twitter"></i> @Gadgetoid</a></li>
 			<li><a href="https://github.com/Gadgetoid/Pinout2"><i class="fa fa-github"></i> Contribute</a></li>
 		</ul>
-		<h1 class="logo"><a href="/pinout"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /><span>Pi</span>n<span class="out">out</span></a></h1>
+		<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/pinout"><img src="{{resource_url}}pinout-logo.png" style="top:8px;" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
 		<div class="overlay-container">
-			<span>Learn more about:</span>
+			<span>Learn about Pi add-ons and pin functions <i class="fa fa-arrow-right"></i></span>
 			<select class="overlay">
 				<option value="">&hellip;</option>
 				{{overlays}}