villivateur
/
pinout.vvzero.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Pi orientation graphic to legend

This commit is contained in:
Phil Howard 2020-08-20 00:25:28 +01:00
parent 77d8f24149
commit 6d1171cb49
4 changed files with 67 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
common/page.html
View File

@ -4,52 +4,55 @@
{{nav}}
</nav>
<div id="legend">
<h2>Legend</h2>
<p>Orientate your Pi with the GPIO on the right and the HDMI port on the left.</p>
<ul>
<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/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/3v3_power" title="3.3v (Power)">
<span class="default"></span>
<span class="pin"></span> 3.3v <small>(Power)</small>
</a>
</li>
</ul>
<div>
<h2>Legend</h2>
<p>Orientate your Pi with the GPIO on the right and the HDMI port on the left.</p>
<ul>
<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/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/3v3_power" title="3.3v (Power)">
<span class="default"></span>
<span class="pin"></span> 3.3v <small>(Power)</small>
</a>
</li>
</ul>
</div>
<img src="{{resource_url}}pi-orientation.png" />
</div>
</div>
<div id="content">

BIN
resources/pi-orientation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

8
resources/pinout.scss
View File

@ -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;

10
resources/pinout.scss.css
View File

@ -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; }