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

Pin legend for #308

Browse Source
This commit is contained in:
Phil Howard 2019-04-13 20:49:01 +01:00
parent 49acaa5de3
commit 9d3a0a9647
4 changed files with 112 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/layout.html
View File

@ -5,7 +5,7 @@
<title>{{title}}</title> <title>{{title}}</title>
<meta name="description" content="{{description}}" /> <meta name="description" content="{{description}}" />
<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' /> <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"> <link href="{{resource_url}}print.css" rel="stylesheet" media="print">
<!-- Build: {{v}} --> <!-- Build: {{v}} -->
{{twittercard}} {{twittercard}}

12
common/page.html
View File

@ -3,6 +3,18 @@
<div id="pinbase"></div> <div id="pinbase"></div>
{{nav}} {{nav}}
</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>
<div id="content"> <div id="content">
<div id="interfaces"> <div id="interfaces">

52
resources/pinout.scss
View File

@ -591,6 +591,58 @@ nav {
.uart .pin {background:$color-purple;} .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 { #pinbase {
width:58px; width:58px;
position:absolute; position:absolute;

47
resources/pinout.scss.css
View File

@ -451,6 +451,53 @@ nav {
#gpio .uart .pin { #gpio .uart .pin {
background: #6c71c4; } 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 { #pinbase {
width: 58px; width: 58px;
position: absolute; position: absolute;