16pixels
Version:
16pixels.css is a set of CSS rules to ensure consistent 16 pixels based typography. Pixels are used for font sizes and line heights, as well as for paddings and margins. Can be used as typography normalizer. No dependencies. Wrap your HTML content with cl
1,080 lines (1,079 loc) • 40.2 kB
HTML
<!-- 1. use /tools/modularscale/index.html?15&px&1.25,1.125&web&text for font size and line height
2. lazyload images
3. remove font face, display block, opacity 1, visibility visible in critical inline css
4. set font display swap in font face in css -->
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="x-ua-compatible" content="ie=edge" /> -->
<!-- https://content-security-policy.com/ --><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; connect-src 'self' 'unsafe-inline' https:; frame-src 'self' https:; media-src 'self' https:; img-src 'self' 'unsafe-inline' https: data:" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>16pixels Demo Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,700,700italic%7CSource+Code+Pro:400,700&subset=latin,cyrillic,latin-ext" />
<link rel="stylesheet" href="./cdn/normalize/5.0.0/css/normalize.min.css" />
<link rel="stylesheet" href="./css/16pixels.css" />
<style>
/*! @import "prettyprint.fixed"; */
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint {
background: #fff;
font-family: Menlo, Bitstream Vera Sans Mono, DejaVu Sans Mono, Monaco, Consolas, monospace;
border: 0/* !important */
;
}
.pln {
color: #333;
}
ol.linenums {
margin-top: 0;
margin-bottom: 0;
color: #ccc;
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
padding-left: 1em;
background-color: #fff;
list-style-type: decimal;
}
@media screen {
.str {
color: #183691;
}
.kwd {
color: #a71d5d;
}
.com {
color: #969896;
}
.typ {
color: #0086b3;
}
.lit {
color: #0086b3;
}
.pun {
color: #333;
}
.opn {
color: #333;
}
.clo {
color: #333;
}
.tag {
color: navy;
}
.atn {
color: #795da3;
}
.atv {
color: #183691;
}
.dec {
color: #333;
}
.var {
color: teal;
}
.fun {
color: #900;
}
}
/**
* custom fixes for github-v2.min.css
* a google-code-prettify theme for englishextra.github.io based on
* source: jmblog.github.io/color-themes-for-google-code-prettify/themes/github-v2.min.css
*/
/**
* custom fixes for github-v2.min.css
*/
pre.prettyprint,
code.prettyprint {
background-color: #F3F3F3;
border-radius: 0;
}
pre.prettyprint {
width: 100%;
white-space: pre-wrap;
background-color: #F3F3F3;
border: 0 solid transparent;
overflow-x: scroll;
overflow-y: auto;
padding: 1.000em;
margin: 1.000em auto;
}
pre.prettyprinted {
box-shadow: none;
border: 0;
}
.prettyprint ol.linenums {
list-style: decimal outside;
color: #C9C9C9;
border-left: 1px solid #C9C9C9;
padding: 0;
margin: 0 0 0 2.375rem/* !important */
;
}
ol.linenums li {
line-height: 1.500;
background-color: inherit;
padding-left: 0.750rem;
}
/**
* added media print
* source: github.com/google/code-prettify/blob/master/src/prettify.css
*/
@media print {
pre.prettyprinted,
pre.prettyprint,
code.prettyprint {
background-color: #FFFFFF;
color: #000000;
border-radius: 0;
}
pre .str,
code .str {
color: #060;
}
pre .kwd,
code .kwd {
color: #006;
font-weight: bold;
}
pre .com,
code .com {
color: #600;
font-style: italic;
}
pre .typ,
code .typ {
color: #404;
font-weight: bold;
}
pre .lit,
code .lit {
color: #044;
}
pre .pun,
code .pun {
color: #440;
}
pre .pln,
code .pln {
color: #000000;
}
pre .tag,
code .tag {
color: #006;
font-weight: bold;
}
pre .atn,
code .atn {
color: #404;
}
pre .atv,
code .atv {
color: #060;
}
}
/*! @import "btn-totop"; */
/**
* github.com/sksmatt/UItoTop-jQuery-Plugin/
*/
#btn-totop {
width: 33.000pt;
height: 33.000pt;
position: fixed;
bottom: 0;
right: 0;
font-size: 1.000em;
text-indent: 100%;
text-decoration: none;
border: none;
opacity: 0;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
outline: none;
z-index: 999;
}
#btn-totop-hover {
display: block;
float: left;
width: 33.000pt;
height: 33.000pt;
overflow: hidden;
background-color: rgba(220, 220, 220, 0.5);
/* file size: 0.6ko | optimized file size: 0.5ko | base64 size: 0.7ko .project-pages-ui-icons-up-arrow-000000-24x24 */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iMjAuMjc1LDEwLjUyOSAxMi40OTksMi43NTEgMTEuNzkyLDMuNDU4IDExLjgwMSwzLjQ2NyA0LjcyNSwxMC41NDIgNS40MzIsMTEuMjQ5IDEyLDQuNjggMTIsMjEuNSAxMywyMS41IDEzLDQuNjY4IDE5LjU2OCwxMS4yMzYgIi8+PC9zdmc+);
background-size: 18.000pt 18.000pt;
background-position: 6.750pt 6.750pt;
background-repeat: no-repeat;
}
#btn-totop:hover {
background-color: rgba(220, 220, 220, 0.5);
}
/*! @import "16pixels-demo-main"; */
/**
* main
*/
html,
body {
height: 100%;
}
html {
font-size: 100%;
line-height: 1.500;
/**
* set the parent to background transparent
* and position relative to parent, absolute for child
*/
background-color: transparent;
}
body {
font-family: "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", "Segoe UI", "Segoe WP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.500;
width: 100%;
color: #373737;
background-color: #F0F0F0;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
outline: none;
overflow-x: hidden;
margin: 0;
padding: 0;
}
/**
* englishextra specific rules
*/
a {
color: inherit;
text-decoration: none;
}
a:focus,
a:active,
button:focus,
button:active,
select:focus,
select:active {
-webkit-tap-highlight-color: transparent;
outline: none;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
b,
strong,
.bolder {
font-weight: bold;
}
i,
em,
.italic {
font-style: italic;
}
u,
.underline {
text-decoration: underline;
}
*,
*:after,
*::before {
box-sizing: border-box;
}
::-moz-selection {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(58, 150, 221, 0.9);
}
::selection {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(58, 150, 221, 0.9);
}
/**
* clearfix css-tricks.com/snippets/css/clear-fix/
*/
.cf:after {
content: "";
display: table;
clear: both;
}
/**
* fit width
*/
.fit-width {
min-width: 100%;
}
/**
* fit half width
*/
.fit-half-width {
min-width: 50%;
}
/**
* hide and show on mobile
*/
.show-inline-on-mobile,
.show-block-on-mobile {
display: none/* !important */
;
}
@media handheld,
only screen and (max-width: 800px) {
.hide-on-mobile {
display: none/* !important */
;
width: 0;
height: 0;
}
.show-inline-on-mobile {
display: inline/* !important */
;
}
.show-block-on-mobile {
display: block/* !important */
;
}
}
/**
* other
*/
.page {
width: 100%;
/**
* set the parent to min height 100%, not just height
* and position relative to parent, absolute for child
*/
min-height: 100%;
position: relative;
top: 0;
/* left: 280px; */
left: 0;
background-color: #F0F0F0;
}
.container {
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
background-color: #FFFFFF;
padding: 0;
margin: 0 auto;
}
.content-wrapper {
padding: 0 16px 24px 16px;
margin: 0 auto;
}
.container .content-wrapper,
.app-content .content-wrapper {
width: 100%;
height: 100%;
}
/**
* fixes to 16pixels
* modularscale.com
* github.com/modularscale/modularscale-sass
* ----------------
* $ms-base: 16px;
* $ms-ratio: 1.5,1.1;
* ----------------
* ms(16) / 55.236px
* ms(15) / 54px
* ms(14) / 50.215px
* ms(13) / 45.65px
* ms(12) / 41.5px
* ms(11) / 37.727px
* ms(10) / 36px
* ms(9) / 34.297px
* ms(8) / 31.179px
* ms(7) / 28.345px
* ms(6) / 25.768px
* ms(5) / 24px
* ms(4) / 23.426px
* ms(3) / 21.296px
* ms(2) / 19.36px
* ms(1) / 17.6px
* ms(0) / 16px
* ms(-1) / 14.545px
* ms(-2) / 13.223px
* ms(-3) / 12.021px
* ms(-4) / 10.928px
* ms(-5) / 10.667px
* ms(-6) / 9.935px
*/
.col a {
font-weight: inherit;
color: #007DD1;
}
.col a:hover,
.col a:focus,
.col a:active {
color: #007DD1;
}
.col a:visited {
color: #878787;
}
.col h1 {
font-family: "Source Sans Pro", "Open Sans", "Exo2", "Fira Sans", "Segoe UI Light", "Segoe WP Light", sans-serif;
font-weight: 300;
line-height: 1.200;
color: inherit;
margin-top: 0/* !important */
;
margin-bottom: 24px;
}
.col dl dt a:hover,
.col dl dt a:focus,
.col dl dt a:active {
color: inherit;
}
.col img,
.col svg,
.col canvas,
.col video,
.col textarea {
width: 100%;
}
.col img.inline {
width: auto;
}
.col img,
.col svg,
.col canvas {
height: auto;
}
.col video,
.col svg {
display: block;
padding: 0;
}
.col canvas {
vertical-align: bottom;
}
.col .video-wrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.col .video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.col .soundcloud-wrapper iframe {
width: 100%;
height: 166px;
}
.col .holder-contents-select+canvas {
margin-top: 24px;
}
.col h2+div form p:first-child {
margin-top: 0;
}
.col table.respond {
width: auto;
}
.col table {
border: none;
border-top-width: 0.063rem;
border-top-style: solid;
border-top-color: #C3C3C3;
border-right-width: 0.063rem;
border-right-style: solid;
border-right-color: #C3C3C3;
border-left-width: 0.063rem;
border-left-style: solid;
border-left-color: #C3C3C3;
}
.col table th {
border: none;
border-bottom-width: 0.063rem;
border-bottom-style: solid;
border-bottom-color: #C3C3C3;
}
.col table td {
border: none;
border-bottom-width: 0.063rem;
border-bottom-style: solid;
border-bottom-color: #C3C3C3;
}
.col table td.with-img-only {
padding: 8px;
}
@media screen and (max-width: 640px) {
.col table.respond {
border: none;
}
.col table.respond,
.col table.respond tr,
.col table.respond td {
display: block;
box-sizing: border-box;
}
.col table.respond tr {
width: 100%;
float: left;
position: relative;
border: 0.063rem solid #C3C3C3;
border-bottom: none;
margin-bottom: 24px;
}
.col table.respond tr:last-child {
margin-bottom: 0;
}
.col table.respond thead,
.col table.respond tfoot {
display: none;
}
.col table.respond td::before {
display: block;
float: left;
content: attr(data-label);
font-weight: bold;
text-align: right;
padding-right: 10px;
}
}
.col hr,
.col .hr {
height: 0.063rem;
background-color: #C3C3C3;
}
.col pre,
.col pre code {
font-family: "Source Code Pro", "Consolas", monospace;
}
/**
* logo
*/
.logo {
width: 100%;
}
.logo svg {
display: block;
width: 100%;
height: auto;
}
/**
* media queries
*/
/**
* max and portrait
*/
@media only screen and (max-width: 1080px) and (orientation: portrait) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 800px) and (orientation: portrait) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 768px) and (orientation: portrait) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 640px) and (orientation: portrait) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 600px) and (orientation: portrait) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 540px) and (orientation: portrait) {
.container {
max-width: 100%;
}
.col img,
.col select {
width: 100%;
}
}
@media only screen and (max-width: 480px) and (orientation: portrait) {
.container {
max-width: 100%;
}
.col img,
.col select {
width: 100%;
}
}
@media only screen and (max-width: 400px) and (orientation: portrait) {
.container {
max-width: 100%;
}
.col img,
.col select {
width: 100%;
}
}
@media only screen and (max-width: 360px) and (orientation: portrait) {
.container {
max-width: 100%;
}
.col h1 {
font-size: 26px;
}
.col h2 {
font-size: 22px;
}
.col img,
.col select {
width: 100%;
}
}
@media only screen and (max-width: 240px) and (orientation: portrait) {
.container {
max-width: 100%;
}
.col h1 {
font-size: 26px;
}
.col h2 {
font-size: 22px;
}
.col img,
.col select {
width: 100%;
}
}
/**
* max and landscape
*/
@media only screen and (max-width: 1920px) and (orientation: landscape) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 1366px) and (orientation: landscape) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 1280px) and (orientation: landscape) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 1130px) and (orientation: landscape) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 980px) and (orientation: landscape) {
.container {
max-width: 39.000rem;
}
}
@media only screen and (max-width: 802px) and (orientation: landscape) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 691px) and (orientation: landscape) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 600px) and (orientation: landscape) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 540px) and (orientation: landscape) {
.container {
max-width: 100%;
}
}
@media only screen and (max-width: 480px) and (orientation: landscape) {
.container {
max-width: 100%;
}
.col img,
.col select {
width: 100%;
}
}
@media only screen and (max-width: 320px) and (orientation: landscape) {
.container {
max-width: 100%;
}
.col h1 {
font-size: 26px;
}
.col h2 {
font-size: 22px;
}
.col img,
.col select {
width: 100%;
}
}
@media only screen and (min-width: 801px) and (max-width: 920px) {}
/*!
* @see {@link https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.css}
*/
.github-fork-ribbon{width:12.1em;height:12.1em;position:fixed;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px;}.github-fork-ribbon.fixed{position:fixed;}.github-fork-ribbon:before,.github-fork-ribbon:after{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);pointer-events:auto;}.github-fork-ribbon:after{content:attr(data-ribbon);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,0.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,0.7);}.github-fork-ribbon.left-top,.github-fork-ribbon.left-bottom{right:auto;left:0;}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0;}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after{right:auto;left:-3.23em;}.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{top:auto;bottom:3.23em;}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
</style>
</head>
<body>
<!-- https://haltersweb.github.io/Accessibility/svg.html --><svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" focusable="false">
<defs>
<symbol id="ui-icon-ChevronDownSmall" viewBox="0 0 32 32">
<path d="M28.191 6.107l3.809 3.791-16 15.995-16-15.995 3.809-3.791 12.191 12.189 12.191-12.189z"></path>
</symbol>
</defs>
</svg>
<div class="page" id="page" role="document">
<div class="container" id="container" role="main">
<div class="logo"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="12.5 165 935 230" enable-background="new 12.5 165 935 230" xml:space="preserve">
<rect x="12.5" y="165" fill="#36D7B7" width="935" height="230"/>
<rect x="12.5" y="165" fill="#CB2948" width="345" height="230"/>
<path fill="#FFFFFF" d="M12.5,394.999V366.25H70V222.5H41.25v-28.75H70V165h28.75v201.25h57.5v28.749H12.5z M12.5,251.25V222.5
h28.75v28.75H12.5z"/>
<path fill="#FFFFFF" d="M213.75,366.25V222.5h28.75v28.75h86.25V280H242.5v86.25H213.75z M242.5,222.5v-28.75h28.75v28.75H242.5z
M242.5,394.999V366.25h86.25v28.749H242.5z M271.25,193.75V165h57.5v28.75H271.25z M328.75,366.25V280h28.75v86.25H328.75z"/>
<path fill="#363636" d="M405.763,338.149v26.075c0,5.354,0.172,9.352,0.515,11.991c0.344,2.634,0.949,4.714,1.826,6.239
c0.874,1.521,2.13,2.78,3.767,3.769c1.635,0.989,4.281,1.896,7.933,2.721v6.056h-46.572v-6.056c2.74-0.823,4.968-1.669,6.678-2.533
c1.714-0.866,3.025-2.146,3.94-3.832c0.912-1.688,1.52-3.976,1.825-6.856c0.303-2.888,0.456-6.72,0.456-11.497V258.187
c0-5.933-0.077-10.154-0.228-12.668c-0.154-2.513-0.457-4.592-0.913-6.242c-0.456-1.646-1.123-3.005-1.998-4.078
c-0.877-1.07-2.055-1.978-3.538-2.719c-1.486-0.742-3.938-1.483-7.363-2.225v-6.55l26.825-1.112h6.963l-1.483,20.145l1.713,0.495
c4.716-5.191,8.446-8.96,11.185-11.309c2.741-2.349,5.576-4.304,8.506-5.872c2.929-1.563,5.745-2.675,8.448-3.335
c2.699-0.657,5.572-0.988,8.618-0.988c12.557,0,22.201,5.087,28.937,15.263c6.736,10.177,10.105,25.07,10.105,44.676
c0,13.595-1.905,25.027-5.71,34.297c-3.806,9.271-9.342,16.233-16.608,20.886c-7.268,4.657-15.923,6.983-25.969,6.983
c-5.634,0-10.73-0.516-15.298-1.544C413.753,341.26,409.568,339.879,405.763,338.149z M405.763,297.365
c0,7.908,0.458,14.008,1.371,18.29c0.912,4.285,2.528,7.769,4.851,10.443c2.32,2.68,5.062,4.68,8.218,5.993
c3.159,1.32,7.324,1.979,12.501,1.979c9.206,0,16.133-4.142,20.773-12.423c4.642-8.277,6.964-20.494,6.964-36.642
c0-32.299-8.716-48.449-26.141-48.449c-4.263,0-7.933,0.722-11.015,2.163c-3.084,1.443-6.149,3.769-9.188,6.983
c-3.046,3.212-5.195,6.323-6.451,9.331c-1.257,3.009-1.884,6.241-1.884,9.702V297.365z"/>
<path fill="#363636" d="M504.847,335.798c2.967-0.986,5.079-1.853,6.334-2.594c1.259-0.74,2.323-1.77,3.197-3.09
c0.873-1.315,1.559-3.336,2.056-6.054c0.493-2.721,0.74-6.962,0.74-12.732v-53.882c0-5.272-0.075-9.518-0.228-12.73
c-0.155-3.214-0.687-5.789-1.599-7.725c-0.914-1.935-2.304-3.377-4.168-4.325c-1.865-0.946-4.506-1.75-7.934-2.41v-6.55
l26.599-1.112h6.964v88.364c0,7.089,0.303,12.012,0.912,14.771c0.607,2.763,1.771,4.862,3.483,6.303
c1.709,1.443,4.506,2.7,8.39,3.769v6.058h-44.748L504.847,335.798L504.847,335.798z M537.495,175.258v23.976h-21.007v-23.976
H537.495z"/>
<path fill="#363636" d="M618.085,270.545l14.836-20.393c1.599-2.225,2.894-4.386,3.885-6.487c0.987-2.102,1.481-4.264,1.481-6.49
c0-1.894-0.646-3.459-1.938-4.696c-1.297-1.236-3.311-2.142-6.049-2.72v-6.056h37.322v6.056c-2.894,0.907-5.841,2.679-8.846,5.314
c-3.007,2.64-6.678,6.881-11.016,12.729l-23.629,31.392l26.025,37.942c3.729,5.438,7.077,9.601,10.047,12.481
c2.968,2.886,5.936,4.942,8.902,6.178v6.059h-45.892v-6.059c6.319-0.818,9.477-3.375,9.477-7.659c0-1.73-0.269-3.379-0.797-4.944
c-0.534-1.563-1.524-3.376-2.969-5.438l-16.551-24.964l-17.581,24.719c-1.297,1.813-2.303,3.481-3.024,5.004
c-0.725,1.526-1.086,3.234-1.086,5.13c0,2.226,0.702,4.06,2.113,5.5c1.407,1.441,3.632,2.33,6.676,2.654v6.059h-38.122v-6.059
c2.514-0.986,4.773-2.225,6.792-3.706c2.014-1.482,4.068-3.397,6.166-5.746c2.09-2.35,4.853-5.786,8.275-10.319l23.741-31.888
l-24.313-36.087c-3.35-4.943-6.014-8.527-7.989-10.752c-1.979-2.225-3.809-3.912-5.481-5.066c-1.675-1.153-3.35-1.978-5.021-2.473
v-6.056h44.747v6.056c-6.015,0.989-9.019,3.544-9.019,7.663c0,1.897,0.399,3.792,1.198,5.685c0.8,1.896,2.033,3.999,3.711,6.303
L618.085,270.545z"/>
<path fill="#363636" d="M768.875,320.847c-4.869,5.521-9.344,9.848-13.412,12.976c-4.072,3.135-8.543,5.583-13.411,7.355
c-4.87,1.771-10.237,2.655-16.096,2.655c-15.68,0-27.509-5.085-35.501-15.264c-7.989-10.175-11.986-25.189-11.986-45.047
c0-12.278,2.035-23.112,6.107-32.504c4.067-9.394,9.874-16.643,17.408-21.751c7.534-5.106,16.208-7.663,26.027-7.663
c7.683,0,14.227,1.319,19.633,3.956c5.401,2.637,9.72,6.24,12.954,10.813c3.234,4.573,5.745,10.343,7.535,17.303
c1.786,6.964,2.797,16.049,3.025,27.251h-71.915v2.226c0,9.724,1.008,17.9,3.022,24.532c2.018,6.634,5.327,11.822,9.932,15.57
c4.604,3.754,10.599,5.625,17.979,5.625c6.235,0,11.853-1.257,16.838-3.771c4.98-2.509,9.947-6.611,14.896-12.295L768.875,320.847z
M749.701,270.668c-0.461-8.897-1.488-16.167-3.084-21.813c-1.6-5.644-3.995-9.969-7.192-12.977
c-3.194-3.006-7.381-4.511-12.556-4.511c-7.841,0-14.097,3.398-18.778,10.195c-4.678,6.798-7.438,16.5-8.273,29.104L749.701,270.668
L749.701,270.668z"/>
<path fill="#363636" d="M822.186,310.957c0,7.089,0.302,12.012,0.911,14.771c0.606,2.763,1.771,4.862,3.482,6.303
c1.712,1.443,4.51,2.7,8.39,3.768v6.059h-45.316v-6.059c3.805-1.066,6.447-2.18,7.935-3.334c1.484-1.153,2.549-2.534,3.196-4.142
c0.646-1.604,1.101-3.787,1.37-6.551c0.264-2.758,0.399-6.364,0.399-10.814V207.516c0-7.912-0.059-13.429-0.173-16.562
c-0.115-3.13-0.42-5.788-0.914-7.972c-0.495-2.182-1.18-3.894-2.054-5.129c-0.876-1.236-2.056-2.225-3.539-2.966
c-1.482-0.741-4.164-1.483-8.047-2.225v-6.426L815.337,165h6.849V310.957z"/>
<path fill="#363636" d="M931.656,250.771h-10.96c-1.674-4.942-3.652-8.836-5.938-11.679c-2.281-2.843-4.87-4.839-7.76-5.993
c-2.896-1.153-6.434-1.731-10.616-1.731c-6.092,0-10.942,1.544-14.554,4.634c-3.618,3.09-5.423,7.314-5.423,12.668
c0,3.792,0.72,6.922,2.167,9.394c1.443,2.471,3.691,4.779,6.734,6.92c3.043,2.143,8.409,4.986,16.098,8.526
c7.76,3.629,13.753,6.965,17.979,10.013c4.221,3.049,7.531,6.591,9.929,10.628c2.396,4.037,3.596,8.857,3.596,14.461
c0,6.51-1.024,11.987-3.08,16.437c-2.054,4.45-4.95,8.076-8.677,10.876c-3.73,2.803-8.161,4.82-13.299,6.056
c-5.137,1.237-10.75,1.854-16.838,1.854c-6.393,0-12.597-0.516-18.606-1.544c-6.011-1.029-11.872-2.366-17.578-4.017v-25.831h11.188
c2.056,7.583,5.098,13.083,9.132,16.499c4.031,3.42,9.588,5.13,16.666,5.13c2.739,0,5.423-0.31,8.047-0.928
c2.625-0.618,4.968-1.646,7.021-3.089c2.056-1.44,3.691-3.397,4.911-5.872c1.213-2.472,1.824-5.562,1.824-9.27
c0-4.203-0.762-7.618-2.283-10.257c-1.521-2.637-3.881-5.047-7.076-7.231c-3.197-2.18-8.827-5.129-16.896-8.836
c-6.927-3.129-12.483-6.179-16.665-9.146c-4.188-2.965-7.477-6.466-9.875-10.505c-2.396-4.035-3.597-8.813-3.597-14.335
c0-6.755,1.692-12.626,5.081-17.612c3.385-4.983,8.274-8.794,14.668-11.432c6.394-2.636,13.886-3.956,22.486-3.956
c5.023,0,9.873,0.27,14.556,0.805c4.681,0.535,10.558,1.586,17.638,3.151V250.771z"/>
</svg></div>
<div class="content-wrapper">
<div class="col">
<h1 id="h1">Heading 1</h1>
<div class="hr"></div>
<p><span class="larger"><strong>16pixels</strong> is a set of CSS rules to ensure consistent 16 pixels based typography. Pixels are used for font sizes and line heights, as well as for paddings and margins. Can be used as typography normalizer. No dependencies. Wrap your HTML content with class <strong>.col</strong> and you are done.</span></p>
<div class="hr"></div>
<h2>Contents</h2>
<div>
<form method="get" action="javascript:void(0);">
<p>
<select class="chapters-select" id="chapters-select" aria-label="Select / �������">
<option value="#h1">Choose something…</option>
<option value="#h1">Heading 1</option>
<option value="#h2">Heading 2</option>
<option value="#h3">Heading 3</option>
<option value="#h4">Heading 4</option>
<option value="#h5">Heading 5</option>
<option value="#h6">Heading 6</option>
</select>
</p>
</form>
</div>
<h2 id="h2">Heading 2</h2>
<p><a href="#">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<table class="respond fit-width">
<caption>
Table Caption
</caption>
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell Text</td>
<td>Table Cell Text</td>
</tr>
<tr>
<td>Table Cell Text</td>
<td>Table Cell Text</td>
</tr>
<tr>
<td>Table Cell Text</td>
<td>Table Cell Text</td>
</tr>
<tr>
<td>Table Cell Text</td>
<td>Table Cell Text</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Table Footer</th>
<th>Table Footer</th>
</tr>
</tfoot>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<h3 id="h3">Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<dl>
<dt>Definition List Title</dt>
<dd>Definition List Text</dd>
<dt>Definition List Title</dt>
<dd>Definition List Text</dd>
<dt>Definition List Title</dt>
<dd>Definition List Text</dd>
</dl>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<h4 id="h4">Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<ul>
<li>Unordered List Text</li>
<li>Unordered List Text</li>
<li>Unordered List Text</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<h5 id="h5">Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<ol>
<li>Ordered List Text</li>
<li>Ordered List Text</li>
<li>Ordered List Text</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<h6 id="h6">Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<p><img src="./img/640x360.png" alt="" /></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<div>
<form action="#" method="post">
<input type="hidden" name="id" value="" />
<fieldset>
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" value=""/>
</fieldset>
<fieldset>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" value=""/>
</fieldset>
<fieldset>
<label for="email">Email Address</label>
<input type="text" id="email" name="email" value=""/>
</fieldset>
<fieldset>
<label for="field-1">What's on your mind?</label>
<textarea id="field-1" name="field-1" rows="5" cols="50"></textarea>
</fieldset>
<fieldset>
<input type="submit" onclick="return false;" value="Submit"/>
</fieldset>
</form>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,</p>
<h2>npm Install</h2>
<pre class="prettyprint linenums line-numbers"><code class="language-plain">npm install 16pixels</code></pre>
<h2>Setup</h2>
<pre class="prettyprint lang-html linenums line-numbers"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="16pixels.min.css" />
</head>
<body>
<div class="col">
<h1>Heading&#160;1</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
</p>
</div>
</body>
</html></code></pre>
<h2>GitHub</h2>
<p><a href="https://github.com/englishextra/16pixels">englishextra/16pixels</a></p>
<h2>License</h2>
<p>Available under <a href="https://opensource.org/licenses/MIT">MIT License</a></p>
</div>
</div>
</div>
</div>
<a class="github-fork-ribbon right-top" href="https://github.com/englishextra/16pixels" title="Fork me on GitHub" data-ribbon="Fork me on GitHub">Fork me on GitHub</a>
<script>
/*!
* load JS async
* modified order of arguments, removed CommonJS stuff
* github.com/filamentgroup/loadJS
* gist.github.com/englishextra/397e62184fde65d7755744fdb7a01829
* @param {String} _src path string
* @param {Object} callback callback function
* loadJS(_src,callback)
*/
(function(root){var loadJS=function(_src,callback){"use strict";var ref=document.getElementsByTagName("script")[0];var script=document.createElement("script");script.src=_src;script.async=true;ref.parentNode.insertBefore(script,ref);if(callback&&"function"===typeof callback){script.onload=callback;}return script;};root.loadJS=loadJS;}("undefined" !== typeof window ? window : this));
/*!
* modified for babel Zenscroll - v3.2.2
* github.com/zengabor/zenscroll
* Copyright 2015-2016 Gabor Lenard
* removed AMD, CommonJS support
* fixed IIFE enforcing
* added brackets in if / for
* source: github.com/zengabor/zenscroll/blob/dist/zenscroll.js
* passes jshint
*/
var zenscroll=(function(){"use strict";if(typeof window==="undefined"||!("document"in window)){return{};}var createScroller=function(scrollContainer,defaultDuration,edgeOffset){defaultDuration=defaultDuration||999;if(!edgeOffset&&edgeOffset!==0){edgeOffset=9;}var scrollTimeoutId;var setScrollTimeoutId=function(newValue){scrollTimeoutId=newValue;};var docElem=document.documentElement;var nativeSmoothScrollEnabled=function(){return("getComputedStyle"in window)&&window.getComputedStyle(scrollContainer?scrollContainer:document.body)["scroll-behavior"]==="smooth";};var getScrollTop=function(){if(scrollContainer){return scrollContainer.scrollTop;}else{return window.scrollY||docElem.scrollTop;}};var getViewHeight=function(){if(scrollContainer){return Math.min(scrollContainer.offsetHeight,window.innerHeight);}else{return window.innerHeight||docElem.clientHeight;}};var getRelativeTopOf=function(elem){if(scrollContainer){return elem.offsetTop;}else{return elem.getBoundingClientRect().top+getScrollTop()-docElem.offsetTop;}};var stopScroll=function(){clearTimeout(scrollTimeoutId);setScrollTimeoutId(0);};var scrollToY=function(endY,duration,onDone){stopScroll();if(nativeSmoothScrollEnabled()){(scrollContainer||window).scrollTo(0,endY);if(onDone){onDone();}}else{var startY=getScrollTop();var distance=Math.max(endY,0)-startY;duration=duration||Math.min(Math.abs(distance),defaultDuration);var startTime=new Date().getTime();(function loopScroll(){setScrollTimeoutId(setTimeout(function(){var p=Math.min((new Date().getTime()-startTime)/duration,1);var y=Math.max(Math.floor(startY+distance*(p<0.5?2*p*p:p*(4-p*2)-1)),0);if(scrollContainer){scrollContainer.scrollTop=y;}else{window.scrollTo(0,y);}if(p<1&&(getViewHeight()+y)<(scrollContainer||docElem).scrollHeight){loopScroll();}else{setTimeout(stopScroll,99);if(onDone){onDone();}}},9));})();}};var scrollToElem=function(elem,duration,onDone){scrollToY(getRelativeTopOf(elem)-edgeOffset,duration,onDone);};var scrollIntoView=function(elem,duration,onDone){var elemHeight=elem.getBoundingClientRect().height;var elemTop=getRelativeTopOf(elem);var elemBottom=elemTop+elemHeight;var containerHeight=getViewHeight();var containerTop=getScrollTop();var containerBottom=containerTop+containerHeight;if((elemTop-edgeOffset)<containerTop||(elemHeight+edgeOffset)>containerHeight){scrollToElem(elem,duration,onDone);}else if((elemBottom+edgeOffset)>containerBottom){scrollToY(elemBottom-containerHeight+edgeOffset,duration,onDone);}else if(onDone){onDone();}};var scrollToCenterOf=function(elem,duration,offset,onDone){scrollToY(Math.max(getRelativeTopOf(elem)-getViewHeight()/2+(offset||elem.getBoundingClientRect().height/2),0),duration,onDone);};var setup=function(newDefaultDuration,newEdgeOffset){if(newDefaultDuration){defaultDuration=newDefaultDuration;}if(newEdgeOffset===0||newEdgeOffset){edgeOffset=newEdgeOffset;}};return{setup:setup,to:scrollToElem,toY:scrollToY,intoView:scrollIntoView,center:scrollToCenterOf,stop:stopScroll,moving:function(){return!!scrollTimeoutId;}};};var defaultScroller=createScroller();if("addEventListener"in window&&document.body.style.scrollBehavior!=="smooth"&&!window.noZensmooth){var replaceUrl=function(hash){try{history.replaceState({},"",window.location.href.split("#")[0]+hash);}catch(e){}};window.addEventListener("click",function(event){var anchor=event.target;while(anchor&&anchor.tagName!=="A"){anchor=anchor.parentNode;}if(!anchor||event.which!==1||event.shiftKey||event.metaKey||event.ctrlKey||event.altKey){return;}var href=anchor.getAttribute("href")||"";if(href.indexOf("#")===0){if(href==="#"){event.preventDefault();defaultScroller.toY(0);replaceUrl("");}else{var targetId=anchor.hash.substring(1);var targetElem=document.getElementById(targetId);if(targetElem){event.preventDefault();defaultScroller.to(targetElem);replaceUrl("#"+targetId);}}}},false);}return{createScroller:createScroller,setup:defaultScroller.setup,to:defaultScroller.to,toY:defaultScroller.toY,intoView:defaultScroller.intoView,center:defaultScroller.stop,moving:defaultScroller.moving};}());
</script>
<script>
loadJS("https://cdn.jsdelivr.net/prettify/0.1/prettify.js",function(){"undefined"!==typeof window.prettyPrint&&prettyPrint();});
loadJS("https://buttons.github.io/buttons.js",function(){});
/*!
* init select
*/
(function (w, d, a) {
a && (a.onchange = function () {
var h = this.value || "",
zh = h ? d.getElementById(h.replace(/^#/, "")) : "",
l = function (h) {
h && (d.location.href = h);
};
if (h) {
w.zenscroll ? (zh ? zenscroll.to(zh) : l(h)) : l(h);
}
})
})(window, document, document.getElementById("chapters-select") || "");
/*!
* init btn-totop
*/
(function (w, d, b, u, v) {
var a = d.createElement("a");
a.setAttribute("style", "opacity:0;");
a.setAttribute("href", "#");
a.setAttribute("title", "\u041d\u0430\u0432\u0435\u0440\u0445");
a.setAttribute("id", u);
a.setAttribute("onclick", "function scrollTop2(c){var b=window.pageYOffset,d=0,e=setInterval(function(b,a){return function(){a-=b*c;window.scrollTo(0,a);d++;(150<d||0>a)&&clearInterval(e)}}(c,b--),50)};window.zenscroll?zenscroll.toY(0):scrollTop2(50);return !1;");
btn_hover = d.createElement("span");
btn_hover.setAttribute("id", v);
a.appendChild(btn_hover);
t = d.createTextNode("\u041d\u0430\u0432\u0435\u0440\u0445");
a.appendChild(t);
b.appendChild(a);
w.onscroll = function () {
var o = w.pageYOffset || d.documentElement.scrollTop || d.body.scrollTop,
h = w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight,
btn = d.getElementById(u) || "";
btn && (o > h ? (btn.style.visibility = "visible", btn.style.opacity = 1) : (btn.style.visibility = "hidden", btn.style.opacity = 0));
};
}
(window, document, document.getElementsByTagName("body")[0] || document.documentElement, "btn-totop", "btn-totop-hover"));
/*!
* show page, finish ToProgress
*/
var showPageFinishProgress = function () {
"use strict";
var d = document,
c = d.querySelector("#container") || "",
g = function (a) {
a.style.opacity = 1;
};
if (c) {
g(c);
}
};
window.addEventListener("load", showPageFinishProgress);
</script>
</body>
</html>