villivateur
/
pinout.vvzero.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/gadgetoid/pinout.xyz

This commit is contained in:
RogueM 2016-11-08 22:39:38 +00:00
parent ac4fb1c5a8 09542e25ee
commit 7ee7427e76
2 changed files with 83 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
resources/pinout.scss
View File

@ -1,3 +1,5 @@
$base-font-size: 16px;
$color-purple: #6c71c4; $color-purple: #6c71c4;
$color-pink: #D33682; $color-pink: #D33682;
$color-green: #859900; $color-green: #859900;
@ -9,13 +11,27 @@ $color-dark: #073642;
$color-content-bg: #EBE6D3; $color-content-bg: #EBE6D3;
$nav-bg: #5F8645;
$overlay-pin-bg: rgb(235, 230, 211);
$overlay-pin-fg: #063541;
$overlay-pin-bg-hover: rgb(245, 243, 237);
$overlay-pin-fg-hover: $overlay-pin-fg;
ul, li, a, body, h1, h2, h3, h4, h5, h6, p {margin:0;padding:0;text-decoration:none;} 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;} body {
font-family:'Avenir', sans-serif;
font-weight:500;
font-size:$base-font-size;
}
table { table {
margin:20px 0;border-collapse:collapse; margin:20px 0;
text-align:left;font-size:13px; border-collapse:collapse;
text-align:left;
font-size:0.8em;
td, th {border:1px solid $color-dark;padding:5px;} td, th {border:1px solid $color-dark;padding:5px;}
th {background:$color-dark;color:$color-content-bg;} th {background:$color-dark;color:$color-content-bg;}
@ -43,7 +59,7 @@ table {
.logo { .logo {
width:250px; width:250px;
font-size:24px; font-size:1.5em;
line-height:23px; line-height:23px;
cursor:pointer; cursor:pointer;
position: absolute; position: absolute;
@ -114,20 +130,23 @@ Content Area
border-top:2px solid darken($color-content-bg,10%); border-top:2px solid darken($color-content-bg,10%);
} }
h1 {font-size:30px;} h1 {font-size:1.8em;}
h2 {font-size:20px;margin-top:20px;} h2 {
font-size:1.2em;
margin-top:20px;
}
h1,h2,h3,h4,h5,h6 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;} h1,h2,h3,h4,h5,h6 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}
p, pre { p, pre {
margin-top:10px; margin-top:10px;
font-size: 16px; font-size: 1em;
line-height: 150%; line-height: 150%;
} }
h3 { h3 {
color:$color-pink; color:$color-pink;
font-size:22px; font-size:1.4em;
font-weight:bold; font-weight:bold;
} }
@ -173,7 +192,7 @@ Boards Page
} }
strong { strong {
font-size:16px; font-size:1em;
font-family: 'Avenir', sans-serif; font-family: 'Avenir', sans-serif;
font-weight: 500; font-weight: 500;
color:#FFFFFF; color:#FFFFFF;
@ -184,7 +203,7 @@ Boards Page
span { span {
color: #FFFFFF; color: #FFFFFF;
font-size: 12px; font-size: 0.75em;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
padding: 0 5px; padding: 0 5px;
@ -212,7 +231,7 @@ Boards Page
h4 { h4 {
text-transform: capitalize; text-transform: capitalize;
font-size: 16px; font-size: 1em;
margin: 10px 0 0 0; margin: 10px 0 0 0;
color:#ffffff; color:#ffffff;
} }
@ -228,35 +247,35 @@ Boards Page
padding: 0px 10px 0px 10px; padding: 0px 10px 0px 10px;
margin-top: 2px; margin-top: 2px;
margin-right: 2px; margin-right: 2px;
background: #859900; background: $color-green;
color: #FFF; color: #FFF;
font-size: 13px; font-size: 0.8em;
line-height: 23px; line-height: 23px;
height: 22px; height: 22px;
cursor:pointer; cursor:pointer;
text-transform:capitalize; text-transform:capitalize;
&:hover, &.selected { &:hover, &.selected {
color: #859900; color: $color-green;
background: #FFF; background: #FFF;
} }
} }
.facet:nth-of-type(2) li { .facet:nth-of-type(2) li {
background: #D33682; background: $color-pink;
} }
.facet:nth-of-type(2) li:hover, .facet:nth-of-type(2) li.selected { .facet:nth-of-type(2) li:hover, .facet:nth-of-type(2) li.selected {
color: #D33682; color: $color-pink;
background: #FFF; background: #FFF;
} }
.facet:nth-of-type(1) li { .facet:nth-of-type(1) li {
background: #268BD2; background: $color-blue;
} }
.facet:nth-of-type(1) li:hover, .facet:nth-of-type(1) li.selected { .facet:nth-of-type(1) li:hover, .facet:nth-of-type(1) li.selected {
color: #268BD2; color: $color-blue;
background: #FFF; background: #FFF;
} }
} }
@ -284,7 +303,7 @@ Featured Boards
padding-bottom: 10px; padding-bottom: 10px;
&:hover { &:hover {
background: #D33682; background: $color-pink;
} }
} }
@ -357,9 +376,8 @@ Left Column
margin-right:2px; margin-right:2px;
background:darken($color-purple,5%); background:darken($color-purple,5%);
color:#FFF; color:#FFF;
font-size: 14px; font-size: 0.9em;
line-height: 23px; line-height: 1.45em;
height: 22px;
&:hover {color: darken($color-purple,5%);background:mix($color-purple,#FFF,20%);} &:hover {color: darken($color-purple,5%);background:mix($color-purple,#FFF,20%);}
} }
@ -380,7 +398,7 @@ GPIO nav
nav { nav {
position:relative; position:relative;
width:292px; width:292px;
background:#5F8645; background:$nav-bg;
min-height:653px; min-height:653px;
margin-right:208px; margin-right:208px;
border-top-right-radius:46px; border-top-right-radius:46px;
@ -414,15 +432,15 @@ nav {
a { a {
display:block; display:block;
position:relative; position:relative;
font-size:15px; font-size:1em;
line-height:23px; line-height:23px;
height:22px; height:22px;
margin-bottom:2px; margin-bottom:2px;
} }
.phys { .phys {
color:#002B36; color:$color-dark;
font-size:12px; font-size:0.8em;
opacity:0.8; opacity:0.8;
position:absolute; position:absolute;
left:30px; left:30px;
@ -450,7 +468,6 @@ nav {
top:5px; top:5px;
width:6px; width:6px;
height:6px; height:6px;
font-size:7px;
} }
} }
@ -506,15 +523,20 @@ nav {
color:#063541; color:#063541;
} }
li a small {font-size:11px;} li a small {font-size:0.7em;}
.overlay-pin a { .overlay-pin {
background:rgb(235, 230, 211); a {
color:#063541; background:$overlay-pin-bg;
color:$overlay-pin-fg;
&:hover { &:hover {
background:rgb(245, 243, 237); background:$overlay-pin-bg-hover;
color:#063541; color:$overlay-pin-fg-hover;
}
}
&.gnd a {
color:rgba(6, 53, 65, 0.5);
} }
} }
@ -527,8 +549,8 @@ nav {
background:$color-dark; background:$color-dark;
color:#FFFFFF; color:#FFFFFF;
&::hover { &:hover {
background:#268bd2; background:$color-blue;
} }
} }
} }
@ -547,7 +569,7 @@ nav {
line-height: 22px; line-height: 22px;
} }
a:hover .phys { a:hover .phys {
background:#268bd2; background:$color-blue;
} }
span.pin {background:$color-dark;} span.pin {background:$color-dark;}
} }

