CSS and structure tweaks and tidying
This commit is contained in:
Phil Howard
parent
4ddc00df90
commit
fe0cda3e8a
|
|
@ -22,8 +22,6 @@
|
|||
</div>
|
||||
<div id="boards"><ul>{{content}}</ul></div>
|
||||
<div id="lang">
|
||||
<ul class="lang-nav">
|
||||
{{lang_links}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
</head>
|
||||
<body class="{{body_class}}">
|
||||
<div id="container">
|
||||
<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><img src="{{resource_url}}pinout-logo.png" /><span>Raspberry Pi</span>n<span class="out">out</span></a></h1>
|
||||
<h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><img src="{{resource_url}}pinout-logo.png" />Raspberry Pi Pinout</a></h1>
|
||||
|
||||
{{main_content}}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,6 @@
|
|||
</div>
|
||||
{{content}}
|
||||
<div id="lang">
|
||||
<ul class="lang-nav">
|
||||
{{lang_links}}
|
||||
</ul>
|
||||
{{lang_links}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -460,7 +460,7 @@ def get_lang_urls(src):
|
|||
img_css = ' class="grayscale"'
|
||||
url = alternate_urls[url_lang][src]
|
||||
urls.append(
|
||||
'<li><a href="{url}" rel="alternate" hreflang="{lang}"><img{css} src="{resource_url}{lang}.png" /></a>'.format(
|
||||
'<a href="{url}" rel="alternate" hreflang="{lang}"><img{css} src="{resource_url}{lang}.png" /></a>'.format(
|
||||
lang=url_lang,
|
||||
url=url,
|
||||
resource_url=resource_url,
|
||||
|
|
|
|||
|
|
@ -1,21 +1,24 @@
|
|||
$color-purple: #6c71c4;
|
||||
$color-pink: #C32672;
|
||||
$color-pink: #D33682;
|
||||
$color-green: #859900;
|
||||
$color-red: #DC322F;
|
||||
$color-yellow: #B58900;
|
||||
$color-blue: #268BD2;
|
||||
|
||||
$color-dark: #073642;
|
||||
|
||||
$color-content-bg: #EBE6D3;
|
||||
|
||||
ul, li, a, body, h1, h2, h3, h4, h5, h6, p {margin:0;padding:0;text-decoration:none;}
|
||||
|
||||
body {font-family:'Avenir', sans-serif;font-weight:500;}
|
||||
|
||||
|
||||
table {
|
||||
margin:20px 0;border-collapse:collapse;
|
||||
text-align:left;font-size:13px;
|
||||
|
||||
td, th {border:1px solid #073642;padding:5px;}
|
||||
th {background:#073642;color:#EBE6D3;}
|
||||
td, th {border:1px solid $color-dark;padding:5px;}
|
||||
th {background:$color-dark;color:$color-content-bg;}
|
||||
|
||||
&.details {
|
||||
width:100%;
|
||||
|
|
@ -51,7 +54,7 @@ table {
|
|||
|
||||
a {color:#FFFFFF;}
|
||||
|
||||
img {float:left;margin:0 13px;top:8px;}
|
||||
img {float:left;margin:0 10px;top:8px;}
|
||||
|
||||
a:hover span, a:hover, a:hover span.out {
|
||||
color:#FFFFFF;
|
||||
|
|
@ -72,50 +75,24 @@ img.grayscale {
|
|||
position:relative;
|
||||
padding-top:4px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Footer language nav
|
||||
*/
|
||||
|
||||
|
||||
#lang {
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
background:#C7C2AE;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
}
|
||||
font-size:0;
|
||||
text-align:right;
|
||||
|
||||
.lang-nav {
|
||||
line-height:30px;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
float:right;
|
||||
margin:0;
|
||||
padding:0;
|
||||
margin-right:10px;
|
||||
list-style:none;
|
||||
|
||||
li {
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
|
||||
&:last-child {
|
||||
border-right:none;
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left:10px;
|
||||
color:#6D6D6D;
|
||||
font-size:16px;
|
||||
|
||||
&:hover {
|
||||
color:#D6264E;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display:inline-block;
|
||||
margin:10px;
|
||||
margin-left:0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +102,7 @@ Content Area
|
|||
|
||||
#content {
|
||||
float:left;
|
||||
background:#EBE6D3;
|
||||
background:$color-content-bg;
|
||||
width:500px;
|
||||
min-height:640px;
|
||||
position: relative;
|
||||
|
|
@ -134,44 +111,41 @@ Content Area
|
|||
hr {
|
||||
border:none;
|
||||
background:none;
|
||||
border-top:2px solid #d4c99e;
|
||||
border-top:2px solid darken($color-content-bg,10%);
|
||||
}
|
||||
|
||||
h1 {font-size:30px;}
|
||||
|
||||
h2 {font-size:20px;margin-top:20px;}
|
||||
|
||||
h1,h2,h3,h4,h5 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}
|
||||
h1,h2,h3,h4,h5,h6 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}
|
||||
|
||||
p, pre {
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h3 {
|
||||
color:$color-pink;
|
||||
font-size:22px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
article {
|
||||
padding:15px;
|
||||
.pin-hover {cursor:help;}
|
||||
.pin-hover:hover {color:#880000;}
|
||||
img {max-width:100%;}
|
||||
a {
|
||||
color:$color-green;
|
||||
text-decoration:underline;
|
||||
|
||||
&:hover {text-decoration:none;}
|
||||
}
|
||||
ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}
|
||||
}
|
||||
}
|
||||
|
||||
.boards-page #content {
|
||||
width:698px;
|
||||
}
|
||||
|
||||
#content
|
||||
|
||||
p.intro {
|
||||
color:#268BD2;
|
||||
}
|
||||
p,pre {
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h3 {
|
||||
color:#D33682;
|
||||
font-size:22px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
article a {color:#859900;text-decoration:underline;}
|
||||
article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}
|
||||
|
||||
|
||||
/*
|
||||
Boards Page
|
||||
*/
|
||||
|
|
@ -218,19 +192,20 @@ Boards Page
|
|||
}
|
||||
}
|
||||
|
||||
#boards .board a:hover {
|
||||
background: #fdfaf0;
|
||||
}
|
||||
|
||||
#boards .board strong {
|
||||
color:#333333;
|
||||
#boards .board {
|
||||
a:hover {
|
||||
background: lighten($color-content-bg,5%);
|
||||
}
|
||||
strong {
|
||||
color:#333333;
|
||||
}
|
||||
}
|
||||
|
||||
.facets {
|
||||
position: relative;
|
||||
top: 90px;
|
||||
padding: 4px 15px 15px 15px;
|
||||
background: #073642;
|
||||
background: $color-dark;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
margin-right: 18px;
|
||||
|
|
@ -339,10 +314,6 @@ Left Column
|
|||
width:500px;
|
||||
}
|
||||
|
||||
.boards-page #leftcolumn {
|
||||
width:302px;
|
||||
}
|
||||
|
||||
#crumbtrail {
|
||||
background:$color-dark;
|
||||
p {
|
||||
|
|
@ -364,7 +335,7 @@ Left Column
|
|||
|
||||
#interfaces {
|
||||
background: $color-purple;
|
||||
padding: 0px 2px 2px 2px;
|
||||
padding: 0px 0px 2px 2px;
|
||||
display: block;
|
||||
clear: both;
|
||||
line-height: 2px;
|
||||
|
|
@ -414,56 +385,31 @@ nav {
|
|||
margin-right:208px;
|
||||
border-top-right-radius:46px;
|
||||
border-bottom-right-radius:46px;
|
||||
}
|
||||
.boards-page nav {
|
||||
margin-right:0;
|
||||
}
|
||||
nav:before, nav:after {
|
||||
content:'';
|
||||
display:block;
|
||||
width:28px;
|
||||
height:28px;
|
||||
background:#FFFFFF;
|
||||
border-radius:50%;
|
||||
border:14px solid #F7DF84;
|
||||
right:19px;
|
||||
top:19px;
|
||||
position: absolute;
|
||||
}
|
||||
nav:after {
|
||||
top:auto;
|
||||
bottom:19px;
|
||||
}
|
||||
.phys {
|
||||
color:#002B36;
|
||||
font-size:12px;
|
||||
opacity:0.8;
|
||||
position:absolute;
|
||||
left:30px;
|
||||
text-indent:0;
|
||||
}
|
||||
.bottom .phys {
|
||||
text-align:right;
|
||||
left:auto;
|
||||
right:30px;
|
||||
|
||||
&:before, &:after {
|
||||
content:'';
|
||||
display:block;
|
||||
width:28px;
|
||||
height:28px;
|
||||
background:#FFFFFF;
|
||||
border-radius:50%;
|
||||
border:14px solid #F7DF84;
|
||||
right:19px;
|
||||
top:19px;
|
||||
position: absolute;
|
||||
}
|
||||
&:after {
|
||||
top:auto;
|
||||
bottom:19px;
|
||||
}
|
||||
}
|
||||
|
||||
#gpio ul {
|
||||
position:absolute;
|
||||
top:87px;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#gpio {
|
||||
.top {
|
||||
left:246px;
|
||||
|
||||
li {text-indent:56px;}
|
||||
a {color:#063541;}
|
||||
}
|
||||
.bottom {
|
||||
left:0px;
|
||||
a {color:#E9E5D2;}
|
||||
ul {
|
||||
position:absolute;
|
||||
top:87px;
|
||||
list-style:none;
|
||||
}
|
||||
a {
|
||||
display:block;
|
||||
|
|
@ -473,101 +419,14 @@ nav:after {
|
|||
height:22px;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
.top a {
|
||||
width:250px;
|
||||
border-top-left-radius:13px;
|
||||
border-bottom-left-radius:13px;
|
||||
}
|
||||
.bottom a {
|
||||
width:244px;
|
||||
border-top-right-radius:13px;
|
||||
border-bottom-right-radius:13px;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.active a {
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
}
|
||||
|
||||
.pin1 a:hover, .pin1.active a {border-radius:0;}
|
||||
|
||||
li a small {font-size:11px;}
|
||||
|
||||
.overlay-pin a {
|
||||
background:rgb(235, 230, 211);
|
||||
color:#063541;
|
||||
|
||||
&:hover {
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-power {
|
||||
.phys {
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
}
|
||||
a {
|
||||
background:#073642;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-ground {
|
||||
.phys {
|
||||
background:#073642;
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
width:20px;
|
||||
height:22px;
|
||||
border-radius:11px;
|
||||
text-indent: 0px;
|
||||
line-height: 22px;
|
||||
}
|
||||
a:hover .phys {
|
||||
background:#268bd2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#gpio .bottom .overlay-ground .phys {
|
||||
padding-right:32px;
|
||||
right:0;
|
||||
}
|
||||
|
||||
#gpio .top .overlay-ground .phys {
|
||||
padding-left:31px;
|
||||
left:0;
|
||||
}
|
||||
|
||||
#gpio .overlay-power a:hover {
|
||||
background:#268bd2;
|
||||
}
|
||||
|
||||
|
||||
#gpio li.overlay-ground span.pin {background:#073642;}
|
||||
|
||||
article {
|
||||
.pin-hover {cursor:help;}
|
||||
.pin-hover:hover {color:#880000;}
|
||||
img {max-width:100%;}
|
||||
}
|
||||
|
||||
|
||||
#gpio {
|
||||
|
||||
ul li.hover-pin a,
|
||||
ul.bottom li.hover-pin a {
|
||||
color:#FFF;
|
||||
background:rgba(200,0,0,0.6);
|
||||
}
|
||||
|
||||
ul.bottom a {
|
||||
text-indent:10px;
|
||||
.phys {
|
||||
color:#002B36;
|
||||
font-size:12px;
|
||||
opacity:0.8;
|
||||
position:absolute;
|
||||
left:30px;
|
||||
text-indent:0;
|
||||
}
|
||||
|
||||
.pin {
|
||||
|
|
@ -595,23 +454,119 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
.top .pin {
|
||||
left:2px;
|
||||
top:2px;
|
||||
.top {
|
||||
left:246px;
|
||||
|
||||
li {text-indent:56px;}
|
||||
|
||||
a {
|
||||
color:#063541;
|
||||
width:250px;
|
||||
border-top-left-radius:13px;
|
||||
border-bottom-left-radius:13px;
|
||||
}
|
||||
.overlay-ground .phys {
|
||||
padding-left:31px;
|
||||
left:0;
|
||||
}
|
||||
.pin {
|
||||
left:2px;
|
||||
top:2px;
|
||||
}
|
||||
.gnd a {color:rgba(6, 53, 65, 0.5);}
|
||||
}
|
||||
|
||||
.bottom .gnd a {color:rgba(233, 229, 210, 0.5);}
|
||||
.bottom .gnd a:hover {color:rgba(6, 53, 65, 0.5);}
|
||||
.top .gnd a {color:rgba(6, 53, 65, 0.5);}
|
||||
.bottom {
|
||||
left:0px;
|
||||
a {
|
||||
text-indent:10px;
|
||||
color:#E9E5D2;
|
||||
width:244px;
|
||||
border-top-right-radius:13px;
|
||||
border-bottom-right-radius:13px;
|
||||
}
|
||||
.overlay-ground .phys {
|
||||
padding-right:32px;
|
||||
right:0;
|
||||
}
|
||||
.phys {
|
||||
text-align:right;
|
||||
left:auto;
|
||||
right:30px;
|
||||
}
|
||||
.gnd a {
|
||||
color:rgba(233, 229, 210, 0.5);
|
||||
&:hover {color:rgba(6, 53, 65, 0.5);}
|
||||
}
|
||||
}
|
||||
|
||||
.pin1 .pin {border-radius:0;}
|
||||
.pow3v3 .pin {background:#B58900;}
|
||||
.pow5v .pin {background:#DC322F;}
|
||||
.gpio .pin {background:#859900;}
|
||||
.i2c .pin {background:#268BD2;}
|
||||
.spi .pin {background:#D33682;}
|
||||
.uart .pin {background:#6c71c4;}
|
||||
a:hover,
|
||||
.active a {
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
}
|
||||
|
||||
li a small {font-size:11px;}
|
||||
|
||||
.overlay-pin a {
|
||||
background:rgb(235, 230, 211);
|
||||
color:#063541;
|
||||
|
||||
&:hover {
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-power {
|
||||
.phys {
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
}
|
||||
a {
|
||||
background:$color-dark;
|
||||
color:#FFFFFF;
|
||||
|
||||
&::hover {
|
||||
background:#268bd2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-ground {
|
||||
.phys {
|
||||
background:$color-dark;
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
width:20px;
|
||||
height:22px;
|
||||
border-radius:11px;
|
||||
text-indent: 0px;
|
||||
line-height: 22px;
|
||||
}
|
||||
a:hover .phys {
|
||||
background:#268bd2;
|
||||
}
|
||||
span.pin {background:$color-dark;}
|
||||
}
|
||||
|
||||
|
||||
ul li.hover-pin a,
|
||||
.bottom li.hover-pin a {
|
||||
color:#FFF;
|
||||
background:rgba(200,0,0,0.6);
|
||||
}
|
||||
|
||||
.pin1 a:hover, .pin1.active a, .pin1 .pin {border-radius:0;}
|
||||
|
||||
.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;}
|
||||
}
|
||||
|
||||
#pinbase {
|
||||
|
|
@ -619,11 +574,21 @@ article {
|
|||
position:absolute;
|
||||
left:216px;
|
||||
height:493px;
|
||||
background:#073642;
|
||||
background:$color-dark;
|
||||
top:80px;
|
||||
}
|
||||
|
||||
span.alternate {display:none;}
|
||||
.boards-page {
|
||||
nav {
|
||||
margin-right:0;
|
||||
}
|
||||
#leftcolumn {
|
||||
width:302px;
|
||||
}
|
||||
#content {
|
||||
width:698px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px){
|
||||
#container {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ table {
|
|||
color: #FFFFFF; }
|
||||
.logo img {
|
||||
float: left;
|
||||
margin: 0 13px;
|
||||
margin: 0 10px;
|
||||
top: 8px; }
|
||||
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
|
||||
color: #FFFFFF; }
|
||||
|
|
@ -72,34 +72,16 @@ Footer language nav
|
|||
*/
|
||||
#lang {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: #C7C2AE;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%; }
|
||||
|
||||
.lang-nav {
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-right: 10px;
|
||||
list-style: none; }
|
||||
.lang-nav li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left; }
|
||||
.lang-nav li:last-child {
|
||||
border-right: none;
|
||||
padding-right: 0px; }
|
||||
.lang-nav li a {
|
||||
padding-left: 10px;
|
||||
color: #6D6D6D;
|
||||
font-size: 16px; }
|
||||
.lang-nav li a:hover {
|
||||
color: #D6264E; }
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
text-align: right; }
|
||||
#lang a {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
margin-left: 0px; }
|
||||
|
||||
/*
|
||||
Content Area
|
||||
|
|
@ -114,42 +96,39 @@ Content Area
|
|||
#content hr {
|
||||
border: none;
|
||||
background: none;
|
||||
border-top: 2px solid #d4c99e; }
|
||||
border-top: 2px solid #dbd2b0; }
|
||||
#content h1 {
|
||||
font-size: 30px; }
|
||||
#content h2 {
|
||||
font-size: 20px;
|
||||
margin-top: 20px; }
|
||||
#content h1, #content h2, #content h3, #content h4, #content h5 {
|
||||
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
|
||||
#content p, #content pre {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%; }
|
||||
#content h3 {
|
||||
color: #D33682;
|
||||
font-size: 22px;
|
||||
font-weight: bold; }
|
||||
#content article {
|
||||
padding: 15px; }
|
||||
|
||||
.boards-page #content {
|
||||
width: 698px; }
|
||||
|
||||
#content
|
||||
p.intro {
|
||||
color: #268BD2; }
|
||||
|
||||
p, pre {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%; }
|
||||
|
||||
h3 {
|
||||
color: #D33682;
|
||||
font-size: 22px;
|
||||
font-weight: bold; }
|
||||
|
||||
article a {
|
||||
color: #859900;
|
||||
text-decoration: underline; }
|
||||
|
||||
article ul {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
#content article .pin-hover {
|
||||
cursor: help; }
|
||||
#content article .pin-hover:hover {
|
||||
color: #880000; }
|
||||
#content article img {
|
||||
max-width: 100%; }
|
||||
#content article a {
|
||||
color: #859900;
|
||||
text-decoration: underline; }
|
||||
#content article a:hover {
|
||||
text-decoration: none; }
|
||||
#content article ul {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
|
||||
/*
|
||||
Boards Page
|
||||
|
|
@ -188,8 +167,7 @@ Boards Page
|
|||
display: block; }
|
||||
|
||||
#boards .board a:hover {
|
||||
background: #fdfaf0; }
|
||||
|
||||
background: #f3f0e5; }
|
||||
#boards .board strong {
|
||||
color: #333333; }
|
||||
|
||||
|
|
@ -272,9 +250,6 @@ Left Column
|
|||
float: left;
|
||||
width: 500px; }
|
||||
|
||||
.boards-page #leftcolumn {
|
||||
width: 302px; }
|
||||
|
||||
#crumbtrail {
|
||||
background: #073642; }
|
||||
#crumbtrail p {
|
||||
|
|
@ -291,7 +266,7 @@ Left Column
|
|||
|
||||
#interfaces {
|
||||
background: #6c71c4;
|
||||
padding: 0px 2px 2px 2px;
|
||||
padding: 0px 0px 2px 2px;
|
||||
display: block;
|
||||
clear: both;
|
||||
line-height: 2px;
|
||||
|
|
@ -331,54 +306,25 @@ nav {
|
|||
margin-right: 208px;
|
||||
border-top-right-radius: 46px;
|
||||
border-bottom-right-radius: 46px; }
|
||||
|
||||
.boards-page nav {
|
||||
margin-right: 0; }
|
||||
|
||||
nav:before, nav:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
border: 14px solid #F7DF84;
|
||||
right: 19px;
|
||||
top: 19px;
|
||||
position: absolute; }
|
||||
|
||||
nav:after {
|
||||
top: auto;
|
||||
bottom: 19px; }
|
||||
|
||||
.phys {
|
||||
color: #002B36;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
text-indent: 0; }
|
||||
|
||||
.bottom .phys {
|
||||
text-align: right;
|
||||
left: auto;
|
||||
right: 30px; }
|
||||
nav:before, nav:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 50%;
|
||||
border: 14px solid #F7DF84;
|
||||
right: 19px;
|
||||
top: 19px;
|
||||
position: absolute; }
|
||||
nav:after {
|
||||
top: auto;
|
||||
bottom: 19px; }
|
||||
|
||||
#gpio ul {
|
||||
position: absolute;
|
||||
top: 87px;
|
||||
list-style: none; }
|
||||
|
||||
#gpio .top {
|
||||
left: 246px; }
|
||||
#gpio .top li {
|
||||
text-indent: 56px; }
|
||||
#gpio .top a {
|
||||
color: #063541; }
|
||||
#gpio .bottom {
|
||||
left: 0px; }
|
||||
#gpio .bottom a {
|
||||
color: #E9E5D2; }
|
||||
#gpio a {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
@ -386,75 +332,13 @@ nav:after {
|
|||
line-height: 23px;
|
||||
height: 22px;
|
||||
margin-bottom: 2px; }
|
||||
#gpio .top a {
|
||||
width: 250px;
|
||||
border-top-left-radius: 13px;
|
||||
border-bottom-left-radius: 13px; }
|
||||
#gpio .bottom a {
|
||||
width: 244px;
|
||||
border-top-right-radius: 13px;
|
||||
border-bottom-right-radius: 13px; }
|
||||
#gpio a:hover,
|
||||
#gpio .active a {
|
||||
background: #f5f3ed;
|
||||
color: #063541; }
|
||||
#gpio .pin1 a:hover, #gpio .pin1.active a {
|
||||
border-radius: 0; }
|
||||
#gpio li a small {
|
||||
font-size: 11px; }
|
||||
#gpio .overlay-pin a {
|
||||
background: #ebe6d3;
|
||||
color: #063541; }
|
||||
#gpio .overlay-pin a:hover {
|
||||
background: #f5f3ed;
|
||||
color: #063541; }
|
||||
#gpio .overlay-power .phys {
|
||||
color: #FFFFFF;
|
||||
opacity: 1; }
|
||||
#gpio .overlay-power a {
|
||||
background: #073642;
|
||||
color: #FFFFFF; }
|
||||
#gpio .overlay-ground .phys {
|
||||
background: #073642;
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
#gpio .phys {
|
||||
color: #002B36;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
text-indent: 0px;
|
||||
line-height: 22px; }
|
||||
#gpio .overlay-ground a:hover .phys {
|
||||
background: #268bd2; }
|
||||
|
||||
#gpio .bottom .overlay-ground .phys {
|
||||
padding-right: 32px;
|
||||
right: 0; }
|
||||
|
||||
#gpio .top .overlay-ground .phys {
|
||||
padding-left: 31px;
|
||||
left: 0; }
|
||||
|
||||
#gpio .overlay-power a:hover {
|
||||
background: #268bd2; }
|
||||
|
||||
#gpio li.overlay-ground span.pin {
|
||||
background: #073642; }
|
||||
|
||||
article .pin-hover {
|
||||
cursor: help; }
|
||||
article .pin-hover:hover {
|
||||
color: #880000; }
|
||||
article img {
|
||||
max-width: 100%; }
|
||||
|
||||
#gpio ul li.hover-pin a,
|
||||
#gpio ul.bottom li.hover-pin a {
|
||||
color: #FFF;
|
||||
background: rgba(200, 0, 0, 0.6); }
|
||||
#gpio ul.bottom a {
|
||||
text-indent: 10px; }
|
||||
left: 30px;
|
||||
text-indent: 0; }
|
||||
#gpio .pin {
|
||||
display: block;
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -476,16 +360,82 @@ article img {
|
|||
width: 6px;
|
||||
height: 6px;
|
||||
font-size: 7px; }
|
||||
#gpio .top .pin {
|
||||
left: 2px;
|
||||
top: 2px; }
|
||||
#gpio .bottom .gnd a {
|
||||
color: rgba(233, 229, 210, 0.5); }
|
||||
#gpio .bottom .gnd a:hover {
|
||||
color: rgba(6, 53, 65, 0.5); }
|
||||
#gpio .top .gnd a {
|
||||
color: rgba(6, 53, 65, 0.5); }
|
||||
#gpio .pin1 .pin {
|
||||
#gpio .top {
|
||||
left: 246px; }
|
||||
#gpio .top li {
|
||||
text-indent: 56px; }
|
||||
#gpio .top a {
|
||||
color: #063541;
|
||||
width: 250px;
|
||||
border-top-left-radius: 13px;
|
||||
border-bottom-left-radius: 13px; }
|
||||
#gpio .top .overlay-ground .phys {
|
||||
padding-left: 31px;
|
||||
left: 0; }
|
||||
#gpio .top .pin {
|
||||
left: 2px;
|
||||
top: 2px; }
|
||||
#gpio .top .gnd a {
|
||||
color: rgba(6, 53, 65, 0.5); }
|
||||
#gpio .bottom {
|
||||
left: 0px; }
|
||||
#gpio .bottom a {
|
||||
text-indent: 10px;
|
||||
color: #E9E5D2;
|
||||
width: 244px;
|
||||
border-top-right-radius: 13px;
|
||||
border-bottom-right-radius: 13px; }
|
||||
#gpio .bottom .overlay-ground .phys {
|
||||
padding-right: 32px;
|
||||
right: 0; }
|
||||
#gpio .bottom .phys {
|
||||
text-align: right;
|
||||
left: auto;
|
||||
right: 30px; }
|
||||
#gpio .bottom .gnd a {
|
||||
color: rgba(233, 229, 210, 0.5); }
|
||||
#gpio .bottom .gnd a:hover {
|
||||
color: rgba(6, 53, 65, 0.5); }
|
||||
#gpio a:hover,
|
||||
#gpio .active a {
|
||||
background: #f5f3ed;
|
||||
color: #063541; }
|
||||
#gpio li a small {
|
||||
font-size: 11px; }
|
||||
#gpio .overlay-pin a {
|
||||
background: #ebe6d3;
|
||||
color: #063541; }
|
||||
#gpio .overlay-pin a:hover {
|
||||
background: #f5f3ed;
|
||||
color: #063541; }
|
||||
#gpio .overlay-power .phys {
|
||||
color: #FFFFFF;
|
||||
opacity: 1; }
|
||||
#gpio .overlay-power a {
|
||||
background: #073642;
|
||||
color: #FFFFFF; }
|
||||
#gpio .overlay-power a::hover {
|
||||
background: #268bd2; }
|
||||
#gpio .overlay-ground .phys {
|
||||
background: #073642;
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
text-indent: 0px;
|
||||
line-height: 22px; }
|
||||
#gpio .overlay-ground a:hover .phys {
|
||||
background: #268bd2; }
|
||||
#gpio .overlay-ground span.pin {
|
||||
background: #073642; }
|
||||
#gpio ul li.hover-pin a,
|
||||
#gpio .bottom li.hover-pin a {
|
||||
color: #FFF;
|
||||
background: rgba(200, 0, 0, 0.6); }
|
||||
#gpio .pin1 a:hover, #gpio .pin1.active a, #gpio .pin1 .pin {
|
||||
border-radius: 0; }
|
||||
#gpio .pow3v3 .pin {
|
||||
background: #B58900; }
|
||||
|
|
@ -508,8 +458,12 @@ article img {
|
|||
background: #073642;
|
||||
top: 80px; }
|
||||
|
||||
span.alternate {
|
||||
display: none; }
|
||||
.boards-page nav {
|
||||
margin-right: 0; }
|
||||
.boards-page #leftcolumn {
|
||||
width: 302px; }
|
||||
.boards-page #content {
|
||||
width: 698px; }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue