initial
This commit is contained in:
+578
@@ -0,0 +1,578 @@
|
||||
/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
.browserupgrade {
|
||||
margin: 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 1em 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.browserupgrade a {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.browserupgrade a:hover {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* Dead Simple Grid (c) 2012 Vladimir Agafonkin */
|
||||
.col {
|
||||
padding: 0 1em;
|
||||
}
|
||||
.row .row {
|
||||
margin: 0 -1em;
|
||||
}
|
||||
.row:before,
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
.col {
|
||||
float: left;
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
body {
|
||||
font-family: "Lato", sans-serif;
|
||||
color: #757575;
|
||||
font-weight: 300;
|
||||
font-size: 1.25em;
|
||||
/* 20px */
|
||||
line-height: 1.6;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
color: #2d2d2d;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.8em;
|
||||
/* 56px */
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: #50e3c2;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1cb18f;
|
||||
text-decoration: none;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
.warning {
|
||||
color: red;
|
||||
}
|
||||
.github {
|
||||
background-image: url("../img/github.png");
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
top: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
opacity: 0.3;
|
||||
-webkit-transition: opacity .2s;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.github {
|
||||
background-image: url("../img/github@2x.png");
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
}
|
||||
.github:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.antennaio {
|
||||
background-image: url("../img/antenna.png");
|
||||
background-repeat: no-repeat;
|
||||
color: #cecece;
|
||||
width: 280px;
|
||||
height: 60px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-weight: 400;
|
||||
font-size: 0.6em;
|
||||
/* 12px */
|
||||
line-height: 5.5;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 7em;
|
||||
-webkit-transition: color .2s;
|
||||
transition: color .2s;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.antennaio {
|
||||
background-image: url("../img/antenna@2x.png");
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
}
|
||||
.antennaio:hover {
|
||||
color: #757575;
|
||||
}
|
||||
.antennaio span {
|
||||
padding: 0 0 0 70px;
|
||||
}
|
||||
.bars {
|
||||
background-image: url("../img/bars.png");
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
|
||||
.bars {
|
||||
background-image: url("../img/bars@2x.png");
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
}
|
||||
.section {
|
||||
padding: 2em 0;
|
||||
}
|
||||
.section-intro {
|
||||
text-align: center;
|
||||
margin: 3em 0 4em 0;
|
||||
max-height: 9999px;
|
||||
/* no font boosting please */
|
||||
}
|
||||
.section-intro h1 {
|
||||
line-height: 2.4;
|
||||
}
|
||||
.section-intro p {
|
||||
max-width: 560px;
|
||||
margin: auto;
|
||||
}
|
||||
.section-intro p.tagline {
|
||||
font-size: 0.8em;
|
||||
/* 16px */
|
||||
color: #a8a8a8;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
.section-examples {
|
||||
position: relative;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.examples {
|
||||
margin: auto;
|
||||
width: 980px;
|
||||
padding: 3em 0;
|
||||
}
|
||||
.examples .col {
|
||||
width: 50%;
|
||||
}
|
||||
.examples .col-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
.section-docs {
|
||||
margin: 3em 0;
|
||||
}
|
||||
.docs {
|
||||
width: 800px;
|
||||
margin: auto;
|
||||
max-height: 9999px;
|
||||
/* no font boosting please */
|
||||
}
|
||||
.docs header {
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-size: .9em;
|
||||
}
|
||||
.docs .how-to-use header,
|
||||
.docs .callbacks header,
|
||||
.docs .download header {
|
||||
background: #4278f5;
|
||||
}
|
||||
.docs .how-to-use strong,
|
||||
.docs .callbacks strong,
|
||||
.docs .download strong {
|
||||
color: #4278f5;
|
||||
}
|
||||
.docs .how-to-use a,
|
||||
.docs .callbacks a,
|
||||
.docs .download a {
|
||||
color: #4278f5;
|
||||
}
|
||||
.docs .how-to-use a:hover,
|
||||
.docs .callbacks a:hover,
|
||||
.docs .download a:hover {
|
||||
color: #0b43c6;
|
||||
}
|
||||
.docs .how-to-use pre,
|
||||
.docs .callbacks pre,
|
||||
.docs .download pre {
|
||||
background: white;
|
||||
border-left: 2px solid #4278f5;
|
||||
padding: 0 2em;
|
||||
}
|
||||
.docs .how-to-use code,
|
||||
.docs .callbacks code,
|
||||
.docs .download code {
|
||||
font-family: "Source Code Pro", sans-serif;
|
||||
font-size: 0.9em;
|
||||
/* 18px */
|
||||
color: #4278f5;
|
||||
}
|
||||
.docs .configuration header,
|
||||
.docs .faq header {
|
||||
background: #50e3c2;
|
||||
}
|
||||
.docs .configuration strong,
|
||||
.docs .faq strong {
|
||||
color: #50e3c2;
|
||||
}
|
||||
.docs .configuration a,
|
||||
.docs .faq a {
|
||||
color: #50e3c2;
|
||||
}
|
||||
.docs .configuration a:hover,
|
||||
.docs .faq a:hover {
|
||||
color: #1cb18f;
|
||||
}
|
||||
.docs .configuration pre,
|
||||
.docs .faq pre {
|
||||
background: white;
|
||||
border-left: 2px solid #50e3c2;
|
||||
padding: 0 2em;
|
||||
}
|
||||
.docs .configuration code,
|
||||
.docs .faq code {
|
||||
font-family: "Source Code Pro", sans-serif;
|
||||
font-size: 0.9em;
|
||||
/* 18px */
|
||||
color: #50e3c2;
|
||||
}
|
||||
.docs .license header,
|
||||
.docs .methods header {
|
||||
background: #edb867;
|
||||
}
|
||||
.docs .license strong,
|
||||
.docs .methods strong {
|
||||
color: #edb867;
|
||||
}
|
||||
.docs .license a,
|
||||
.docs .methods a {
|
||||
color: #edb867;
|
||||
}
|
||||
.docs .license a:hover,
|
||||
.docs .methods a:hover {
|
||||
color: #d58b19;
|
||||
}
|
||||
.docs .license pre,
|
||||
.docs .methods pre {
|
||||
background: white;
|
||||
border-left: 2px solid #edb867;
|
||||
padding: 0 2em;
|
||||
}
|
||||
.docs .license code,
|
||||
.docs .methods code {
|
||||
font-family: "Source Code Pro", sans-serif;
|
||||
font-size: 0.9em;
|
||||
/* 18px */
|
||||
color: #edb867;
|
||||
}
|
||||
.docs .instructions {
|
||||
padding: 2em 3em;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
.docs .faq p {
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
.docs .faq .question {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.docs .faq .question:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.controls {
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
left: 50%;
|
||||
margin-left: -190px;
|
||||
}
|
||||
.controls a {
|
||||
display: block;
|
||||
width: 150px;
|
||||
background-color: #50e3c2;
|
||||
color: white;
|
||||
float: left;
|
||||
padding: .3em 1em .5em 1em;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
-webkit-transition: background-color 0.2s;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.controls a:hover {
|
||||
background-color: #3adfba;
|
||||
}
|
||||
.controls a:focus {
|
||||
color: #d4f8f0;
|
||||
background-color: #199b7e;
|
||||
}
|
||||
.controls a.rating-enable {
|
||||
-webkit-border-top-left-radius: 999px;
|
||||
-webkit-border-bottom-left-radius: 999px;
|
||||
-moz-border-radius-topleft: 999px;
|
||||
-moz-border-radius-bottomleft: 999px;
|
||||
border-top-left-radius: 999px;
|
||||
border-bottom-left-radius: 999px;
|
||||
}
|
||||
.controls a.rating-disable {
|
||||
-webkit-border-top-right-radius: 999px;
|
||||
-webkit-border-bottom-right-radius: 999px;
|
||||
-moz-border-radius-topright: 999px;
|
||||
-moz-border-radius-bottomright: 999px;
|
||||
border-top-right-radius: 999px;
|
||||
border-bottom-right-radius: 999px;
|
||||
}
|
||||
.controls a:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.controls a.deactivated {
|
||||
background: #20c7a1;
|
||||
color: white;
|
||||
}
|
||||
/* ==========================================================================
|
||||
Media Queries
|
||||
========================================================================== */
|
||||
@media print {
|
||||
body {
|
||||
color: black;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: black;
|
||||
}
|
||||
.controls,
|
||||
.github,
|
||||
.antennaio {
|
||||
display: none;
|
||||
}
|
||||
.section-intro {
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
.section-intro p.tagline {
|
||||
color: black;
|
||||
}
|
||||
.section-examples {
|
||||
background: transparent;
|
||||
}
|
||||
.section-examples .examples {
|
||||
padding: 1em 0;
|
||||
}
|
||||
.section-docs {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.docs .how-to-use a,
|
||||
.docs .callbacks a,
|
||||
.docs .download a,
|
||||
.docs .configuration a,
|
||||
.docs .faq a,
|
||||
.docs .license a,
|
||||
.docs .methods a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
.docs .how-to-use a:hover,
|
||||
.docs .callbacks a:hover,
|
||||
.docs .download a:hover,
|
||||
.docs .configuration a:hover,
|
||||
.docs .faq a:hover,
|
||||
.docs .license a:hover,
|
||||
.docs .methods a:hover {
|
||||
color: black;
|
||||
}
|
||||
.docs .how-to-use header,
|
||||
.docs .callbacks header,
|
||||
.docs .download header,
|
||||
.docs .configuration header,
|
||||
.docs .faq header,
|
||||
.docs .license header,
|
||||
.docs .methods header {
|
||||
background: transparent;
|
||||
color: black;
|
||||
}
|
||||
.docs .how-to-use code,
|
||||
.docs .callbacks code,
|
||||
.docs .download code,
|
||||
.docs .configuration code,
|
||||
.docs .faq code,
|
||||
.docs .license code,
|
||||
.docs .methods code,
|
||||
.docs .how-to-use strong,
|
||||
.docs .callbacks strong,
|
||||
.docs .download strong,
|
||||
.docs .configuration strong,
|
||||
.docs .faq strong,
|
||||
.docs .license strong,
|
||||
.docs .methods strong {
|
||||
color: black;
|
||||
}
|
||||
.docs .how-to-use pre,
|
||||
.docs .callbacks pre,
|
||||
.docs .download pre,
|
||||
.docs .configuration pre,
|
||||
.docs .faq pre,
|
||||
.docs .license pre,
|
||||
.docs .methods pre {
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.docs .how-to-use .instructions,
|
||||
.docs .callbacks .instructions,
|
||||
.docs .download .instructions,
|
||||
.docs .configuration .instructions,
|
||||
.docs .faq .instructions,
|
||||
.docs .license .instructions,
|
||||
.docs .methods .instructions {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
.visuallyhidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
/* ==========================================================================
|
||||
Print styles
|
||||
========================================================================== */
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user