diff --git a/resources/pinout.css b/resources/pinout.css
index 29d72dd..5884163 100644
--- a/resources/pinout.css
+++ b/resources/pinout.css
@@ -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;
diff --git a/resources/pinout.js b/resources/pinout.js
index 331c353..1cba570 100644
--- a/resources/pinout.js
+++ b/resources/pinout.js
@@ -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({
diff --git a/src/en/template/layout.html b/src/en/template/layout.html
index 618468e..0a55c43 100755
--- a/src/en/template/layout.html
+++ b/src/en/template/layout.html
@@ -31,21 +31,31 @@
{{lang_links}}
-
-
Learn about Pi pins and add-ons
-
-