47
resources/pinout.scss.css
View File

@ -5,13 +5,14 @@ ul, li, a, body, h1, h2, h3, h4, h5, h6, p {
body { body {
font-family: 'Avenir', sans-serif; font-family: 'Avenir', sans-serif;
font-weight: 500; } font-weight: 500;
font-size: 16px; }
table { table {
margin: 20px 0; margin: 20px 0;
border-collapse: collapse; border-collapse: collapse;
text-align: left; text-align: left;
font-size: 13px; } font-size: 0.8em; }
table td, table th { table td, table th {
border: 1px solid #073642; border: 1px solid #073642;
padding: 5px; } padding: 5px; }
@ -36,7 +37,7 @@ table {
.logo { .logo {
width: 250px; width: 250px;
font-size: 24px; font-size: 1.5em;
line-height: 23px; line-height: 23px;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@ -98,19 +99,19 @@ Content Area
background: none; background: none;
border-top: 2px solid #dbd2b0; } border-top: 2px solid #dbd2b0; }
#content h1 { #content h1 {
font-size: 30px; } font-size: 1.8em; }
#content h2 { #content h2 {
font-size: 20px; font-size: 1.2em;
margin-top: 20px; } margin-top: 20px; }
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
#content p, #content pre { #content p, #content pre {
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 1em;
line-height: 150%; } line-height: 150%; }
#content h3 { #content h3 {
color: #D33682; color: #D33682;
font-size: 22px; font-size: 1.4em;
font-weight: bold; } font-weight: bold; }
#content article { #content article {
padding: 15px; } padding: 15px; }
@ -151,7 +152,7 @@ Boards Page
display: block; display: block;
margin: 0 auto; } margin: 0 auto; }
#boards .board strong, #featured .board strong { #boards .board strong, #featured .board strong {
font-size: 16px; font-size: 1em;
font-family: 'Avenir', sans-serif; font-family: 'Avenir', sans-serif;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
@ -160,7 +161,7 @@ Boards Page
display: block; } display: block; }
#boards .board span, #featured .board span { #boards .board span, #featured .board span {
color: #FFFFFF; color: #FFFFFF;
font-size: 12px; font-size: 0.75em;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
padding: 0 5px; padding: 0 5px;
@ -181,7 +182,7 @@ Boards Page
margin-right: 18px; } margin-right: 18px; }
.facets h4 { .facets h4 {
text-transform: capitalize; text-transform: capitalize;
font-size: 16px; font-size: 1em;
margin: 10px 0 0 0; margin: 10px 0 0 0;
color: #ffffff; } color: #ffffff; }
.facets ul, .facets li { .facets ul, .facets li {
@ -195,7 +196,7 @@ Boards Page
margin-right: 2px; margin-right: 2px;
background: #859900; background: #859900;
color: #FFF; color: #FFF;
font-size: 13px; font-size: 0.8em;
line-height: 23px; line-height: 23px;
height: 22px; height: 22px;
cursor: pointer; cursor: pointer;
@ -284,9 +285,8 @@ Left Column
margin-right: 2px; margin-right: 2px;
background: #5a5fbd; background: #5a5fbd;
color: #FFF; color: #FFF;
font-size: 14px; font-size: 0.9em;
line-height: 23px; line-height: 1.45em; }
height: 22px; }
#interfaces li a:hover { #interfaces li a:hover {
color: #5a5fbd; color: #5a5fbd;
background: #e2e3f3; } background: #e2e3f3; }
@ -328,13 +328,13 @@ nav {
#gpio a { #gpio a {
display: block; display: block;
position: relative; position: relative;
font-size: 15px; font-size: 1em;
line-height: 23px; line-height: 23px;
height: 22px; height: 22px;
margin-bottom: 2px; } margin-bottom: 2px; }
#gpio .phys { #gpio .phys {
color: #002B36; color: #073642;
font-size: 12px; font-size: 0.8em;
opacity: 0.8; opacity: 0.8;
position: absolute; position: absolute;
left: 30px; left: 30px;
@ -358,8 +358,7 @@ nav {
left: 5px; left: 5px;
top: 5px; top: 5px;
width: 6px; width: 6px;
height: 6px; height: 6px; }
font-size: 7px; }
#gpio .top { #gpio .top {
left: 246px; } left: 246px; }
#gpio .top li { #gpio .top li {
@ -401,21 +400,23 @@ nav {
background: #f5f3ed; background: #f5f3ed;
color: #063541; } color: #063541; }
#gpio li a small { #gpio li a small {
font-size: 11px; } font-size: 0.7em; }
#gpio .overlay-pin a { #gpio .overlay-pin a {
background: #ebe6d3; background: #ebe6d3;
color: #063541; } color: #063541; }
#gpio .overlay-pin a:hover { #gpio .overlay-pin a:hover {
background: #f5f3ed; background: #f5f3ed;
color: #063541; } color: #063541; }
#gpio .overlay-pin.gnd a {
color: rgba(6, 53, 65, 0.5); }
#gpio .overlay-power .phys { #gpio .overlay-power .phys {
color: #FFFFFF; color: #FFFFFF;
opacity: 1; } opacity: 1; }
#gpio .overlay-power a { #gpio .overlay-power a {
background: #073642; background: #073642;
color: #FFFFFF; } color: #FFFFFF; }
#gpio .overlay-power a::hover { #gpio .overlay-power a:hover {
background: #268bd2; } background: #268BD2; }
#gpio .overlay-ground .phys { #gpio .overlay-ground .phys {
background: #073642; background: #073642;
color: #FFFFFF; color: #FFFFFF;
@ -428,7 +429,7 @@ nav {
text-indent: 0px; text-indent: 0px;
line-height: 22px; } line-height: 22px; }
#gpio .overlay-ground a:hover .phys { #gpio .overlay-ground a:hover .phys {
background: #268bd2; } background: #268BD2; }
#gpio .overlay-ground span.pin { #gpio .overlay-ground span.pin {
background: #073642; } background: #073642; }
#gpio ul li.hover-pin a, #gpio ul li.hover-pin a,