678 lines
11 KiB
CSS
678 lines
11 KiB
CSS
/*blue #0078c9
|
|
orange #ff5e3c */
|
|
|
|
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
|
|
|
|
@font-face {
|
|
font-family: 'icomoon';
|
|
src:url('../images/icons/icomoon.eot');
|
|
src:url('../images/icons/icomoond41d.eot?#iefix') format('embedded-opentype'),
|
|
url('../images/icons/icomoon.svg#icomoon') format('svg'),
|
|
url('../images/icons/icomoon.woff') format('woff'),
|
|
url('../images/icons/icomoon.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
::selection {
|
|
background: #0078c9;
|
|
color: #fff;
|
|
}
|
|
::-moz-selection {
|
|
background: #0078c9;
|
|
color: #fff;
|
|
}
|
|
|
|
body {
|
|
color: #5d6365;
|
|
font-size: 1em;
|
|
line-height: 1.6em;
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: 300;
|
|
background: #5d6365;
|
|
}
|
|
|
|
#background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#background img {
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
}
|
|
#background:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 20%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: -moz-linear-gradient(top, rgba(93,99,101,0) 0%, rgba(93,99,101,1) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(93,99,101,0)), color-stop(100%,rgba(93,99,101,1))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005d6365', endColorstr='#5d6365',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
|
|
#wrapper {
|
|
width: 100%;
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
box-shadow: 0.6em 0px 15px rgba(0,0,0,0.1), -0.6em 0px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
* {
|
|
-webkit-transition: all 300ms;
|
|
-moz-transition: all 300ms;
|
|
-o-transition: all 300ms;
|
|
-ms-transition: all 300ms;
|
|
transition: all 300ms;
|
|
}
|
|
|
|
h1 {
|
|
font-weight: 300;
|
|
font-size: 1.4em;
|
|
line-height: 1.4em;
|
|
margin-bottom: 1.8em;
|
|
}
|
|
h2 {
|
|
color: #a9b1b3;
|
|
font-weight: 300;
|
|
font-size: 4em;
|
|
line-height: 1.4em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
h3 {
|
|
font-size: 2em;
|
|
line-height: 1.4em;
|
|
margin-bottom: 0.7em;
|
|
padding-top: 1em;
|
|
}
|
|
h4 {
|
|
font-size: 1.4em;
|
|
line-height: 1.4em;
|
|
font-weight: 400;
|
|
margin-bottom: 1em;
|
|
}
|
|
p {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #0078c9;
|
|
font-weight: 600;
|
|
}
|
|
a:hover {
|
|
color: #a9b1b3;
|
|
}
|
|
a.alt {
|
|
color: rgba(255,255,255,0.75);
|
|
}
|
|
a.alt:hover {
|
|
color: rgba(255,255,255,1);
|
|
}
|
|
|
|
a:before {
|
|
font-family: 'icomoon';
|
|
font-style: normal;
|
|
speak: none;
|
|
font-weight: normal;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a.button {
|
|
display: inline-block;
|
|
padding: 0.8em 1em;
|
|
border: 3px solid #ff5e3c;
|
|
border-radius: 6px;
|
|
color: #ff5e3c;
|
|
background: #fff;
|
|
font-weight: 600;
|
|
}
|
|
a.button:hover {
|
|
background: #ff5e3c;
|
|
color: #fff;
|
|
}
|
|
a.button.alt {
|
|
color: #ff5e3c;
|
|
border: none;
|
|
}
|
|
a.button.alt:hover {
|
|
background: #ff5e3c;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
a.button:active {
|
|
-webkit-transform: scale3d(0.95,0.95,1);
|
|
-moz-transform: scale3d(0.95,0.95,1);
|
|
-o-transform: scale3d(0.95,0.95,1);
|
|
-ms-transform: scale3d(0.95,0.95,1);
|
|
transform: scale3d(0.95,0.95,1);
|
|
}
|
|
|
|
a.white {
|
|
color: #fff;
|
|
padding-bottom: 3px;
|
|
border-bottom: 1px solid rgba(255,255,255,0);
|
|
}
|
|
a.white:hover {
|
|
border-bottom: 1px solid rgba(255,255,255,1);
|
|
}
|
|
|
|
.row {
|
|
overflow: hidden;
|
|
}
|
|
|
|
header {
|
|
background: #fff;
|
|
max-width: 1300px;
|
|
box-shadow: 0px 3px 0px rgba(0,0,0,0.05);
|
|
}
|
|
header select {
|
|
display: none;
|
|
}
|
|
|
|
section {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
border-bottom: 2px dashed #e5eaeb;
|
|
padding: 6em;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
#talk {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 6em;
|
|
background: #0078c9;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
nav {
|
|
width: 100%;
|
|
max-width: 1300px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
background: #fff;
|
|
float: right;
|
|
z-index: 2;
|
|
text-align: right;
|
|
}
|
|
nav ul {
|
|
display: block;
|
|
width: auto;
|
|
float: right;
|
|
}
|
|
nav li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
float: left;
|
|
}
|
|
nav a {
|
|
display: inline-block;
|
|
font-weight: 400;
|
|
color: #a9b1b3;
|
|
padding: 1.5em 0.75em;
|
|
}
|
|
nav a:hover {
|
|
background: #0078c9;
|
|
color: #fff;
|
|
}
|
|
|
|
#mobile-nav {
|
|
display: none;
|
|
}
|
|
|
|
#social {
|
|
width: auto;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 3;
|
|
}
|
|
#social div {
|
|
float: left;
|
|
width: 90px;
|
|
padding: 1.5em 2em;
|
|
}
|
|
#tweet {
|
|
margin-top: 2px;
|
|
}
|
|
div#github {
|
|
position: relative;
|
|
bottom: 4px;
|
|
margin-left: 0px;
|
|
padding-top: 2em;
|
|
width: 90px;
|
|
}
|
|
#github a {
|
|
-webkit-transition: none;
|
|
-moz-transition: none;
|
|
-o-transition: none;
|
|
-ms-transition: none;
|
|
transition: none;
|
|
}
|
|
|
|
pre {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
padding: 3em;
|
|
background: #e6eff1;
|
|
box-shadow: 0px 0px 20px rgba(0,0,0,0.0);
|
|
margin-bottom: 4em;
|
|
white-space: pre-wrap;
|
|
}
|
|
pre:hover {
|
|
background: #fff;
|
|
box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
|
|
}
|
|
pre:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Welcome
|
|
-------------------------------------
|
|
*/
|
|
|
|
#welcome {
|
|
text-align: center;
|
|
padding: 12em 0 9em;
|
|
color: #fff;
|
|
width: 100%;
|
|
border-bottom: none;
|
|
background: rgba(0,0,0,0.3);
|
|
}
|
|
|
|
#welcome h1 {
|
|
display: block;
|
|
max-width: 635px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#tooltipster {
|
|
width: 100%;
|
|
max-width: 258px;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
#browser-support {
|
|
margin-bottom: 2.8em;
|
|
}
|
|
#browser-support li {
|
|
display: inline-block;
|
|
margin: 0.25em;
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
#browser-support li img {
|
|
height: 42px;
|
|
opacity: 0.5;
|
|
}
|
|
#browser-support li img:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
#download {
|
|
font-size: 1.2em;
|
|
line-height: 1.4em;
|
|
width: 100%;
|
|
}
|
|
#download a.button {
|
|
margin-right: 0.6em;
|
|
}
|
|
#download a.button:before {
|
|
content: "\64";
|
|
padding-right: 1em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Demos
|
|
-------------------------------------
|
|
*/
|
|
|
|
#demos ul {
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 1.4em;
|
|
line-height: 1.4em;
|
|
}
|
|
#demos li {
|
|
display: block;
|
|
width: 50%;
|
|
font-weight: 400;
|
|
margin-bottom: 1em;
|
|
overflow: hidden;
|
|
padding-top: 1.4em;
|
|
padding-right: 2em;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
float: left;
|
|
}
|
|
#demos span {
|
|
display: block;
|
|
border: 3px solid #ff5e3c;
|
|
border-radius: 100%;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
width: 5em;
|
|
height: 5em;
|
|
background: #ff5e3c;
|
|
color: #fff;
|
|
font-size: 0.6em;
|
|
line-height: 1em;
|
|
font-weight: 700;
|
|
padding: 1.8em 0 0 0;
|
|
text-align: center;
|
|
margin: -1.4em 1em 0 0;
|
|
text-transform: uppercase;
|
|
float: left;
|
|
}
|
|
#demos span:hover {
|
|
background: #fff !important;
|
|
color: #5d6365;
|
|
border: 3px solid #5d6365 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Tooltips
|
|
-------------------------------------
|
|
*/
|
|
|
|
#demos span.tooltipster-icon {
|
|
cursor: help;
|
|
margin-left: 4px;
|
|
background: #0078c9;
|
|
border: 3px solid #0078c9;
|
|
width: 2.3em;
|
|
height: 2.3em;
|
|
padding: 0.4em 0 0;
|
|
margin: 2em 0 0 -3em;
|
|
}
|
|
|
|
.tooltipster-default .tooltipster-content {
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
.tooltipster-default .tooltipster-content img {
|
|
float: left;
|
|
margin-right: 10px;
|
|
border: 2px solid #000;
|
|
}
|
|
.tooltipster-default .tooltipster-content p {
|
|
margin: 0;
|
|
}
|
|
.tooltipster-default .tooltipster-content a {
|
|
color: #fff;
|
|
border-bottom: 1px solid rgba(255,255,255,0.4);
|
|
}
|
|
.tooltipster-default .tooltipster-content a:hover {
|
|
color: #fff;
|
|
border-bottom: 1px solid rgba(255,255,255,1);
|
|
}
|
|
|
|
.tooltipster-blue {
|
|
background: #0078c9;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
}
|
|
.tooltipster-blue .tooltipster-content {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.tooltipster-white {
|
|
background: #fff;
|
|
color: #0078c9;
|
|
border-radius: 5px;
|
|
}
|
|
.tooltipster-white .tooltipster-content {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.tooltipster-pink {
|
|
background: url(../images/pattern-navy.png);
|
|
background-color: #ff3c70;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
box-shadow: inset -3px -3px 0 #ff3c70;
|
|
}
|
|
.tooltipster-pink .tooltipster-content {
|
|
font-family: 'Courier', monospace;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
padding: 15px 18px;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Options
|
|
-------------------------------------
|
|
*/
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
table h4 {
|
|
margin-bottom: 0;
|
|
}
|
|
tr:nth-child(odd) {
|
|
background: #f4f5f7;
|
|
}
|
|
td {
|
|
padding: 2em;
|
|
}
|
|
td h4 {
|
|
font-family: 'Courier', monospace;
|
|
color: #0078c9;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Themes
|
|
-------------------------------------
|
|
*/
|
|
|
|
#themes .themes span {
|
|
display: inline-block;
|
|
padding: 1em;
|
|
margin-right: 1em;
|
|
margin-bottom: 1em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tooltipster-default-preview {
|
|
border-radius: 5px;
|
|
border: 2px solid #000;
|
|
background: #4c4c4c;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
font-weight: 400;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
|
|
.tooltipster-light-preview {
|
|
border-radius: 5px;
|
|
border: 1px solid #cccccc;
|
|
background: #ededed;
|
|
color: #666666;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tooltipster-punk-preview {
|
|
border-radius: 5px;
|
|
border-bottom: 3px solid #f71169;
|
|
background: #2a2a2a;
|
|
color: #fff;
|
|
font-family: 'Courier', monospace;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tooltipster-noir-preview {
|
|
border-radius: 0px;
|
|
border: 3px solid #2c2c2c;
|
|
background: #fff;
|
|
color: #2c2c2c;
|
|
font-family: 'Georgia', serif;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tooltipster-shadow-preview {
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
|
|
color: #2c2c2c;
|
|
font-family: 'Arial', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
padding: 8px 10px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Talk
|
|
-------------------------------------
|
|
*/
|
|
|
|
#talk h3 {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
|
|
/*
|
|
-------------------------------------
|
|
Breakpoints
|
|
-------------------------------------
|
|
*/
|
|
|
|
@media all and (max-width : 1100px) {
|
|
#tweet, #gplus {
|
|
display: none;
|
|
}
|
|
#demos li {
|
|
width: 100%;
|
|
}
|
|
table, tr, td {
|
|
display: block;
|
|
}
|
|
td {
|
|
padding: 2em 2em 0 2em;
|
|
}
|
|
td:last-child {
|
|
padding-bottom: 2em;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width : 920px) {
|
|
#demos ul {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width : 820px) {
|
|
nav ul {
|
|
display: none;
|
|
}
|
|
#social div {
|
|
padding: 0.5em 0.7em;
|
|
}
|
|
header {
|
|
padding: 0;
|
|
}
|
|
header select {
|
|
display: block;
|
|
float: right;
|
|
margin: 1em 1em;
|
|
}
|
|
section {
|
|
padding: 3em;
|
|
}
|
|
#welcome {
|
|
padding: 7.4em 3em 6em;
|
|
}
|
|
#download span {
|
|
display: block;
|
|
margin-top: 0.5em;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width : 450px) {
|
|
table h4 {
|
|
font-size: 1em;
|
|
line-height: 1em;
|
|
}
|
|
section {
|
|
padding: 2em;
|
|
}
|
|
h2 {
|
|
font-size: 3em;
|
|
line-height: 1.2em;
|
|
margin-bottom: 0.23em;
|
|
}
|
|
h3 {
|
|
font-size: 1.4em;
|
|
line-height: 1.4em;
|
|
margin-bottom: 1.3em;
|
|
}
|
|
h4 {
|
|
font-size: 1.2em;
|
|
}
|
|
pre {
|
|
padding: 1em;
|
|
}
|
|
} |