fd9c7967c3
This removes empty spaces from the layout of the boards on the most of the browsers. The code preserves left aligned layout and is backward compatible with EI1 Thanks!
540 lines
12 KiB
CSS
540 lines
12 KiB
CSS
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;
|
|
font-size: 16px; }
|
|
|
|
table {
|
|
margin: 20px 0;
|
|
border-collapse: collapse;
|
|
text-align: left;
|
|
font-size: 0.8em; }
|
|
table td, table th {
|
|
border: 1px solid #073642;
|
|
padding: 5px; }
|
|
table th {
|
|
background: #073642;
|
|
color: #EBE6D3; }
|
|
table.details {
|
|
width: 100%; }
|
|
table.details td, table.details th {
|
|
border: none;
|
|
font-size: 16px;
|
|
vertical-align: top; }
|
|
table.details img {
|
|
margin-top: 54px; }
|
|
table.pin-functions {
|
|
width: 100%; }
|
|
table.pin-functions td {
|
|
width: 16.6666%; }
|
|
|
|
.prettyprint {
|
|
word-wrap: break-word; }
|
|
|
|
.logo {
|
|
width: 250px;
|
|
font-size: 1.5em;
|
|
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 10px;
|
|
top: 8px; }
|
|
.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 */ }
|
|
|
|
#container {
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
padding-top: 4px; }
|
|
|
|
/*
|
|
Footer language nav
|
|
*/
|
|
#lang {
|
|
display: block;
|
|
background: #C7C2AE;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
font-size: 0;
|
|
text-align: right; }
|
|
#lang a {
|
|
display: inline-block;
|
|
margin: 10px;
|
|
margin-left: 0px; }
|
|
|
|
/*
|
|
Content Area
|
|
*/
|
|
#content {
|
|
float: left;
|
|
background: #EBE6D3;
|
|
width: 500px;
|
|
min-height: 640px;
|
|
position: relative;
|
|
padding-bottom: 50px; }
|
|
#content hr {
|
|
border: none;
|
|
background: none;
|
|
border-top: 2px solid #dbd2b0; }
|
|
#content h1 {
|
|
font-size: 1.8em; }
|
|
#content h2 {
|
|
font-size: 1.2em;
|
|
margin-top: 20px; }
|
|
#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: 1em;
|
|
line-height: 150%; }
|
|
#content h3 {
|
|
color: #D33682;
|
|
font-size: 1.4em;
|
|
font-weight: bold; }
|
|
#content article {
|
|
padding: 15px; }
|
|
#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
|
|
*/
|
|
#boards > ul {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start; }
|
|
|
|
#boards .board, #featured .board {
|
|
box-sizing: border-box;
|
|
width: 25%;
|
|
display: block;
|
|
text-align: center; }
|
|
#boards .board a, #featured .board a {
|
|
padding-top: 20px;
|
|
padding-bottom: 0px;
|
|
min-height: 220px;
|
|
display: block;
|
|
background: none; }
|
|
#boards .board img, #featured .board img {
|
|
max-width: 80%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0 auto; }
|
|
#boards .board strong, #featured .board strong {
|
|
font-size: 1em;
|
|
font-family: 'Avenir', sans-serif;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin: 0;
|
|
padding: 0 5px;
|
|
display: block; }
|
|
#boards .board span, #featured .board span {
|
|
color: #FFFFFF;
|
|
font-size: 0.75em;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
padding: 0 5px;
|
|
display: block; }
|
|
|
|
#boards .board a:hover {
|
|
background: #f3f0e5; }
|
|
#boards .board strong {
|
|
color: #333333; }
|
|
|
|
.facets {
|
|
position: relative;
|
|
top: 90px;
|
|
padding: 4px 15px 15px 15px;
|
|
background: #073642;
|
|
border-top-right-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
margin-right: 18px; }
|
|
.facets h4 {
|
|
text-transform: capitalize;
|
|
font-size: 1em;
|
|
margin: 10px 0 0 0;
|
|
color: #ffffff; }
|
|
.facets ul, .facets li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none; }
|
|
.facets .facet li {
|
|
display: inline-block;
|
|
padding: 0px 10px 0px 10px;
|
|
margin-top: 2px;
|
|
margin-right: 2px;
|
|
background: #859900;
|
|
color: #FFF;
|
|
font-size: 0.8em;
|
|
line-height: 23px;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
text-transform: capitalize; }
|
|
.facets .facet li:hover, .facets .facet li.selected {
|
|
color: #859900;
|
|
background: #FFF; }
|
|
.facets .facet:nth-of-type(2) li {
|
|
background: #D33682; }
|
|
.facets .facet:nth-of-type(2) li:hover, .facets .facet:nth-of-type(2) li.selected {
|
|
color: #D33682;
|
|
background: #FFF; }
|
|
.facets .facet:nth-of-type(1) li {
|
|
background: #268BD2; }
|
|
.facets .facet:nth-of-type(1) li:hover, .facets .facet:nth-of-type(1) li.selected {
|
|
color: #268BD2;
|
|
background: #FFF; }
|
|
|
|
/*
|
|
Featured Boards
|
|
*/
|
|
#featured {
|
|
overflow: hidden;
|
|
background: #C32672; }
|
|
#featured ul {
|
|
overflow: hidden; }
|
|
#featured .board {
|
|
width: 25%; }
|
|
#featured .board a {
|
|
min-height: 130px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px; }
|
|
#featured .board a:hover {
|
|
background: #D33682; }
|
|
#featured .board img {
|
|
max-width: 50%; }
|
|
|
|
/*
|
|
Footer
|
|
*/
|
|
.footer {
|
|
clear: both;
|
|
padding: 20px 0px;
|
|
text-align: center; }
|
|
.footer a {
|
|
color: #5F8645; }
|
|
|
|
/*
|
|
Left Column
|
|
*/
|
|
#leftcolumn {
|
|
float: left;
|
|
width: 500px; }
|
|
|
|
#crumbtrail {
|
|
background: #073642; }
|
|
#crumbtrail p {
|
|
color: #fff;
|
|
margin: 0;
|
|
padding: 5px 15px; }
|
|
#crumbtrail a, #crumbtrail a:hover, #crumbtrail a:active {
|
|
color: #fff; }
|
|
#crumbtrail a.more {
|
|
text-align: center;
|
|
display: block; }
|
|
#crumbtrail a:hover {
|
|
text-decoration: underline; }
|
|
|
|
#interfaces {
|
|
background: #6c71c4;
|
|
padding: 0px 0px 2px 2px;
|
|
display: block;
|
|
clear: both;
|
|
line-height: 2px;
|
|
text-align: right; }
|
|
#interfaces ul, #interfaces li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
#interfaces li {
|
|
display: inline-block; }
|
|
#interfaces li a {
|
|
display: inline-block;
|
|
padding: 3px 10px 3px 10px;
|
|
margin-top: 2px;
|
|
margin-right: 2px;
|
|
background: #5a5fbd;
|
|
color: #FFF;
|
|
font-size: 0.9em;
|
|
line-height: 1.45em; }
|
|
#interfaces li a:hover {
|
|
color: #5a5fbd;
|
|
background: #e2e3f3; }
|
|
#interfaces li.selected a {
|
|
background: #484fb5;
|
|
color: #FFF;
|
|
text-decoration: underline; }
|
|
|
|
/*
|
|
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; }
|
|
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 a {
|
|
display: block;
|
|
position: relative;
|
|
font-size: 1em;
|
|
line-height: 23px;
|
|
height: 22px;
|
|
margin-bottom: 2px; }
|
|
#gpio .phys {
|
|
color: #073642;
|
|
font-size: 0.8em;
|
|
opacity: 0.8;
|
|
position: absolute;
|
|
left: 30px;
|
|
text-indent: 0; }
|
|
#gpio .pin {
|
|
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; }
|
|
#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: 0.7em; }
|
|
#gpio .overlay-pin a {
|
|
background: #ebe6d3;
|
|
color: #063541; }
|
|
#gpio .overlay-pin a:hover {
|
|
background: #f5f3ed;
|
|
color: #063541; }
|
|
#gpio .overlay-pin.gnd a {
|
|
color: rgba(6, 53, 65, 0.5); }
|
|
#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; }
|
|
#gpio .pow5v .pin {
|
|
background: #DC322F; }
|
|
#gpio .gpio .pin {
|
|
background: #859900; }
|
|
#gpio .i2c .pin {
|
|
background: #268BD2; }
|
|
#gpio .spi .pin {
|
|
background: #D33682; }
|
|
#gpio .uart .pin {
|
|
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 {
|
|
width: 58px;
|
|
position: absolute;
|
|
left: 216px;
|
|
height: 493px;
|
|
background: #073642;
|
|
top: 80px; }
|
|
|
|
.boards-page nav {
|
|
margin-right: 0; }
|
|
.boards-page #leftcolumn {
|
|
width: 302px; }
|
|
.boards-page #content {
|
|
width: 698px; }
|
|
|
|
@media (min-width: 1200px) {
|
|
#container {
|
|
width: 1200px; }
|
|
|
|
.board {
|
|
right: 1200px; }
|
|
|
|
#content {
|
|
width: 700px; }
|
|
|
|
.boards-page #content {
|
|
width: 898px; } }
|