You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
956 lines
15 KiB
956 lines
15 KiB
/* Demo site CSS. Not mobile first, not semantic, not optimized, made for 20 minutes, mess */
|
|
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section, figure {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
figure {
|
|
display: block;
|
|
}
|
|
html {
|
|
/*overflow-y: scroll;*/
|
|
}
|
|
|
|
a {
|
|
color: #3169B3;
|
|
}
|
|
a:hover {
|
|
color: #C00;
|
|
}
|
|
|
|
* {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: "myriad-pro","Myriad Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
color: #282B30;
|
|
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-moz-font-feature-settings: "liga", "kern";
|
|
|
|
}
|
|
|
|
|
|
|
|
/*code {
|
|
background: #F8F8F8;
|
|
padding: .1em .4em;
|
|
color: #c82829;
|
|
font-size: 14px;
|
|
}*/
|
|
code, pre {
|
|
font-family: Menlo, Monaco, monospace;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
color: #333;
|
|
tab-size: 4;
|
|
}
|
|
pre {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: auto;
|
|
|
|
word-wrap: normal;
|
|
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: auto;
|
|
}
|
|
code {
|
|
padding: 0;
|
|
padding: 3px 5px;
|
|
margin: 0;
|
|
background: #f2f2f2;
|
|
border-radius: 2px;
|
|
}
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
|
|
|
|
}
|
|
h3 code {
|
|
font-size: 22px;
|
|
font-weight: normal;
|
|
padding: 6px 10px;
|
|
}
|
|
h3 code.default {
|
|
font-size: 12px;
|
|
padding: 0;
|
|
background: none;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.docs p {
|
|
margin: 0;
|
|
padding-bottom: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
.docs h1 {
|
|
margin-bottom: 32px;
|
|
}
|
|
.docs h1 a {
|
|
text-decoration: none;
|
|
}
|
|
.docs h1 a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.docs h2 {
|
|
margin: 0;
|
|
margin: 36px 0 12px;
|
|
}
|
|
.docs h3 {
|
|
margin: 0;
|
|
margin: 24px 0 8px 0;
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
}
|
|
.docs ul,
|
|
.docs ol {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.docs li {
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.docs-menu {
|
|
position: absolute;
|
|
width: 160px;
|
|
left: 0;
|
|
top: 106px;
|
|
|
|
}
|
|
|
|
.docs-menu ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 25px 0;
|
|
|
|
border-top: 1px solid #CCC;
|
|
border-bottom: 1px solid #CCC;
|
|
}
|
|
|
|
.docs-menu__ad {
|
|
padding: 25px 10px;
|
|
border-bottom: 1px solid #CCC;
|
|
font-size: 13px;
|
|
line-height: 17px;
|
|
position: relative;
|
|
}
|
|
.docs-menu a {
|
|
text-decoration: none;
|
|
width: 100%;
|
|
}
|
|
a.docs-logo {
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
margin-bottom: 0;
|
|
text-decoration: none;
|
|
}
|
|
.docs-menu li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding:0;
|
|
}
|
|
a.docs-menu__item--active {
|
|
color: #222;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.codepen-embed {
|
|
margin-left: -30px;
|
|
padding: 16px 30px;
|
|
width: 100%;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
background-color: #f8f8f8;
|
|
height: 600px;
|
|
|
|
}
|
|
.codepen-embed--disabled {
|
|
height: auto;
|
|
}
|
|
.codepen-embed p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.docs .highlight {
|
|
border-radius: 2px;
|
|
margin-left: -30px;
|
|
padding: 16px 30px;
|
|
width: 100%;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Syntax highlighter styles (for docs) */
|
|
.highlight { background-color: #f8f8f8 }
|
|
.c { color: #888; } /* Comment */
|
|
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
|
.k { color: #a71d5d; } /* Keyword */
|
|
.o { color: #000000; } /* Operator */
|
|
.cm { color: #888; } /* Comment.Multiline */
|
|
.cp { color: #888; font-weight: bold;} /* Comment.Preproc */
|
|
.c1 { color: #888; } /* Comment.Single */
|
|
.cs { color: #888; font-weight: bold; } /* Comment.Special */
|
|
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
|
.ge { color: #000000; } /* Generic.Emph */
|
|
.gr { color: #aa0000 } /* Generic.Error */
|
|
.gh { color: #888 } /* Generic.Heading */
|
|
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
|
.go { color: #888888 } /* Generic.Output */
|
|
.gp { color: #555555 } /* Generic.Prompt */
|
|
.gs { font-weight: bold } /* Generic.Strong */
|
|
.gu { color: #aaaaaa } /* Generic.Subheading */
|
|
.gt { color: #aa0000 } /* Generic.Traceback */
|
|
.kc { color: #0086b3; } /* Keyword.Constant */
|
|
.kd { color: #a71d5d; } /* Keyword.Declaration */
|
|
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
|
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
|
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
|
.kt { color: #795da3; } /* Keyword.Type */
|
|
.m { color: #009999 } /* Literal.Number */
|
|
.s { color: #df5000 } /* Literal.String */
|
|
.na { color: #a71d5d } /* Name.Attribute */
|
|
.nb { color: #0086B3 } /* Name.Builtin */
|
|
.nc { color: #795da3; } /* Name.Class */
|
|
.no { color: #a71d5d } /* Name.Constant */
|
|
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
|
.ni { color: #800080 } /* Name.Entity */
|
|
.ne { color: #990000; font-weight: bold } /* Name.Exception */
|
|
.nf { color: #990000; font-weight: bold } /* Name.Function */
|
|
.nl { color: #990000; font-weight: bold } /* Name.Label */
|
|
.nn { color: #555555 } /* Name.Namespace */
|
|
.nt { color: #0086b3 } /* Name.Tag */
|
|
.nv { color: #a71d5d } /* Name.Variable */
|
|
.ow { color: #000000; font-weight: bold } /* Operator.Word */
|
|
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
.mf { color: #009999 } /* Literal.Number.Float */
|
|
.mh { color: #009999 } /* Literal.Number.Hex */
|
|
.mi { color: #009999 } /* Literal.Number.Integer */
|
|
.mo { color: #009999 } /* Literal.Number.Oct */
|
|
.sb { color: #df5000 } /* Literal.String.Backtick */
|
|
.sc { color: #df5000 } /* Literal.String.Char */
|
|
.sd { color: #df5000 } /* Literal.String.Doc */
|
|
.s2 { color: #df5000 } /* Literal.String.Double */
|
|
.se { color: #df5000 } /* Literal.String.Escape */
|
|
.sh { color: #df5000 } /* Literal.String.Heredoc */
|
|
.si { color: #df5000 } /* Literal.String.Interpol */
|
|
.sx { color: #df5000 } /* Literal.String.Other */
|
|
.sr { color: #009926 } /* Literal.String.Regex */
|
|
.s1 { color: #df5000 } /* Literal.String.Single */
|
|
.ss { color: #990073 } /* Literal.String.Symbol */
|
|
.bp { color: #888 } /* Name.Builtin.Pseudo */
|
|
.vc { color: #a71d5d } /* Name.Variable.Class */
|
|
.vg { color: #a71d5d } /* Name.Variable.Global */
|
|
.vi { color: #a71d5d } /* Name.Variable.Instance */
|
|
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
|
|
|
|
.language-css .k {
|
|
color: #0086b3;
|
|
}
|
|
.language-css .nt {
|
|
color: #63a35c;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*body.open-sans {
|
|
font-family: "open-sans";
|
|
}
|
|
.futura-pt {
|
|
|
|
}
|
|
.futura-pt p {
|
|
font-family: "adelle";
|
|
}
|
|
.futura-pt h1, .futura-pt h2 {
|
|
font-family: "futura-pt";
|
|
text-transform: uppercase;
|
|
}
|
|
.futura-pt h3 {
|
|
font-weight: bold;
|
|
}
|
|
*/
|
|
|
|
|
|
img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
border: 0;
|
|
}
|
|
|
|
|
|
.video {
|
|
width: 100%;
|
|
margin: 0 0 24px 0;
|
|
}
|
|
.video__container {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom: 56.25%;
|
|
padding-top: 35px;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.video__container iframe {
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.video-desc {
|
|
width: 100%;
|
|
max-width: 740px;
|
|
margin: 12px auto;
|
|
}
|
|
|
|
|
|
p {
|
|
margin: 0 0 12px;
|
|
}
|
|
ul {
|
|
list-style: disc;
|
|
}
|
|
ul, ol {
|
|
padding: 0;
|
|
margin: 0 0 12px 25px;
|
|
}
|
|
li {
|
|
margin: 0 0 12px 0;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-size: 48px;
|
|
line-height: 1;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.row--heading {
|
|
position: relative;
|
|
}
|
|
.section--head p {
|
|
text-align: left;
|
|
font-size: 26px;
|
|
line-height: 32px;
|
|
margin-bottom: 24px;
|
|
|
|
font-size: 19px;
|
|
line-height: 29px;
|
|
|
|
}
|
|
|
|
|
|
.section--head .github-button {
|
|
position: absolute;
|
|
right:0;
|
|
top:0;
|
|
}
|
|
.row--nav {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
line-height: 1.1;
|
|
}
|
|
.navigation {
|
|
width: 100%;
|
|
background: #F7F7F7;
|
|
position: relative;
|
|
padding: 30px 0;
|
|
}
|
|
.navigation a {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid #92ABCD;
|
|
}
|
|
|
|
a.twitter-nav-link {
|
|
border: 0;
|
|
margin: 0 0.2em;
|
|
}
|
|
.twitter-nav-link span {
|
|
border-bottom: 1px solid #92ABCD;
|
|
}
|
|
.navigation a:hover,
|
|
.twitter-nav-link:hover span {
|
|
border-bottom-color: #C00;
|
|
}
|
|
.twitter-nav-link:before {
|
|
content: '';
|
|
background: url('../test/twitter.svg');
|
|
display: inline-block;
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
background-size: 0.7em 0.7em;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0.1em;
|
|
margin-right: 0.1em;
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
font-size: 32px;
|
|
line-height: 1.1;
|
|
margin-bottom: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
margin: 0 0 8px 0;
|
|
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
font-weight: 600;
|
|
}
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
span.highlight {
|
|
background:rgb(246, 243, 226);
|
|
}
|
|
.title-block p {
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
max-width: 600px;
|
|
margin-bottom: 24px;
|
|
|
|
}
|
|
|
|
p, ul.text-list {
|
|
color: #444;
|
|
}
|
|
.section--head p,
|
|
.title-block p {
|
|
color: #666;
|
|
}
|
|
|
|
|
|
|
|
|
|
.title-block p {
|
|
font-size: 19px;
|
|
line-height: 29px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section {
|
|
width: 100%;
|
|
margin-top: 176px;
|
|
}
|
|
.docs {
|
|
margin-top: 60px;
|
|
}
|
|
.section--head {
|
|
margin: 0;
|
|
background: #EEE;
|
|
/*background: linear-gradient(180deg, #eee 0%,#fff 100%);*/
|
|
padding: 132px 0;
|
|
}
|
|
|
|
|
|
.row {
|
|
max-width: 800px;
|
|
margin: 24px auto;
|
|
padding: 0 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.row--docs {
|
|
max-width: 960px;
|
|
padding-left: 210px;
|
|
}
|
|
.row--heading {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.row--footer {
|
|
text-align: center;
|
|
padding: 132px 0;
|
|
}
|
|
.row--wide {
|
|
max-width: 1000px;
|
|
}
|
|
.row--video {
|
|
max-width: 1160px;
|
|
}
|
|
|
|
.row--wide img {
|
|
float: left;
|
|
margin: 0 12px 12px 0;
|
|
width: 200px;
|
|
}
|
|
img.img--with_border {
|
|
border: 1px solid #DDD;
|
|
border-radius: 2px;
|
|
}
|
|
.img-desc {
|
|
margin-left: 212px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*.main-wrapper {
|
|
background: none;
|
|
width: 100%;
|
|
padding-top: 0;
|
|
|
|
}
|
|
.content-wrap {
|
|
|
|
|
|
|
|
}*/
|
|
|
|
|
|
/* clearfix */
|
|
.row:after{
|
|
content: " ";
|
|
visibility: hidden;
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
}
|
|
.row--large {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
|
|
.section--head h1 a {
|
|
vertical-align: super;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*p.intro {
|
|
margin-top: 24px;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.col-50 {
|
|
width: 48%;
|
|
float: left;
|
|
}
|
|
.col-50:nth-child(1) {
|
|
margin-right: 4%;
|
|
}
|
|
.col-img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.style-select {
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
.style-select .radio {
|
|
position: relative;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.style-select label {
|
|
padding-left: 24px;
|
|
position: relative;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.style-select input {
|
|
position: absolute;
|
|
left:0;
|
|
top:0;
|
|
width:24px;
|
|
height:24px;
|
|
overflow:hidden;
|
|
margin:0;
|
|
padding:0;
|
|
border:0;
|
|
outline:0;
|
|
opacity:0;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.style-select input + label:before {
|
|
content: '';
|
|
position: absolute;
|
|
left:0;
|
|
top:4px;
|
|
background: none;
|
|
border-radius: 50%;
|
|
width:16px;
|
|
height:16px;
|
|
box-sizing: border-box;
|
|
border: 2px solid rgba(0,0,0,0.6);
|
|
}
|
|
.radio:hover label:before {
|
|
border-color: #3169B3;
|
|
}
|
|
.style-select input:checked + label:before {
|
|
border-color: #3169B3;
|
|
}
|
|
.style-select input:checked + label:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 9px;
|
|
width:6px;
|
|
height: 6px;
|
|
background: #3169B3;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/*.section--developers {
|
|
color: #FFF;
|
|
background: #222;
|
|
background: #1f1f1f;
|
|
padding: 80px 0;
|
|
}
|
|
.section--developers a {
|
|
color:#FFFFFF;
|
|
}
|
|
.section--developers p,
|
|
.section--developers ul.text-list {
|
|
color: #ddd;
|
|
}
|
|
.section--developers .section--head p,
|
|
.section--developers .title-block p {
|
|
color: #ddd;
|
|
}*/
|
|
|
|
.row--modules ul {
|
|
list-style: none;
|
|
margin-left: 0;
|
|
/*color: rgba(255, 255, 255, 0.8);*/
|
|
}
|
|
.row--modules span {
|
|
font-weight:600;
|
|
border-left:5px solid #FFF;
|
|
padding-left:5px;
|
|
margin-left:-10px;
|
|
}
|
|
|
|
.size-chart {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.size-chart div {
|
|
height: 21px;
|
|
float: left;
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.block__ui-separated {
|
|
position: relative;
|
|
}
|
|
.block__ui-separated .col-50 {
|
|
position: absolute;
|
|
left: 0;
|
|
top:12px;
|
|
}
|
|
.block__ui-separated img {
|
|
float: right;
|
|
max-width: 450px;
|
|
}
|
|
|
|
|
|
.demo-gallery {
|
|
width: 100%;
|
|
height: auto;
|
|
float: left;
|
|
}
|
|
.demo-gallery a {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-touch-callout: none;
|
|
display: block;
|
|
float: left;
|
|
margin: 0 12px 12px 0;
|
|
width: 171px;
|
|
line-height: 0;
|
|
}
|
|
|
|
|
|
|
|
a.demo-gallery__img--main {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.ukraine-flag {
|
|
width: 21px;
|
|
height: 14px;
|
|
position: relative;
|
|
background: #ffcc00;
|
|
top: 1px;
|
|
display: inline-block;
|
|
}
|
|
.ukraine-flag:before {
|
|
content:'';
|
|
position: absolute;
|
|
width: 21px;
|
|
height: 7px;
|
|
left:0;
|
|
top:0;
|
|
background: #0066cc;
|
|
}
|
|
|
|
.demo-gallery figure {
|
|
display: none;
|
|
}
|
|
.demo-gallery__title {
|
|
line-height: 14px;
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.share-buttons h2 {
|
|
text-align: center;
|
|
border: 0;
|
|
|
|
}
|
|
.share-buttons {
|
|
text-align: center;
|
|
position: relative;
|
|
margin: 0 0 24px;
|
|
}
|
|
.share-buttons a {
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
margin: 10px;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
background: #5AAF63;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
cursor: pointer;
|
|
}
|
|
.share-buttons a:hover {
|
|
opacity: 0.7;
|
|
}
|
|
#tweet {
|
|
background: #0096c4;
|
|
}
|
|
#like {
|
|
background: #3b5998;
|
|
}
|
|
#gplus {
|
|
background: #d34836;
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
|
|
|
|
|
.row--wide {
|
|
max-width: 800px;
|
|
}
|
|
.row--wide img {
|
|
float: none;
|
|
}
|
|
.img-desc {
|
|
margin-left: 0;
|
|
}
|
|
.section {
|
|
margin-top: 132px;
|
|
}
|
|
|
|
.row--docs {
|
|
max-width: 800px;
|
|
padding-left: 30px;
|
|
|
|
}
|
|
|
|
.section--head {
|
|
margin-top:0;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.docs {
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.docs-menu {
|
|
position: relative;
|
|
margin: 15px 0;
|
|
left:0;
|
|
top:0;
|
|
}
|
|
.docs-menu ul {
|
|
position: relative;
|
|
}
|
|
.docs-menu__ad {
|
|
display: none;
|
|
}
|
|
|
|
.row--nav {
|
|
font-size: 24px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 650px) {
|
|
h1 {
|
|
font-size: 40px;
|
|
}
|
|
.block__ui-separated .col-50 {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.block__ui-separated img {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 450px) {
|
|
|
|
|
|
.col-50:nth-child(1) {
|
|
margin-right: 0;
|
|
}
|
|
.row--wide img {
|
|
margin-bottom: 6px;
|
|
}
|
|
.col-50 {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
.row {
|
|
padding: 0 18px;
|
|
}
|
|
.docs .highlight,
|
|
.codepen-embed {
|
|
padding-left: 18px;
|
|
padding-right: 18px;
|
|
margin-left: -18px;
|
|
}
|
|
.section {
|
|
margin-top: 88px;
|
|
}
|
|
.docs {
|
|
margin-top: 32px;
|
|
}
|
|
.section--head {
|
|
margin-top:0;
|
|
padding: 24px 0;
|
|
}
|
|
.row--nav {
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
|
|
.row--nav {
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
}
|
|
|
|
.demo-gallery {
|
|
max-width: 500px;
|
|
}
|
|
.demo-gallery a {
|
|
width: 120px;
|
|
margin: 0 4px 4px 0;
|
|
}
|
|
a.demo-gallery__img--main {
|
|
width: 164px;
|
|
}
|
|
.section--head p {
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
|
|
/*@media screen and (max-width: 490px) {
|
|
.demo-gallery a {
|
|
width: 100px;
|
|
margin: 0 4px 4px 0;
|
|
}
|
|
a.demo-gallery__img--main {
|
|
width: 137px;
|
|
}
|
|
}
|
|
*/
|
|
|
|
|
|
@media screen and (max-width: 450px) {
|
|
.demo-gallery a {
|
|
width: 95px;
|
|
margin: 0 1px 1px 0;
|
|
}
|
|
a.demo-gallery__img--main {
|
|
width: 127px;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 350px) {
|
|
.demo-gallery a {
|
|
width: 81px;
|
|
margin: 0 1px 1px 0;
|
|
}
|
|
a.demo-gallery__img--main {
|
|
width: 109px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|