Pin legend for #308
This commit is contained in:
parent
49acaa5de3
commit
9d3a0a9647
@ -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}}
|
||||
|
@ -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">
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user