Many tweaks, potentially breaking
This commit is contained in:
Phil Howard
parent
0e1f5fe4c8
commit
c1aa262288
|
|
@ -12,65 +12,48 @@ table.pin-functions {width:100%;}
|
|||
table.pin-functions td {width:16.6666%;}
|
||||
|
||||
h2 {font-size:18px;margin-top:20px;}
|
||||
h1,h2,h3,h4,h5 {font-family:Minion, Serif;}
|
||||
#content h1,h2,h3,h4,h5 {font-family:Minion, Serif;}
|
||||
|
||||
.drop-down {
|
||||
float: right;
|
||||
display: block;
|
||||
width: 500px;
|
||||
border:2px solid #D6264E;
|
||||
margin-left:20px;
|
||||
|
||||
.logo {
|
||||
width:250px;
|
||||
font-size:24px;
|
||||
line-height:23px;
|
||||
cursor:pointer;
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:62px;
|
||||
z-index:1;
|
||||
font-weight:600;
|
||||
}
|
||||
.logo a {color:#FFFFFF;}
|
||||
.logo img {float:left;margin:0 13px;}
|
||||
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
|
||||
color:#FFFFFF;
|
||||
}
|
||||
|
||||
img.grayscale {
|
||||
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
|
||||
filter: gray; /* IE6-9 */
|
||||
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
|
||||
}
|
||||
.overlay {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display:none;
|
||||
background:rgba(255,255,255,0.95);
|
||||
padding:10px 0px;
|
||||
clear:both;
|
||||
overflow:hidden;
|
||||
}
|
||||
.overlay-container span {
|
||||
display:block;
|
||||
float:left;
|
||||
}
|
||||
.overlay li {
|
||||
display:block;
|
||||
width:250px;
|
||||
float:left;
|
||||
}
|
||||
.overlay li:nth-child(odd) a {
|
||||
border-right:2px solid #D6264E;
|
||||
}
|
||||
.overlay li:nth-child(4n+1) a,.overlay li:nth-child(4n+2) a {
|
||||
background:rgba(214, 38, 78, 0.05);
|
||||
}
|
||||
.overlay li a, .drop-down span {
|
||||
display:block;
|
||||
font-size:14px;
|
||||
line-height:28px;
|
||||
color:#063541;
|
||||
padding:0 10px;
|
||||
cursor:pointer;
|
||||
width:230px;
|
||||
}
|
||||
.drop-down span {width:60px;}
|
||||
.drop-down span:hover, .drop-down:hover span {
|
||||
background:#D6264E;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.overlay li a:hover {
|
||||
color:#FFFFFF;
|
||||
background:#073642;
|
||||
|
||||
|
||||
#container {
|
||||
width:1000px;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
padding-top:30px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Very top nav
|
||||
*/
|
||||
|
||||
|
||||
.main-nav {
|
||||
line-height:30px;
|
||||
position:absolute;
|
||||
right:0px;
|
||||
top:0px;
|
||||
|
|
@ -99,31 +82,15 @@ img.grayscale {
|
|||
color:#D6264E;
|
||||
}
|
||||
|
||||
nav#gpio {
|
||||
position:relative;
|
||||
width:300px;
|
||||
background:#5F8645;
|
||||
height:680px;
|
||||
float:left;
|
||||
margin-right:200px;
|
||||
}
|
||||
.phys {
|
||||
color:#002B36;
|
||||
font-size:90%;opacity:0.8;
|
||||
position:absolute;
|
||||
left:-26px;
|
||||
}
|
||||
.bottom .phys {
|
||||
text-align:right;
|
||||
left:auto;
|
||||
right:38px;
|
||||
}
|
||||
/*
|
||||
Content Area
|
||||
*/
|
||||
|
||||
#content {
|
||||
float:left;
|
||||
background:#EBE6D3;
|
||||
width:500px;
|
||||
min-height:600px;
|
||||
min-height:746px;
|
||||
padding-bottom:60px;
|
||||
}
|
||||
#content h1 {font-size:30px;}
|
||||
|
|
@ -131,16 +98,151 @@ nav#gpio {
|
|||
#content article {
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
p.intro {
|
||||
color:#268BD2;
|
||||
}
|
||||
p,pre {
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h3 {
|
||||
color:#D33682;
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
article a {color:#859900;text-decoration:underline;}
|
||||
article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}
|
||||
|
||||
/*
|
||||
Drop down nav
|
||||
*/
|
||||
|
||||
#sections {
|
||||
overflow: hidden;
|
||||
}
|
||||
#sections ul, #sections ul li {
|
||||
list-style: none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
#sections > ul {
|
||||
display:block;
|
||||
width:100%;
|
||||
background:#FFF;
|
||||
overflow:hidden;
|
||||
padding-bottom:4px;
|
||||
}
|
||||
#sections > ul > li {
|
||||
width:33.333%;
|
||||
box-sizing:border-box;
|
||||
border-left:4px solid #FFF;
|
||||
}
|
||||
#sections > ul > li > a {
|
||||
padding:21px 20px;
|
||||
color:#fff;
|
||||
display:block;
|
||||
font-size:20px;
|
||||
position: relative;
|
||||
}
|
||||
#sections > ul > li > a:after {
|
||||
content: '';
|
||||
border:10px solid transparent;
|
||||
border-top-color:#FFF;
|
||||
display:block;
|
||||
width:0;
|
||||
height:0;
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:32px;
|
||||
}
|
||||
#sections ul div {
|
||||
display:none;
|
||||
position:absolute;
|
||||
left:0px;
|
||||
width:100%;
|
||||
z-index:1;
|
||||
}
|
||||
/*#sections > ul > li:hover div {display:block;z-index:1;}*/
|
||||
#sections ul div ul {
|
||||
padding:20px;
|
||||
}
|
||||
#sections ul ul li {
|
||||
}
|
||||
#sections ul ul a {
|
||||
color:#FFF;
|
||||
padding:10px;
|
||||
display:inline-block;
|
||||
font-size:18px;
|
||||
}
|
||||
#sections ul li:nth-child(1) a, #sections ul li:nth-child(1) div {background: #D33682;}
|
||||
#sections ul li:nth-child(1) ul a:hover {color: #D33682;}
|
||||
#sections > ul > li:nth-child(2) a, #sections ul li:nth-child(2) div {background: #6c71c4;}
|
||||
#sections ul li:nth-child(2) ul a:hover {color: #6c71c4;}
|
||||
#sections > ul > li:nth-child(3) a, #sections ul li:nth-child(3) div {background: #268BD2;}
|
||||
#sections ul li:nth-child(3) ul a:hover {color: #268BD2;}
|
||||
#sections > ul > li:first-child {
|
||||
border-left:none;
|
||||
}
|
||||
#sections ul li ul a:hover {
|
||||
background:#FFF;
|
||||
}
|
||||
|
||||
/*
|
||||
GPIO nav
|
||||
*/
|
||||
|
||||
nav#gpio {
|
||||
position:relative;
|
||||
width:300px;
|
||||
background:#5F8645;
|
||||
height:806px;
|
||||
float:left;
|
||||
margin-right:200px;
|
||||
border-top-right-radius:50px;
|
||||
border-bottom-right-radius:50px;
|
||||
}
|
||||
nav#gpio:before, nav#gpio:after {
|
||||
content:'';
|
||||
display:block;
|
||||
width:36px;
|
||||
height:36px;
|
||||
background:#FFFFFF;
|
||||
border-radius:50%;
|
||||
border:18px solid #F7DF84;
|
||||
right:20px;
|
||||
top:20px;
|
||||
position: absolute;
|
||||
}
|
||||
nav#gpio:after {
|
||||
top:714px;
|
||||
}
|
||||
.phys {
|
||||
color:#002B36;
|
||||
font-size:11px;
|
||||
opacity:0.8;
|
||||
position:absolute;
|
||||
left:-27px;
|
||||
}
|
||||
.bottom .phys {
|
||||
text-align:right;
|
||||
left:auto;
|
||||
right:37px;
|
||||
}
|
||||
|
||||
nav#gpio ul.top {
|
||||
position:absolute;
|
||||
left:245px;
|
||||
top:17px;
|
||||
top:107px;
|
||||
list-style:none;
|
||||
}
|
||||
nav#gpio ul.bottom {
|
||||
position:absolute;
|
||||
left:6px;
|
||||
top:17px;
|
||||
top:107px;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
|
|
@ -149,7 +251,7 @@ nav#gpio li a {
|
|||
display:block;
|
||||
width:236px;
|
||||
position:relative;
|
||||
font-size:13px;
|
||||
font-size:14px;
|
||||
line-height:29px;
|
||||
height:27px;
|
||||
margin-bottom:2px;
|
||||
|
|
@ -166,12 +268,17 @@ nav#gpio ul.bottom li a {
|
|||
nav#gpio li a small {font-size:11px;}
|
||||
|
||||
|
||||
|
||||
nav#gpio li a:hover,
|
||||
nav#gpio li.active a {
|
||||
background:#063541;
|
||||
/*background:#EBE6D3;*/
|
||||
color:#FFF;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
nav#gpio li a:hover .phys, nav#gpio li.active a .phys{
|
||||
color:#FFFFFF;
|
||||
}
|
||||
|
||||
nav#gpio li.overlay-pin a:hover .phys, nav#gpio li.overlay-pin a .phys {
|
||||
color:#002B36;
|
||||
}
|
||||
|
||||
nav#gpio ul.bottom li a:hover,
|
||||
|
|
@ -240,153 +347,28 @@ nav#gpio span.pin:after {
|
|||
height:7px;
|
||||
font-size:7px;
|
||||
}
|
||||
nav#gpio li.pow5v span.pin {
|
||||
background:#DC322F;
|
||||
}
|
||||
nav#gpio li.pow5v span.pin {background:#DC322F;}
|
||||
nav#gpio li.gpio span.pin {background:#859900;}
|
||||
nav#gpio li.uart span.pin {background:#6c71c4;}
|
||||
nav#gpio li.pow3v3 span.pin {background:#B58900;}
|
||||
nav#gpio li.i2c span.pin {background:#268BD2;}
|
||||
nav#gpio li.spi span.pin {background:#D33682;}
|
||||
nav#gpio li.pin1 span.pin {border-radius:0;}
|
||||
|
||||
nav#gpio li.gpio span.pin {
|
||||
background:#859900;
|
||||
}
|
||||
div#pinbase, div#pinbasebplus {width:72px;position:absolute;left:208px;}
|
||||
|
||||
nav#gpio li.uart span.pin {
|
||||
background:#6c71c4;
|
||||
}
|
||||
|
||||
nav#gpio li.pow3v3 span.pin {
|
||||
background:#B58900;
|
||||
}
|
||||
|
||||
nav#gpio li.i2c span.pin {
|
||||
background:#268BD2;
|
||||
}
|
||||
|
||||
nav#gpio li.spi span.pin {
|
||||
background:#D33682;
|
||||
}
|
||||
/*
|
||||
nav#gpio li.pin2 span.pin,
|
||||
nav#gpio li.pin4 span.pin {
|
||||
background:#DC322F;
|
||||
}
|
||||
|
||||
nav#gpio li.pin3 span.pin,
|
||||
nav#gpio li.pin5 span.pin,
|
||||
nav#gpio li.pin27 span.pin,
|
||||
nav#gpio li.pin28 span.pin {
|
||||
background:#268BD2;
|
||||
}
|
||||
|
||||
nav#gpio li.pin8 span.pin,
|
||||
nav#gpio li.pin10 span.pin,
|
||||
nav#gpio li.pin17 span.pin {
|
||||
background:#B58900;
|
||||
}
|
||||
|
||||
nav#gpio li.pin7 span.pin,
|
||||
nav#gpio li.pin11 span.pin,
|
||||
nav#gpio li.pin13 span.pin,
|
||||
nav#gpio li.pin15 span.pin,
|
||||
nav#gpio li.pin12 span.pin,
|
||||
nav#gpio li.pin16 span.pin,
|
||||
nav#gpio li.pin18 span.pin,
|
||||
nav#gpio li.pin22 span.pin,
|
||||
|
||||
nav#gpio li.pin29 span.pin,
|
||||
nav#gpio li.pin31 span.pin,
|
||||
nav#gpio li.pin33 span.pin,
|
||||
nav#gpio li.pin32 span.pin,
|
||||
nav#gpio li.pin35 span.pin,
|
||||
nav#gpio li.pin36 span.pin,
|
||||
nav#gpio li.pin37 span.pin,
|
||||
nav#gpio li.pin38 span.pin,
|
||||
nav#gpio li.pin40 span.pin {
|
||||
background:#859900;
|
||||
}
|
||||
nav#gpio li.pin19 span.pin,
|
||||
nav#gpio li.pin21 span.pin,
|
||||
nav#gpio li.pin23 span.pin,
|
||||
nav#gpio li.pin24 span.pin,
|
||||
nav#gpio li.pin26 span.pin {
|
||||
background:#D33682;
|
||||
}
|
||||
*/
|
||||
nav#gpio li.pin1 span.pin {
|
||||
border-radius:0;
|
||||
background:#B58900;
|
||||
}
|
||||
div#pinbase {
|
||||
width:72px;
|
||||
height:389px;
|
||||
background:#073642;
|
||||
position:absolute;
|
||||
left:208px;
|
||||
top:10px;
|
||||
top:100px;
|
||||
}
|
||||
div#pinbasebplus {
|
||||
width:72px;
|
||||
height:215px;
|
||||
background:#184753;
|
||||
position:absolute;
|
||||
left:208px;
|
||||
top:401px;
|
||||
}
|
||||
.logo {
|
||||
width:350px;
|
||||
font-size:28px;
|
||||
line-height:45px;
|
||||
color:#888888;
|
||||
margin-bottom:5px;
|
||||
cursor:pointer;
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:5px;
|
||||
}
|
||||
.logo a {
|
||||
color:#888888;
|
||||
}
|
||||
.logo img {float:left;margin:0 13px;
|
||||
|
||||
}
|
||||
.logo span {
|
||||
color:#D6264E;
|
||||
}
|
||||
.logo span.out {
|
||||
color:#5FB12D;
|
||||
}
|
||||
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
|
||||
color:#5FB12D;
|
||||
top:491px;
|
||||
}
|
||||
.pin27, .pin28 {margin-top:16px;}
|
||||
p.intro {
|
||||
color:#268BD2;
|
||||
}
|
||||
p,pre {
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h3 {
|
||||
color:#D33682;
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
}
|
||||
#container {
|
||||
width:1000px;
|
||||
margin:0 auto;
|
||||
margin-top:10px;
|
||||
position:relative;
|
||||
padding-top:70px;
|
||||
}
|
||||
.overlay-container {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
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 {
|
||||
float:right;
|
||||
list-style:none;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,31 @@
|
|||
jQuery(document).ready(function(){
|
||||
var overlay = $('.drop-down .overlay');
|
||||
var overlay_slideUp;
|
||||
var dropdowns = $('#sections ul li div');
|
||||
|
||||
$('pre').addClass('prettyprint').addClass('linenums');
|
||||
|
||||
window.prettyPrint&&prettyPrint();
|
||||
|
||||
$('.drop-down').on('click',function(e){
|
||||
e.stopPropagation();
|
||||
overlay.slideDown(100);
|
||||
});
|
||||
|
||||
$('#container').on('click',function(){
|
||||
overlay.slideUp(100);
|
||||
dropdowns.slideUp(100);
|
||||
})
|
||||
|
||||
$('.drop-down').hover(function(){
|
||||
$('#sections > ul > li').hover(function(){
|
||||
var dropdown = $(this).find('div');
|
||||
clearTimeout(overlay_slideUp);
|
||||
overlay_slideUp = setTimeout(function(){overlay.slideDown(100);}, 200);
|
||||
if(dropdowns.filter(':visible').length){
|
||||
dropdowns.hide();
|
||||
dropdown.show();
|
||||
}
|
||||
else
|
||||
{
|
||||
overlay_slideUp = setTimeout(function(){dropdowns.slideUp(100);dropdown.slideDown(100);}, 300);
|
||||
}
|
||||
},function(){
|
||||
var dropdown = $(this).find('div');
|
||||
clearTimeout(overlay_slideUp);
|
||||
overlay_slideUp = setTimeout(function(){overlay.slideUp(100);}, 500);
|
||||
overlay_slideUp = setTimeout(function(){dropdown.slideUp(100);}, 500);
|
||||
});
|
||||
|
||||
$.gaat({
|
||||
|
|
|
|||
|
|
@ -31,21 +31,31 @@
|
|||
{{lang_links}}
|
||||
</ul>
|
||||
<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><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 about Pi pins and add-ons <i class="fa fa-arrow-right"></i></span>
|
||||
<div class="drop-down">
|
||||
<span>Select…</span>
|
||||
<ul class="overlay">
|
||||
{{overlays}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nav id="gpio">
|
||||
<div id="pinbase"></div>
|
||||
<div id="pinbasebplus"></div>
|
||||
{{nav}}
|
||||
</nav>
|
||||
<div id="content">
|
||||
<div id="sections">
|
||||
<ul>
|
||||
<li><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
|
||||
<div><ul>
|
||||
{{overlays}}
|
||||
</ul></div>
|
||||
</li>
|
||||
<li><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
|
||||
<div><ul>
|
||||
{{overlays}}
|
||||
</ul></div>
|
||||
</li>
|
||||
<li><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
|
||||
<div><ul>
|
||||
{{overlays}}
|
||||
</ul></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="pages">
|
||||
{{content}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue