Improve nojs boards page
This commit is contained in:
Phil Howard
parent
f1019c39e3
commit
e42a3e559b
@ -524,7 +524,8 @@ overlay_subnav = ['featured']
|
||||
featured_boards_count = 0
|
||||
featured_boards_html = ''
|
||||
|
||||
boards_page = []
|
||||
boards_page = {}
|
||||
boards_manufacturers = []
|
||||
|
||||
'''
|
||||
Build up the navigation between overlays. This needs to be done before rendering pages
|
||||
@ -564,7 +565,11 @@ for overlay in overlays:
|
||||
if 'formfactor' not in overlay:
|
||||
print('Warning! -> {name} missing formfactor'.format(name=overlay['name']))
|
||||
|
||||
boards_page.append({'name': overlay['name'], 'html': '<li class="board" data-type="{type}" data-manufacturer="{manufacturer}" data-form-factor="{formfactor}"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
|
||||
if overlay['manufacturer'] not in boards_page.keys():
|
||||
boards_page[overlay['manufacturer']] = []
|
||||
boards_manufacturers.append(overlay['manufacturer'])
|
||||
|
||||
boards_page[overlay['manufacturer']].append({'name': overlay['name'], 'html': '<li class="board" data-type="{type}" data-manufacturer="{manufacturer}" data-form-factor="{formfactor}"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
|
||||
image=image,
|
||||
name=overlay['name'],
|
||||
page_url=overlay['page_url'],
|
||||
@ -575,7 +580,15 @@ for overlay in overlays:
|
||||
resource_url=resource_url)})
|
||||
|
||||
|
||||
boards_page = [x['html'] for x in sorted(boards_page, key=lambda k: k['name'])]
|
||||
#boards_page = [x['html'] for x in sorted(boards_page, key=lambda k: k['name'])]
|
||||
pages['boards'] = {'rendered_html':''}
|
||||
|
||||
boards_manufacturers = sorted(boards_manufacturers);
|
||||
|
||||
for manufacturer in boards_manufacturers:
|
||||
boards_page[manufacturer] = [x['html'] for x in sorted(boards_page[manufacturer], key=lambda k: k['name'])]
|
||||
pages['boards']['rendered_html'] += '<li class="title"><a name="manufacturer=' + manufacturer + '"></a><h2>' + manufacturer + '</h2></li>'
|
||||
pages['boards']['rendered_html'] += ''.join(boards_page[manufacturer])
|
||||
|
||||
'''
|
||||
Manually add the index page as 'pinout', this is due to how the
|
||||
@ -602,7 +615,8 @@ if page404 is not None:
|
||||
navs['404'] = default_nav
|
||||
|
||||
|
||||
pages['boards'] = {'rendered_html': ''.join(boards_page)}
|
||||
#pages['boards'] = {'rendered_html': ''.join(boards_page)}
|
||||
|
||||
navs['boards'] = default_nav
|
||||
|
||||
print('\nRendering pin pages...')
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
jQuery(document).ready(function(){
|
||||
var dom_boards = $('#boards .board');;
|
||||
var dom_boards = $('#boards .board');
|
||||
var dom_titles = $('#boards .title');
|
||||
|
||||
dom_titles.hide();
|
||||
|
||||
var facets = {};
|
||||
var filters = {};
|
||||
|
||||
@ -16,24 +16,24 @@ table.pin-functions {width:100%;}
|
||||
table.pin-functions td {width:16.6666%;}
|
||||
|
||||
.prettyprint {
|
||||
word-wrap:break-word;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width:250px;
|
||||
font-size:24px;
|
||||
line-height:23px;
|
||||
cursor:pointer;
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:28px;
|
||||
z-index:1;
|
||||
font-weight:600;
|
||||
width:250px;
|
||||
font-size:24px;
|
||||
line-height:23px;
|
||||
cursor:pointer;
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:28px;
|
||||
z-index:1;
|
||||
font-weight:600;
|
||||
}
|
||||
.logo a {color:#FFFFFF;}
|
||||
.logo img {float:left;margin:0 13px;top:8px;}
|
||||
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
|
||||
color:#FFFFFF;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
|
||||
img.grayscale {
|
||||
@ -44,10 +44,10 @@ img.grayscale {
|
||||
|
||||
|
||||
#container {
|
||||
width:1000px;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
padding-top:4px;
|
||||
width:1000px;
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
padding-top:4px;
|
||||
}
|
||||
|
||||
|
||||
@ -56,43 +56,43 @@ Footer language nav
|
||||
*/
|
||||
|
||||
#lang {
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
background:#C7C2AE;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
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;
|
||||
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;
|
||||
margin:0;
|
||||
padding:0;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.lang-nav li:last-child {
|
||||
border-right:none;
|
||||
padding-right:0px;
|
||||
border-right:none;
|
||||
padding-right:0px;
|
||||
}
|
||||
|
||||
|
||||
.lang-nav li a {
|
||||
padding-left:10px;
|
||||
color:#6D6D6D;
|
||||
font-size:16px;
|
||||
padding-left:10px;
|
||||
color:#6D6D6D;
|
||||
font-size:16px;
|
||||
}
|
||||
.lang-nav li a:hover {
|
||||
color:#D6264E;
|
||||
color:#D6264E;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -100,36 +100,36 @@ Content Area
|
||||
*/
|
||||
|
||||
#content {
|
||||
float:left;
|
||||
background:#EBE6D3;
|
||||
width:500px;
|
||||
min-height:640px;
|
||||
position: relative;
|
||||
padding-bottom:50px;
|
||||
float:left;
|
||||
background:#EBE6D3;
|
||||
width:500px;
|
||||
min-height:640px;
|
||||
position: relative;
|
||||
padding-bottom:50px;
|
||||
}
|
||||
.boards-page #content {
|
||||
width:698px;
|
||||
width:698px;
|
||||
}
|
||||
#content h1 {font-size:30px;}
|
||||
#content h2 {font-size:20px;margin-top:20px;}
|
||||
#content h1,h2,h3,h4,h5 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}
|
||||
|
||||
#content article {
|
||||
padding:15px;
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
p.intro {
|
||||
color:#268BD2;
|
||||
color:#268BD2;
|
||||
}
|
||||
p,pre {
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
margin-top:10px;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
h3 {
|
||||
color:#D33682;
|
||||
font-size:22px;
|
||||
font-weight:bold;
|
||||
color:#D33682;
|
||||
font-size:22px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
article a {color:#859900;text-decoration:underline;}
|
||||
@ -142,8 +142,8 @@ Featured Boards
|
||||
|
||||
|
||||
#featured {
|
||||
overflow:hidden;
|
||||
background:#C32672;
|
||||
overflow:hidden;
|
||||
background:#C32672;
|
||||
}
|
||||
|
||||
#featured .more {
|
||||
@ -163,64 +163,64 @@ Featured Boards
|
||||
line-height: 22px;
|
||||
}
|
||||
#featured .more:hover {
|
||||
background:#D33682;
|
||||
background:#D33682;
|
||||
}
|
||||
#featured ul {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sections .featured, #boards .board, #featured .board {
|
||||
box-sizing:border-box;
|
||||
width:25%;
|
||||
display:block;
|
||||
float:left;
|
||||
text-align:center;
|
||||
box-sizing:border-box;
|
||||
width:25%;
|
||||
display:block;
|
||||
float:left;
|
||||
text-align:center;
|
||||
}
|
||||
#featured .board {width:25%;}
|
||||
#sections .group li.featured {
|
||||
margin-right:0px;
|
||||
margin-right:0px;
|
||||
}
|
||||
#boards .board a, #featured .board a {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0px;
|
||||
min-height: 190px;
|
||||
display:block;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0px;
|
||||
min-height: 190px;
|
||||
display:block;
|
||||
}
|
||||
#featured .board a {
|
||||
min-height:130px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
min-height:130px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#sections .featured img, #boards .board img, #featured .board img {
|
||||
max-width:80%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
max-width:80%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
}
|
||||
#featured .board img {max-width:50%;}
|
||||
#sections .featured a, #boards .board a, #featured .board a {
|
||||
background:none;
|
||||
background:none;
|
||||
}
|
||||
#sections .boards hr {
|
||||
clear:both;
|
||||
border:none;
|
||||
border-top:3px solid #D33682;
|
||||
margin-bottom:5px;
|
||||
background:none;
|
||||
clear:both;
|
||||
border:none;
|
||||
border-top:3px solid #D33682;
|
||||
margin-bottom:5px;
|
||||
background:none;
|
||||
}
|
||||
|
||||
#sections .boards .featured a:hover {
|
||||
background: #D33682;
|
||||
background: #D33682;
|
||||
}
|
||||
#featured .board a:hover {
|
||||
background: #D33682;
|
||||
background: #D33682;
|
||||
}
|
||||
#boards .board a:hover {
|
||||
background: #fdfaf0;
|
||||
background: #fdfaf0;
|
||||
}
|
||||
#sections .featured strong, #boards .board strong, #featured .board strong {
|
||||
font-size:16px;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
font-size:16px;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
font-weight: 500;
|
||||
color:#FFFFFF;
|
||||
margin: 0;
|
||||
@ -228,7 +228,32 @@ Featured Boards
|
||||
display:block;
|
||||
}
|
||||
#boards .board strong {
|
||||
color:#333333;
|
||||
color:#333333;
|
||||
}
|
||||
|
||||
#boards .title {
|
||||
display: block;
|
||||
width: auto;
|
||||
background: rgb(244, 242, 232);
|
||||
padding-left: 20px;
|
||||
padding-top: 30px;
|
||||
clear: both;
|
||||
margin-bottom: 10px;
|
||||
border-top: 10px solid #ebe6d3;
|
||||
}
|
||||
|
||||
#boards h2 {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
padding: 10px 20px 0px 20px;
|
||||
background: #ebe6d3;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
position: relative;
|
||||
height: 17px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#sections .featured span, #boards .board span, #featured .board span {
|
||||
@ -241,7 +266,7 @@ Featured Boards
|
||||
}
|
||||
|
||||
.facets {
|
||||
position: relative;
|
||||
position: relative;
|
||||
top: 90px;
|
||||
padding: 4px 15px 15px 15px;
|
||||
background: #073642;
|
||||
@ -250,16 +275,16 @@ Featured Boards
|
||||
margin-right: 18px;
|
||||
}
|
||||
.facets h4 {
|
||||
text-transform: capitalize;
|
||||
text-transform: capitalize;
|
||||
font-size: 16px;
|
||||
margin: 10px 0 0 0;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
.facets ul, .facets li {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.facets .facet li {
|
||||
@ -276,7 +301,7 @@ Featured Boards
|
||||
text-transform:capitalize;
|
||||
}
|
||||
.facets .facet li:hover, .facets .facet li.selected {
|
||||
color: #859900;
|
||||
color: #859900;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
@ -284,15 +309,15 @@ Featured Boards
|
||||
background: #D33682;
|
||||
}
|
||||
.facets .facet:nth-of-type(2) li:hover, .facets .facet:nth-of-type(2) li.selected {
|
||||
color: #D33682;
|
||||
color: #D33682;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.facets .facet:nth-of-type(1) li {
|
||||
background: #268BD2;
|
||||
background: #268BD2;
|
||||
}
|
||||
.facets .facet:nth-of-type(1) li:hover, .facets .facet:nth-of-type(1) li.selected {
|
||||
color: #268BD2;
|
||||
color: #268BD2;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
@ -310,44 +335,44 @@ Left Column
|
||||
*/
|
||||
|
||||
#leftcolumn {
|
||||
float:left;
|
||||
width:500px;
|
||||
float:left;
|
||||
width:500px;
|
||||
}
|
||||
|
||||
.boards-page #leftcolumn {
|
||||
width:302px;
|
||||
width:302px;
|
||||
}
|
||||
|
||||
#crumbtrail {
|
||||
background:#6c71c4;
|
||||
background:#6c71c4;
|
||||
}
|
||||
|
||||
#crumbtrail p {
|
||||
color:#fff;
|
||||
margin:0;
|
||||
padding:5px 15px;
|
||||
color:#fff;
|
||||
margin:0;
|
||||
padding:5px 15px;
|
||||
}
|
||||
|
||||
#crumbtrail a, #crumbtrail a:hover, #crumbtrail a:active {
|
||||
color:#fff;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#crumbtrail a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#interfaces ul, #interfaces li {
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#interfaces li{
|
||||
display:inline-block;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
#interfaces {
|
||||
background:#6c71c4;
|
||||
background:#6c71c4;
|
||||
padding: 10px;
|
||||
width: 292px;
|
||||
margin-top: 20px;
|
||||
@ -356,13 +381,13 @@ Left Column
|
||||
}
|
||||
|
||||
#interfaces li a {
|
||||
display:inline-block;
|
||||
padding:0px 10px 0px 10px;
|
||||
margin-top:2px;
|
||||
margin-right:2px;
|
||||
background:#5c61b4;
|
||||
color:#FFF;
|
||||
font-size: 14px;
|
||||
display:inline-block;
|
||||
padding:0px 10px 0px 10px;
|
||||
margin-top:2px;
|
||||
margin-right:2px;
|
||||
background:#5c61b4;
|
||||
color:#FFF;
|
||||
font-size: 14px;
|
||||
line-height: 23px;
|
||||
height: 22px;
|
||||
}
|
||||
@ -382,86 +407,86 @@ GPIO nav
|
||||
*/
|
||||
|
||||
nav {
|
||||
position:relative;
|
||||
width:292px;
|
||||
background:#5F8645;
|
||||
min-height:653px;
|
||||
margin-right:208px;
|
||||
border-top-right-radius:46px;
|
||||
border-bottom-right-radius:46px;
|
||||
position:relative;
|
||||
width:292px;
|
||||
background:#5F8645;
|
||||
min-height:653px;
|
||||
margin-right:208px;
|
||||
border-top-right-radius:46px;
|
||||
border-bottom-right-radius:46px;
|
||||
}
|
||||
.boards-page nav {
|
||||
margin-right:0;
|
||||
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;
|
||||
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;
|
||||
top:auto;
|
||||
bottom:19px;
|
||||
}
|
||||
.phys {
|
||||
color:#002B36;
|
||||
font-size:12px;
|
||||
opacity:0.8;
|
||||
position:absolute;
|
||||
left:30px;
|
||||
text-indent:0;
|
||||
color:#002B36;
|
||||
font-size:12px;
|
||||
opacity:0.8;
|
||||
position:absolute;
|
||||
left:30px;
|
||||
text-indent:0;
|
||||
}
|
||||
.bottom .phys {
|
||||
text-align:right;
|
||||
left:auto;
|
||||
right:30px;
|
||||
text-align:right;
|
||||
left:auto;
|
||||
right:30px;
|
||||
}
|
||||
|
||||
#gpio ul {
|
||||
position:absolute;
|
||||
top:87px;
|
||||
list-style:none;
|
||||
position:absolute;
|
||||
top:87px;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#gpio .top {
|
||||
left:246px;
|
||||
left:246px;
|
||||
}
|
||||
|
||||
#gpio .bottom {
|
||||
left:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
#gpio .top li {text-indent:56px;}
|
||||
|
||||
#gpio a {
|
||||
display:block;
|
||||
position:relative;
|
||||
font-size:15px;
|
||||
line-height:23px;
|
||||
height:22px;
|
||||
margin-bottom:2px;
|
||||
display:block;
|
||||
position:relative;
|
||||
font-size:15px;
|
||||
line-height:23px;
|
||||
height:22px;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
#gpio .top a {
|
||||
width:250px;
|
||||
border-top-left-radius:13px;
|
||||
border-bottom-left-radius:13px;
|
||||
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;
|
||||
width:244px;
|
||||
border-top-right-radius:13px;
|
||||
border-bottom-right-radius:13px;
|
||||
}
|
||||
|
||||
#gpio a:hover,
|
||||
#gpio .active a {
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
}
|
||||
|
||||
#gpio .pin1 a:hover, #gpio .pin1.active a {border-radius:0;}
|
||||
@ -469,55 +494,55 @@ nav:after {
|
||||
#gpio li a small {font-size:11px;}
|
||||
|
||||
#gpio .overlay-pin a {
|
||||
background:rgb(235, 230, 211);
|
||||
color:#063541;
|
||||
background:rgb(235, 230, 211);
|
||||
color:#063541;
|
||||
}
|
||||
|
||||
#gpio .overlay-pin a:hover {
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
background:rgb(245, 243, 237);
|
||||
color:#063541;
|
||||
}
|
||||
|
||||
#gpio .overlay-power .phys {
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
#gpio .overlay-power a {
|
||||
background:#073642;
|
||||
color:#FFFFFF;
|
||||
background:#073642;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
|
||||
#gpio .overlay-ground .phys {
|
||||
background:#073642;
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
width:20px;
|
||||
height:22px;
|
||||
border-radius:11px;
|
||||
background:#073642;
|
||||
color:#FFFFFF;
|
||||
opacity:1;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
width:20px;
|
||||
height:22px;
|
||||
border-radius:11px;
|
||||
text-indent: 0px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
#gpio .bottom .overlay-ground .phys {
|
||||
padding-right:32px;
|
||||
padding-right:32px;
|
||||
right:0;
|
||||
}
|
||||
|
||||
#gpio .top .overlay-ground .phys {
|
||||
padding-left:31px;
|
||||
padding-left:31px;
|
||||
left:0;
|
||||
}
|
||||
|
||||
|
||||
#gpio .overlay-power a:hover {
|
||||
background:#268bd2;
|
||||
background:#268bd2;
|
||||
}
|
||||
|
||||
#gpio .overlay-ground a:hover .phys {
|
||||
background:#268bd2;
|
||||
background:#268bd2;
|
||||
}
|
||||
|
||||
#gpio li.overlay-ground span.pin {background:#073642;}
|
||||
@ -528,39 +553,39 @@ 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);
|
||||
color:#FFF;
|
||||
background:rgba(200,0,0,0.6);
|
||||
}
|
||||
|
||||
#gpio ul.bottom a {
|
||||
text-indent:10px;
|
||||
text-indent:10px;
|
||||
}
|
||||
#gpio .pin {
|
||||
display:block;
|
||||
border:1px solid transparent;
|
||||
border-radius:50%;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background:#002B36;
|
||||
position:absolute;
|
||||
right:2px;
|
||||
top:2px;
|
||||
display:block;
|
||||
border:1px solid transparent;
|
||||
border-radius:50%;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background:#002B36;
|
||||
position:absolute;
|
||||
right:2px;
|
||||
top:2px;
|
||||
}
|
||||
#gpio .pin:after {
|
||||
content:'';
|
||||
display:block;
|
||||
border-radius:100%;
|
||||
background:#FDF6E3;
|
||||
position:absolute;
|
||||
left:5px;
|
||||
top:5px;
|
||||
width:6px;
|
||||
height:6px;
|
||||
font-size:7px;
|
||||
content:'';
|
||||
display:block;
|
||||
border-radius:100%;
|
||||
background:#FDF6E3;
|
||||
position:absolute;
|
||||
left:5px;
|
||||
top:5px;
|
||||
width:6px;
|
||||
height:6px;
|
||||
font-size:7px;
|
||||
}
|
||||
#gpio .top .pin {
|
||||
left:2px;
|
||||
top:2px;
|
||||
left:2px;
|
||||
top:2px;
|
||||
}
|
||||
|
||||
.bottom .gnd a {color:rgba(233, 229, 210, 0.5);}
|
||||
@ -576,12 +601,12 @@ article img {max-width:100%;}
|
||||
#gpio .uart .pin {background:#6c71c4;}
|
||||
|
||||
#pinbase {
|
||||
width:58px;
|
||||
position:absolute;
|
||||
left:216px;
|
||||
height:493px;
|
||||
background:#073642;
|
||||
top:80px;
|
||||
width:58px;
|
||||
position:absolute;
|
||||
left:216px;
|
||||
height:493px;
|
||||
background:#073642;
|
||||
top:80px;
|
||||
}
|
||||
|
||||
span.alternate {display:none;}
|
||||
@ -589,20 +614,20 @@ span.alternate {display:none;}
|
||||
ol.linenums {margin-left:30px;}
|
||||
|
||||
@media (min-width:1200px){
|
||||
#container {
|
||||
width:1200px;
|
||||
}
|
||||
.board {
|
||||
right:1200px;
|
||||
}
|
||||
#sections ul .dropdown {
|
||||
min-width:700px;
|
||||
max-width:700px;
|
||||
}
|
||||
#content {
|
||||
width:700px;
|
||||
}
|
||||
.boards-page #content {
|
||||
width:898px;
|
||||
}
|
||||
#container {
|
||||
width:1200px;
|
||||
}
|
||||
.board {
|
||||
right:1200px;
|
||||
}
|
||||
#sections ul .dropdown {
|
||||
min-width:700px;
|
||||
max-width:700px;
|
||||
}
|
||||
#content {
|
||||
width:700px;
|
||||
}
|
||||
.boards-page #content {
|
||||
width:898px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user