2182 lines
33 KiB
CSS
2182 lines
33 KiB
CSS
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
|
|
|
|
|
/**
|
|
* 1. Change the default font family in all browsers (opinionated).
|
|
* 2. Correct the line height in all browsers.
|
|
* 3. Prevent adjustments of font size after orientation changes in
|
|
* IE on Windows Phone and in iOS.
|
|
*/
|
|
|
|
|
|
/* Document
|
|
========================================================================== */
|
|
|
|
@charset "UTF-8";
|
|
|
|
/* argument
|
|
------------------------- */
|
|
|
|
.argument {
|
|
margin: 0.5rem 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.argument__type {
|
|
color: #777;
|
|
}
|
|
|
|
.argument__type,
|
|
.argument__description {
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
.argument__type:before,
|
|
.argument__description:before {
|
|
content: '·';
|
|
padding-right: 0.4rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/* button
|
|
------------------------- */
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 5px 15px;
|
|
margin-bottom: 10px;
|
|
background-color: #F8F8F8;
|
|
background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.1));
|
|
border: 1px solid #CCC;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.button:enabled {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:enabled:hover {
|
|
background-color: #8CF;
|
|
}
|
|
|
|
.button.is-checked,
|
|
.button.is-selected {
|
|
background-color: #19F;
|
|
color: white;
|
|
}
|
|
|
|
.button:active {
|
|
color: white;
|
|
background-color: #59F;
|
|
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
|
|
}
|
|
|
|
|
|
/* hide radio inputs */
|
|
|
|
.button input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* ---- button-group ---- */
|
|
|
|
.button-group:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.button-group .button {
|
|
float: left;
|
|
border-radius: 0;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.button-group .button:first-child {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
.button-group .button:last-child {
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
|
|
/* buy-button
|
|
------------------------- */
|
|
|
|
.buy-button {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
line-height: 1.3rem;
|
|
border-radius: 8px;
|
|
padding: 10px 100px 10px 10px;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.buy-button__project,
|
|
.buy-button__title,
|
|
.buy-button__license {}
|
|
|
|
.buy-button__title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.buy-button__for {
|
|
display: block;
|
|
font-style: italic;
|
|
}
|
|
|
|
.buy-button__price {
|
|
font-size: 1.6rem;
|
|
background: #888;
|
|
color: white;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 80px;
|
|
border-radius: 0 8px 8px 0;
|
|
text-align: center;
|
|
line-height: 64px;
|
|
}
|
|
|
|
.buy-button__price__dollar {
|
|
font-size: 1.4rem;
|
|
margin-right: 3px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
/* ---- buy-button-trio ---- */
|
|
.buy-button-trio {
|
|
margin-top: 40px;
|
|
margin-bottom: 50px;
|
|
}
|
|
.buy-button-trio:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
/* ---- buy-button-trio buy-button ---- */
|
|
.buy-button-trio .buy-button {
|
|
float: left;
|
|
width: 31.33%;
|
|
margin-right: 3%;
|
|
}
|
|
.buy-button-trio .buy-button:nth-child(3) {
|
|
margin-right: 0;
|
|
}
|
|
.buy-button-trio .buy-button {
|
|
transition: transform 0.2s;
|
|
padding: 20px 0 0;
|
|
}
|
|
.buy-button-trio .buy-button>span {
|
|
display: block;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
.buy-button-trio .buy-button__project,
|
|
.buy-button-trio .buy-button__license {
|
|
font-size: 1.1rem;
|
|
}
|
|
.buy-button-trio .buy-button__title {
|
|
font-size: 1.9rem;
|
|
line-height: 1.2;
|
|
}
|
|
.buy-button-trio .buy-button__license {
|
|
margin-bottom: 15px;
|
|
}
|
|
.buy-button-trio .buy-button__for {
|
|
margin-bottom: 20px;
|
|
font-size: 1.1rem;
|
|
}
|
|
.buy-button-trio .buy-button__price {
|
|
position: relative;
|
|
width: auto;
|
|
font-size: 2.4rem;
|
|
line-height: 1.3;
|
|
padding-top: 15px;
|
|
padding-bottom: 10px;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
.buy-button-trio .buy-button__was-price {
|
|
display: block;
|
|
padding-bottom: 10px;
|
|
}
|
|
.buy-button-trio .buy-button__price__dollar {
|
|
position: relative;
|
|
top: 8px;
|
|
}
|
|
.buy-button-trio .buy-button:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
|
|
/* call out
|
|
------------------------- */
|
|
|
|
.call-out {
|
|
border-top: 2px solid #ED2;
|
|
border-bottom: 2px solid #ED2;
|
|
padding-left: 40px;
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
|
|
/* (i) */
|
|
|
|
.call-out:before {
|
|
content: 'i';
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 20px;
|
|
background: #ED2;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color: white;
|
|
font-family: Consolas, Georgia, serif;
|
|
font-style: italic;
|
|
}
|
|
|
|
.call-out h2 {
|
|
margin-top: 0;
|
|
padding-top: 10px;
|
|
border-top: none;
|
|
}
|
|
|
|
.call-out--chill {
|
|
border-color: #8C8;
|
|
}
|
|
|
|
.call-out--chill:before {
|
|
background: #8C8;
|
|
}
|
|
|
|
|
|
/* ---- call-out--big-copy ---- */
|
|
|
|
.call-out--big-copy p,
|
|
.call-out--big-copy li,
|
|
.call-out--big-copy li:before {
|
|
font-size: 1.2rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
|
|
/* ---- quick-start-list ---- */
|
|
|
|
.call-out--big-copy ol {
|
|
list-style: none;
|
|
}
|
|
|
|
.quick-start-list li {
|
|
position: relative;
|
|
counter-increment: call-out-big-copy-item;
|
|
}
|
|
|
|
.quick-start-list li:before {
|
|
content: counter(call-out-big-copy-item) ".";
|
|
position: absolute;
|
|
left: -1.2rem;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.quick-start-list {
|
|
list-style: none;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.call-out {
|
|
border: 2px solid #ED2;
|
|
padding: 10px 20px 10px 80px;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
.call-out--chill {
|
|
border-color: #8C8;
|
|
}
|
|
.call-out:before {
|
|
width: 40px;
|
|
height: 40px;
|
|
left: 20px;
|
|
top: 30px;
|
|
font-size: 1.9rem;
|
|
line-height: 46px;
|
|
}
|
|
}
|
|
|
|
|
|
/* chunky-buttons
|
|
------------------------- */
|
|
|
|
.chunky-button {
|
|
display: block;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.chunky-button:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.chunky-button--fill {
|
|
background-image: linear-gradient( hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15));
|
|
}
|
|
|
|
.chunky-button__icon {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.chunky-button__icon svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.chunky-button__text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.chunky-button__text__plain {
|
|
display: block;
|
|
}
|
|
|
|
.chunky-button__text__strong {
|
|
display: block;
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.chunky-button--outline {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
border: 2px solid;
|
|
}
|
|
|
|
|
|
/* commercial-license-agreement
|
|
------------------------- */
|
|
|
|
.commercial-license-agreement h3 {
|
|
counter-increment: cla-h3;
|
|
counter-reset: cla-part;
|
|
}
|
|
|
|
.commercial-license-agreement h3:before {
|
|
content: counter(cla-h3) '.';
|
|
margin-right: 0.25rem;
|
|
color: #888;
|
|
font-family: 'Texta', sans-serif;
|
|
}
|
|
|
|
.cla__part {
|
|
counter-increment: cla-part;
|
|
}
|
|
|
|
.cla__part:before,
|
|
.cla__definitions-list li:before {
|
|
content: counter(cla-h3) '.' counter(cla-part) '.';
|
|
color: #888;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.cla__definitions-list {
|
|
list-style: none;
|
|
padding-left: 2.6rem;
|
|
}
|
|
|
|
.cla__definitions-list li {
|
|
text-indent: -1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
counter-increment: cla-definitions-item;
|
|
}
|
|
|
|
.cla__definitions-list li:before {
|
|
content: counter(cla-h3) '.' counter(cla-definitions-item) '.';
|
|
}
|
|
|
|
|
|
/* duo
|
|
two columns for large devices
|
|
------------------------- */
|
|
|
|
.duo:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.duo__cell {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
/* --- duo--legal --- */
|
|
|
|
.duo--legal__plain {
|
|
padding: 0 0.8rem;
|
|
background: #FAFAFA;
|
|
color: #888;
|
|
}
|
|
|
|
.duo--legal--first .duo--legal__official:before,
|
|
.duo--legal--first .duo--legal__plain:before {
|
|
display: block;
|
|
padding-top: 0.5rem;
|
|
font-size: 0.88rem;
|
|
color: #888;
|
|
}
|
|
|
|
.duo--legal--first .duo--legal__official:before {
|
|
content: 'Official legal copy'
|
|
}
|
|
|
|
.duo--legal--first .duo--legal__plain:before {
|
|
content: 'Plain English'
|
|
}
|
|
|
|
@media screen and ( min-width: 768px) {
|
|
.duo__cell {
|
|
float: left;
|
|
width: 48.5%;
|
|
}
|
|
.duo__cell:first-child {
|
|
margin-right: 3%;
|
|
}
|
|
.duo__cell--license-option p {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* edit-demo
|
|
------------------------- */
|
|
|
|
.edit-demo {
|
|
clear: both;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
|
|
/* example
|
|
------------------------- */
|
|
|
|
.example {
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.example__code pre {
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
|
|
/* gh-button
|
|
------------------------- */
|
|
|
|
.gh-button {
|
|
display: inline-block;
|
|
background: none;
|
|
border: none;
|
|
color: #333;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.gh-button__title,
|
|
.gh-button__stat {
|
|
float: left;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
padding: 5px 10px;
|
|
border: 1px solid #d5d5d5;
|
|
}
|
|
|
|
.gh-button__icon,
|
|
.gh-button .github-logo {
|
|
height: 21px;
|
|
fill: #333;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.gh-button__title {
|
|
background-color: #eee;
|
|
background-image: linear-gradient(#fcfcfc, #eee);
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
|
|
.gh-button .github-logo {
|
|
margin-right: 0.2em;
|
|
}
|
|
|
|
.gh-button__stat {
|
|
border-left: 0;
|
|
border-radius: 0 4px 4px 0;
|
|
background: white;
|
|
}
|
|
|
|
.gh-button:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.gh-button:hover .gh-button__title {
|
|
background-color: #ddd;
|
|
background-image: linear-gradient(#eee, #ddd);
|
|
}
|
|
|
|
.gh-button:hover .gh-button__stat {
|
|
color: #4078c0;
|
|
}
|
|
|
|
.gh-button:hover .gh-button__icon--star {
|
|
fill: #4078c0;
|
|
}
|
|
|
|
|
|
/* shirt-promo
|
|
------------------------- */
|
|
|
|
.shirt-promo {
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.shirt-promo__title {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.shirt-promo__image {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
/* showcase-item
|
|
------------------------- */
|
|
|
|
.showcase-item__link {
|
|
display: block;
|
|
padding: 10px;
|
|
background: white;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
background: #DDD;
|
|
}
|
|
|
|
.showcase-item__link:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.showcase-item__image {
|
|
width: 80px;
|
|
float: left;
|
|
display: block;
|
|
}
|
|
|
|
.showcase-item__image svg {
|
|
display: block;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.showcase-item__text {
|
|
float: left;
|
|
width: calc( 100% - 120px);
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.showcase-item__title {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.showcase-item__description {
|
|
margin: 0;
|
|
}
|
|
|
|
@media screen and ( min-width: 768px) {
|
|
.showcase-item {
|
|
float: left;
|
|
width: 48.5%;
|
|
}
|
|
.showcase-item:nth-child(2n+1) {
|
|
margin-right: 3%;
|
|
}
|
|
.showcase-item__image {
|
|
width: 120px;
|
|
}
|
|
.showcase-item__text {
|
|
padding-left: 20px;
|
|
}
|
|
.showcase-item__title {
|
|
font-size: 2.0rem;
|
|
}
|
|
.showcase-item__description {
|
|
font-size: 1.2rem;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
|
|
|
|
/* showcase
|
|
------------------------- */
|
|
|
|
.showcase-item-list {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.showcase-item-list:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.showcase-item .infinite-scroll-illo {
|
|
padding: 5px;
|
|
}
|
|
|
|
.showcase__banner__image {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin-top: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
/* site-footer
|
|
------------------------- */
|
|
|
|
.site-footer {
|
|
padding: 40px 0;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.site-footer__copy {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.site-footer .twitter-logo {
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
/* socks-promo
|
|
------------------------- */
|
|
|
|
.socks-promo {
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.socks-promo__image {
|
|
display: block;
|
|
max-width: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.socks-promo .duo__cell {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
/* flickity-illo
|
|
------------------------- */
|
|
|
|
.flickity-illo {
|
|
background: #ED0;
|
|
}
|
|
|
|
|
|
/* infinite-scroll-illo
|
|
------------------------- */
|
|
|
|
.infinite-scroll-illo__page {
|
|
stroke: #333;
|
|
stroke-width: 20;
|
|
stroke-miterlimit: 10;
|
|
}
|
|
|
|
.infinite-scroll-illo__page--back {
|
|
fill: white;
|
|
}
|
|
|
|
.infinite-scroll-illo__page--front1 {
|
|
fill: #C25;
|
|
}
|
|
|
|
.infinite-scroll-illo__page--front2 {
|
|
fill: #E62;
|
|
}
|
|
|
|
.infinite-scroll-illo__page--front3 {
|
|
fill: #EA0;
|
|
}
|
|
|
|
|
|
/* isotope-illo
|
|
------------------------- */
|
|
|
|
.isotope-illo {
|
|
background: #222;
|
|
}
|
|
|
|
|
|
/* colors
|
|
|
|
light gray #D8D5D2
|
|
dark gray #333
|
|
purple #A2C
|
|
red #D26
|
|
*/
|
|
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
/* font-size on html for rem*/
|
|
|
|
html {
|
|
font-size: 17px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
html.export {
|
|
font-family: sans-serif;
|
|
font-size: 15px;
|
|
}
|
|
|
|
body {
|
|
color: #333;
|
|
background: #D8D5D2;
|
|
}
|
|
|
|
body,
|
|
input,
|
|
button {
|
|
font-family: Texta, Avenir Next, sans-serif;
|
|
}
|
|
|
|
|
|
/* ---- links ---- */
|
|
|
|
a,
|
|
a code {
|
|
color: #A2C;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:hover code {
|
|
color: #D26;
|
|
}
|
|
|
|
|
|
/* ---- headers ---- */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
|
|
/* ---- lists ---- */
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: 1.8em;
|
|
}
|
|
|
|
|
|
/* ---- code ---- */
|
|
|
|
pre,
|
|
code {
|
|
font-family: Consolas, Menlo, monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media screen and ( min-width: 768px) {
|
|
html {
|
|
font-size: 19px;
|
|
}
|
|
html.export {
|
|
font-size: 16px;
|
|
}
|
|
pre,
|
|
code,
|
|
kbd {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
|
|
/* Code
|
|
------------------------- */
|
|
|
|
pre,
|
|
code {
|
|
background: #222;
|
|
color: white;
|
|
}
|
|
|
|
pre {
|
|
padding: 0.8em;
|
|
border-radius: 5px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
code {
|
|
padding: 0.2em 0.3em;
|
|
line-height: 1.2;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
background: none;
|
|
}
|
|
|
|
a code {
|
|
background: #A2C;
|
|
color: white;
|
|
}
|
|
|
|
a:hover code {
|
|
color: white;
|
|
background: #D26;
|
|
}
|
|
|
|
code .string,
|
|
code .tag .value {
|
|
color: #0C4;
|
|
}
|
|
|
|
code .number,
|
|
|
|
/* integer */
|
|
|
|
code .cp,
|
|
|
|
/* doctype */
|
|
|
|
code .literal {
|
|
color: #38F;
|
|
}
|
|
|
|
|
|
/*boolean*/
|
|
|
|
code .keyword {
|
|
color: #F73;
|
|
}
|
|
|
|
|
|
/* keyword */
|
|
|
|
code .kd,
|
|
|
|
/* storage */
|
|
|
|
code .attribute {
|
|
color: #DC8;
|
|
}
|
|
|
|
|
|
/* markup attribute */
|
|
|
|
code .title {
|
|
color: #9CF;
|
|
}
|
|
|
|
code .params {
|
|
color: #98D;
|
|
}
|
|
|
|
code .p {
|
|
color: #EDB;
|
|
}
|
|
|
|
|
|
/* punctuation */
|
|
|
|
code .o {
|
|
color: #F63;
|
|
}
|
|
|
|
|
|
/* operator */
|
|
|
|
code .nb {
|
|
color: #AA97AC;
|
|
}
|
|
|
|
|
|
/* support */
|
|
|
|
|
|
/* comment */
|
|
|
|
code .comment {
|
|
color: #999;
|
|
font-style: italic;
|
|
}
|
|
|
|
code .tag {
|
|
color: #6CF;
|
|
}
|
|
|
|
|
|
/* Markup open tag */
|
|
|
|
code .id {
|
|
color: #ABC;
|
|
}
|
|
|
|
|
|
/* css id */
|
|
|
|
code .class {
|
|
color: #A63;
|
|
}
|
|
|
|
|
|
/* CSS class */
|
|
|
|
code .rules {
|
|
color: #FED;
|
|
}
|
|
|
|
code .m {
|
|
color: #DE8E50;
|
|
}
|
|
|
|
|
|
/* CSS value */
|
|
|
|
code .nd {
|
|
color: #9FAD7E;
|
|
}
|
|
|
|
|
|
/* CSS pseudo selector */
|
|
|
|
code .hexcolor {
|
|
color: #F63;
|
|
}
|
|
|
|
code .at_rule {
|
|
color: #088;
|
|
}
|
|
|
|
|
|
/* masonry keywords */
|
|
|
|
code .masonry_var {
|
|
color: #F3F;
|
|
}
|
|
|
|
code .jquery_var {
|
|
color: #DF8;
|
|
}
|
|
|
|
code .masonry_keyword {
|
|
color: #0FF;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/* content
|
|
------------------------- */
|
|
|
|
.content {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
|
|
/* ---- typography ---- */
|
|
|
|
.content h1 {
|
|
font-size: 3.4rem;
|
|
}
|
|
|
|
.content h2 {
|
|
font-size: 2.0rem;
|
|
font-weight: 400;
|
|
padding: 30px 0;
|
|
border-top: 2px solid white;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.content h2:target {
|
|
padding-left: 0.5em;
|
|
background: #D26;
|
|
color: white;
|
|
}
|
|
|
|
.content h3 {
|
|
font-size: 1.6rem;
|
|
border-top: 1px solid white;
|
|
padding-top: 20px;
|
|
margin-top: 50px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
@media screen and ( min-width: 768px) {
|
|
.content>* {
|
|
max-width: 900px;
|
|
}
|
|
/* stuff that can go wide */
|
|
.content>.example {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* ---- demos ---- */
|
|
|
|
.demo .masonry,
|
|
.demo.masonry {
|
|
background: white;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.demo .button {
|
|
margin-bottom: 0.8em;
|
|
}
|
|
|
|
|
|
/* ---- fit width ---- */
|
|
|
|
#fit-width {
|
|
border: 2px solid white;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
#fit-width .masonry {
|
|
margin: 10px auto;
|
|
}
|
|
|
|
|
|
/* ---- counting ---- */
|
|
|
|
.masonry.counting {
|
|
counter-reset: item;
|
|
}
|
|
|
|
.masonry.counting .item:before {
|
|
counter-increment: item;
|
|
content: counter(item);
|
|
display: block;
|
|
color: white;
|
|
padding-top: 0.2em;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
/* ---- measurement demos ---- */
|
|
|
|
#gutter-opt-demo2 .item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
/* responive column width */
|
|
|
|
.masonry.masonry--percent-width .grid-sizer {
|
|
width: 20%;
|
|
}
|
|
|
|
.masonry.masonry--percent-width .item {
|
|
width: 20%;
|
|
}
|
|
|
|
.masonry.masonry--percent-width .item.w2,
|
|
.masonry.masonry--percent-width .item.w3 {
|
|
width: 40%;
|
|
}
|
|
|
|
#row-height-demo2 .grid-sizer {
|
|
height: 60px;
|
|
}
|
|
|
|
#gutter-opt-demo3 .gutter-sizer {
|
|
width: 3%;
|
|
}
|
|
|
|
|
|
/* ---- stamp ---- */
|
|
|
|
.has-stamp {
|
|
position: relative;
|
|
}
|
|
|
|
#stamp-demo .stamp {
|
|
right: 10%;
|
|
top: 10px;
|
|
width: 35%;
|
|
height: 70px;
|
|
}
|
|
|
|
#stamp-demo .item {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
|
|
/* ---- animate-item-size ---- */
|
|
|
|
|
|
/* item is invisible, but used for layout */
|
|
|
|
.masonry.animate-item-size-demo .item,
|
|
.masonry.animate-item-size-demo .item-content {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.masonry.animate-item-size-demo .item {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
/* item-content is visible, and transitions size */
|
|
|
|
.animate-item-size-demo .item-content {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: #D26;
|
|
border: 2px solid #333;
|
|
border-color: hsla(0, 0%, 0%, 0.5);
|
|
border-radius: 5px;
|
|
-webkit-transition: width 0.4s, height 0.4s;
|
|
-moz-transition: width 0.4s, height 0.4s;
|
|
-o-transition: width 0.4s, height 0.4s;
|
|
transition: width 0.4s, height 0.4s;
|
|
}
|
|
|
|
.animate-item-size-demo .item:hover .item-content {
|
|
border-color: white;
|
|
background: #A2C;
|
|
}
|
|
|
|
|
|
/* both item and item content change size */
|
|
|
|
.animate-item-size-demo .item.is-expanded,
|
|
.animate-item-size-demo .item.is-expanded .item-content {
|
|
width: 180px;
|
|
height: 120px;
|
|
}
|
|
|
|
.animate-item-size-demo .item.is-expanded {
|
|
z-index: 2;
|
|
}
|
|
|
|
.animate-item-size-demo .item.is-expanded .item-content {
|
|
background: #F90;
|
|
}
|
|
|
|
|
|
/* ---- animate item size responsive ---- */
|
|
|
|
#animate-item-size-responsive .item,
|
|
#animate-item-size-responsive .grid-sizer {
|
|
width: 20%;
|
|
}
|
|
|
|
#animate-item-size-responsive .item-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
/* item has expanded size */
|
|
|
|
#animate-item-size-responsive .item.is-expanded {
|
|
width: 60%;
|
|
}
|
|
|
|
|
|
/* web fonts
|
|
------------------------- */
|
|
|
|
|
|
/*@import url("//hello.myfonts.net/count/2d333f");*/
|
|
|
|
|
|
/*
|
|
Just use WOFF2 and WOFF for webfonts
|
|
https://css-tricks.com/snippets/css/using-font-face/ */
|
|
|
|
|
|
/* Texta Heavy */
|
|
|
|
@font-face {
|
|
font-family: 'Texta';
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
src: url('../fonts/2D333F_0_0.woff2') format('woff2'), url('../fonts/2D333F_0_0.woff') format('woff');
|
|
}
|
|
|
|
|
|
/* Texta Italic */
|
|
|
|
@font-face {
|
|
font-family: 'Texta';
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
src: url('../fonts/2D333F_1_0.woff2') format('woff2'), url('../fonts/2D333F_1_0.woff') format('woff');
|
|
}
|
|
|
|
|
|
/* Texta Regular */
|
|
|
|
@font-face {
|
|
font-family: 'Texta';
|
|
src: url('../fonts/2D333F_2_0.woff2') format('woff2'), url('../fonts/2D333F_2_0.woff') format('woff');
|
|
}
|
|
|
|
|
|
/* ---- desktop ---- */
|
|
|
|
@media screen and ( min-width: 960px) {
|
|
/* first primary content not used on homepage */
|
|
.index-page #content>.primary-content:first-child {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* ---- #content ---- */
|
|
|
|
|
|
/* ---- row ---- */
|
|
|
|
.row .cell {
|
|
margin-bottom: 0.8em;
|
|
}
|
|
|
|
|
|
/* clearfix */
|
|
|
|
.row:after {
|
|
content: ' ';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
.row4 .cell {
|
|
float: left;
|
|
width: 48%;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
|
|
/* tablet-ish */
|
|
|
|
@media screen and ( min-width: 800px) {
|
|
.row {
|
|
margin-bottom: 0.8em;
|
|
}
|
|
/* two column by default*/
|
|
.row .cell {
|
|
float: left;
|
|
width: 48.75%;
|
|
margin-right: 2.5%;
|
|
margin-bottom: 0;
|
|
}
|
|
/* IE8 doesn't support :last-child */
|
|
.lt-ie9 .row .cell {
|
|
margin-right: 1.5%;
|
|
}
|
|
/* no margin */
|
|
/* .example.row .cell {
|
|
width: 50%;
|
|
margin-right: 0;
|
|
}*/
|
|
/* three column */
|
|
.row3 .cell {
|
|
width: 31.6%;
|
|
}
|
|
/* four column */
|
|
.row4 .cell {
|
|
width: 23.1%;
|
|
}
|
|
.row .cell:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* ---- instruction ---- */
|
|
|
|
.instruction {
|
|
font-size: 18px;
|
|
margin-bottom: 0.2em;
|
|
color: #888;
|
|
}
|
|
|
|
|
|
/* ---- notification ---- */
|
|
|
|
#notification {
|
|
display: none;
|
|
/* hide by default */
|
|
position: fixed;
|
|
z-index: 20;
|
|
/* above most stuff */
|
|
bottom: 0px;
|
|
right: 0px;
|
|
background: #A2C;
|
|
padding: 0.5em;
|
|
color: white;
|
|
font-size: 20px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
/* animate-item-size-item
|
|
------------------------- */
|
|
|
|
.animate-item-size-item {
|
|
float: left;
|
|
}
|
|
|
|
|
|
/* animate-item-size-item is invisible, but used for layout */
|
|
|
|
.animate-item-size-item,
|
|
.animate-item-size-item__content {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
|
|
/* animate-item-size-item__content is visible, and transitions size */
|
|
|
|
.animate-item-size-item__content {
|
|
background: #D26;
|
|
border: 2px solid #333;
|
|
border-color: hsla(0, 0%, 0%, 0.7);
|
|
border-radius: 5px;
|
|
-webkit-transition: width 0.4s, height 0.4s;
|
|
transition: width 0.4s, height 0.4s;
|
|
}
|
|
|
|
.animate-item-size-item:hover .animate-item-size-item__content {
|
|
border-color: white;
|
|
background: #A2C;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* both animate-item-size-item and animate-item-size-item content change size */
|
|
|
|
.animate-item-size-item.is-expanded,
|
|
.animate-item-size-item.is-expanded .animate-item-size-item__content {
|
|
width: 180px;
|
|
height: 120px;
|
|
}
|
|
|
|
.animate-item-size-item.is-expanded {
|
|
z-index: 2;
|
|
}
|
|
|
|
.animate-item-size-item.is-expanded .animate-item-size-item__content {
|
|
background: #F90;
|
|
}
|
|
|
|
|
|
/* ---- responsive ---- */
|
|
|
|
.grid--animate-item-size-responsive .animate-item-size-item,
|
|
.grid--animate-item-size-responsive .grid-sizer {
|
|
width: 20%;
|
|
}
|
|
|
|
.grid--animate-item-size-responsive .animate-item-size-item__content,
|
|
.grid--animate-item-size-responsive .animate-item-size-item.is-expanded .animate-item-size-item__content {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
/* item has expanded size */
|
|
|
|
.grid--animate-item-size-responsive .animate-item-size-item.is-expanded {
|
|
width: 60%;
|
|
}
|
|
|
|
|
|
/* bootstrap 3
|
|
------------------------- */
|
|
|
|
.bootstrap-3__container-fluid {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.bootstrap-3__col-xs-4,
|
|
.bootstrap-3__col-xs-6,
|
|
.bootstrap-3__col-xs-8,
|
|
.bootstrap-3__col-xs-12 {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.bootstrap-3__col-xs-4 {
|
|
width: 33.333%;
|
|
}
|
|
|
|
.bootstrap-3__col-xs-6 {
|
|
width: 50%;
|
|
}
|
|
|
|
.bootstrap-3__col-xs-8 {
|
|
width: 66.666%;
|
|
}
|
|
|
|
.bootstrap-3__grid-item-content {
|
|
height: 100px;
|
|
background: #D26;
|
|
border: 2px solid hsla(0, 0%, 0%, 0.5);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.bootstrap-3__grid-item-content--height2 {
|
|
height: 200px;
|
|
}
|
|
|
|
|
|
/* sm */
|
|
|
|
@media (min-width: 768px) {
|
|
.bootstrap-3__col-sm-4 {
|
|
width: 33.333%;
|
|
}
|
|
.bootstrap-3__col-sm-8 {
|
|
width: 66.666%;
|
|
}
|
|
}
|
|
|
|
|
|
/* md */
|
|
|
|
@media (min-width: 992px) {
|
|
.bootstrap-3__col-md-3 {
|
|
width: 25%;
|
|
}
|
|
.bootstrap-3__col-md-6 {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
/* stamp
|
|
------------------------- */
|
|
|
|
.stamp {
|
|
position: absolute;
|
|
width: 30%;
|
|
height: 60px;
|
|
background: orange;
|
|
border: 4px dotted black;
|
|
}
|
|
|
|
.stamp--static-stamp1 {
|
|
left: 30%;
|
|
top: 10px;
|
|
width: 20%;
|
|
height: 100px;
|
|
}
|
|
|
|
.stamp--static-stamp2 {
|
|
right: 10%;
|
|
top: 20px;
|
|
width: 70%;
|
|
height: 30px;
|
|
}
|
|
|
|
|
|
/* stamp-methods-demo
|
|
------------------------- */
|
|
|
|
.grid--stamp-methods-demo .grid-item {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.stamp--stamp-methods-demo {
|
|
left: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
|
|
/* call out
|
|
------------------------- */
|
|
|
|
.call-out {
|
|
border-top: 2px solid #F90;
|
|
border-bottom: 2px solid #F90;
|
|
padding-left: 40px;
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
|
|
/* (i) */
|
|
|
|
.call-out:before {
|
|
content: 'i';
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 20px;
|
|
background: #F90;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
color: white;
|
|
font-family: Consolas, Georgia, serif;
|
|
font-style: italic;
|
|
}
|
|
|
|
.call-out h2 {
|
|
margin-top: 0;
|
|
padding-top: 10px;
|
|
border-top: none;
|
|
}
|
|
|
|
.call-out--chill {
|
|
border-color: #1FB;
|
|
}
|
|
|
|
.call-out--chill:before {
|
|
background: #1FB;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.call-out {
|
|
border: 2px solid #F90;
|
|
padding: 10px 20px 10px 80px;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
margin: 20px 0;
|
|
}
|
|
.call-out--chill {
|
|
border-color: #1FB;
|
|
}
|
|
.call-out:before {
|
|
width: 40px;
|
|
height: 40px;
|
|
left: 20px;
|
|
top: 30px;
|
|
font-size: 1.9em;
|
|
line-height: 46px;
|
|
}
|
|
}
|
|
|
|
|
|
/* container
|
|
------------------------- */
|
|
|
|
.container {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
@media screen and ( min-width: 1100px) {
|
|
.container {
|
|
margin-left: 6%;
|
|
margin-right: 200px;
|
|
}
|
|
}
|
|
|
|
|
|
/* example
|
|
------------------------- */
|
|
|
|
.example pre {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.example__demo--fit-width {
|
|
border: 2px solid white;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
/* duo
|
|
------------------------- */
|
|
|
|
.duo__cell {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
/* showcase
|
|
------------------------- */
|
|
|
|
.showcase-item__link {
|
|
background: #E8E5E2;
|
|
color: #D26;
|
|
}
|
|
|
|
.showcase-item__link:hover {
|
|
background: white;
|
|
color: #A2C;
|
|
}
|
|
|
|
|
|
/* grid
|
|
------------------------- */
|
|
|
|
.grid {
|
|
background: white;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
|
|
/* clearfix */
|
|
|
|
.grid:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
|
|
/* ---- banner ---- */
|
|
|
|
.grid--has-banner {
|
|
position: relative;
|
|
}
|
|
|
|
.static-banner {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
padding: 5px 15px;
|
|
color: white;
|
|
background: #A2C;
|
|
z-index: 2;
|
|
/* above items */
|
|
}
|
|
|
|
|
|
/* ---- centered ---- */
|
|
|
|
.grid--centered {
|
|
margin: 10px auto;
|
|
}
|
|
|
|
|
|
/* ---- counting ---- */
|
|
|
|
.grid--counting {
|
|
counter-reset: grid-item;
|
|
}
|
|
|
|
.grid--counting .grid-item:before {
|
|
counter-increment: grid-item;
|
|
content: counter(grid-item);
|
|
display: block;
|
|
color: white;
|
|
padding-top: 0.2em;
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
|
|
/* ---- stamp ---- */
|
|
|
|
.grid--has-stamp {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* ---- grid--fixed-width ---- */
|
|
|
|
.grid--fixed-width {
|
|
width: 320px;
|
|
}
|
|
|
|
|
|
/* grid-image-item
|
|
------------------------- */
|
|
|
|
.grid-image-item,
|
|
.grid--images .grid-sizer {
|
|
width: 33.33%;
|
|
}
|
|
|
|
.grid-image-item {
|
|
float: left;
|
|
}
|
|
|
|
.grid-image-item img {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/* grid-item
|
|
------------------------- */
|
|
|
|
.grid-item {
|
|
width: 80px;
|
|
height: 60px;
|
|
float: left;
|
|
background: #D26;
|
|
border: 2px solid #333;
|
|
border-color: hsla(0, 0%, 0%, 0.5);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.grid-item--width2 {
|
|
width: 160px;
|
|
}
|
|
|
|
.grid-item--width3 {
|
|
width: 240px;
|
|
}
|
|
|
|
.grid-item--height2 {
|
|
height: 100px;
|
|
}
|
|
|
|
.grid-item--height3 {
|
|
height: 140px;
|
|
}
|
|
|
|
.grid-item--height4 {
|
|
height: 180px;
|
|
}
|
|
|
|
.grid-item--gigante {
|
|
width: 240px;
|
|
height: 180px;
|
|
background: #F90;
|
|
z-index: 2;
|
|
/* keep it above other items */
|
|
}
|
|
|
|
|
|
/* ---- clickable ---- */
|
|
|
|
.grid--clickable .grid-item:hover {
|
|
border-color: white;
|
|
background: #A2C;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* ---- fluid-5-col ---- */
|
|
|
|
.grid--fluid-5-col .grid-sizer,
|
|
.grid--fluid-5-col .grid-item {
|
|
width: 20%;
|
|
}
|
|
|
|
.grid--fluid-5-col .grid-item--width2,
|
|
.grid--fluid-5-col .grid-item--width3 {
|
|
width: 40%;
|
|
}
|
|
|
|
|
|
/* ---- gutter ---- */
|
|
|
|
.grid--gutter .grid-item--width2 {
|
|
width: 170px;
|
|
}
|
|
|
|
.grid--gutter .grid-item--width3 {
|
|
width: 260px;
|
|
}
|
|
|
|
.grid--gutter-bottom .grid-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
/* ---- grid--fluid-gutter ---- */
|
|
|
|
.grid--fluid-gutter .grid-item,
|
|
.grid--fluid-gutter .grid-sizer {
|
|
width: 22%;
|
|
}
|
|
|
|
.grid--fluid-gutter .gutter-sizer {
|
|
width: 4%;
|
|
}
|
|
|
|
.grid--fluid-gutter .grid-item--width2,
|
|
.grid--fluid-gutter .grid-item--width3 {
|
|
width: 48%;
|
|
}
|
|
|
|
|
|
/* hero
|
|
------------------------- */
|
|
|
|
.hero-grid {
|
|
padding: 10px 1%;
|
|
margin: 20px 0;
|
|
background: white;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
|
|
/* necessary for proper sizing with margins */
|
|
|
|
.hero-grid__grid-sizer {
|
|
position: absolute;
|
|
}
|
|
|
|
.hero-grid__item,
|
|
.hero-grid__grid-sizer {
|
|
width: 47%;
|
|
margin: 0 1% 20px 1%;
|
|
}
|
|
|
|
.hero-grid__gutter-sizer {
|
|
width: 2%;
|
|
}
|
|
|
|
.hero-grid__item {
|
|
float: left;
|
|
border-radius: 8px;
|
|
background: #D8D6D2;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
/* ---- ---- */
|
|
|
|
.hero__title {
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
font-size: 3rem;
|
|
color: #D26;
|
|
}
|
|
|
|
.hero__tagline {
|
|
font-size: 1.4rem;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
|
|
/* ---- texty ---- */
|
|
|
|
.hero-grid__item--texty {
|
|
padding: 10px;
|
|
}
|
|
|
|
.hero-grid__item--width2,
|
|
.hero-grid__item--width3 {
|
|
width: 96%;
|
|
}
|
|
|
|
|
|
/* ---- ---- */
|
|
|
|
.hero-grid__big-button {
|
|
position: relative;
|
|
display: block;
|
|
padding: 10px;
|
|
background: #D26;
|
|
color: white;
|
|
border-radius: 8px;
|
|
font-size: 1.1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hero-grid__big-button:hover {
|
|
background: #A2C;
|
|
color: white;
|
|
}
|
|
|
|
.hero-grid__big-button svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: white;
|
|
}
|
|
|
|
.hero-grid__big-button svg path {
|
|
fill: white;
|
|
}
|
|
|
|
|
|
/* ---- ---- */
|
|
|
|
.hero__what-is-title {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.hero__what-is-description {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* ---- .hero-grid__example-link ---- */
|
|
|
|
.hero__example-link {
|
|
display: block;
|
|
background: #D26;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
|
|
.hero__example-link:hover {
|
|
background: #A2C;
|
|
color: white;
|
|
}
|
|
|
|
.hero__example-link__img {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.hero__example-link__title {
|
|
margin: 0;
|
|
padding: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
|
|
/* enough width for 4 columns */
|
|
|
|
@media screen and ( min-width: 768px) {
|
|
.hero-grid__grid-sizer,
|
|
.hero-grid__item {
|
|
width: 22.5%;
|
|
}
|
|
.hero-grid__item--width2 {
|
|
width: 47%;
|
|
}
|
|
.hero-grid__item--width3 {
|
|
width: 71.5%;
|
|
}
|
|
.hero__title {
|
|
font-size: 6rem;
|
|
}
|
|
.hero__tagline {
|
|
font-size: 2rem;
|
|
}
|
|
.hero__what-is-title {
|
|
font-size: 2rem;
|
|
}
|
|
.hero__what-is-description {
|
|
font-size: 1.1rem;
|
|
}
|
|
.hero-grid__big-button {
|
|
padding-left: 60px;
|
|
min-height: 60px;
|
|
}
|
|
.hero-grid__big-button svg {
|
|
display: block;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
|
|
/* page-nav
|
|
------------------------- */
|
|
|
|
.page-nav {
|
|
padding: 1.0em 0;
|
|
font-size: 0.8rem;
|
|
z-index: 2;
|
|
/* above packeries */
|
|
}
|
|
|
|
.page-nav__item {
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-nav__item:after {
|
|
content: ' •';
|
|
margin: 0 10px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.page-nav__item:last-child:after {
|
|
content: none;
|
|
}
|
|
|
|
|
|
/* desktop */
|
|
|
|
@media screen and ( min-width: 1100px) {
|
|
.page-nav {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 60px;
|
|
width: 200px;
|
|
list-style: none;
|
|
padding: 0;
|
|
padding: 10px;
|
|
}
|
|
.page-nav__item {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
margin-left: 0;
|
|
}
|
|
.page-nav__item:after {
|
|
content: none;
|
|
}
|
|
.page-nav__item a {
|
|
display: block;
|
|
}
|
|
.page-nav__item--h3 a {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
/* fix .page-nav only if we have enough height */
|
|
|
|
@media screen and ( min-width: 1100px) and ( min-height: 540px) {
|
|
.page-nav {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
|
|
/* site-footer
|
|
------------------------- */
|
|
|
|
.site-footer {
|
|
color: #888;
|
|
background: #F8F5F2;
|
|
padding: 40px 0;
|
|
position: relative;
|
|
z-index: 10;
|
|
/* above page-nav */
|
|
}
|
|
|
|
|
|
/* site nav
|
|
------------------------- */
|
|
|
|
.site-nav .container {
|
|
border-bottom: 2px solid white;
|
|
}
|
|
|
|
|
|
/* bottom nav */
|
|
|
|
.content~.site-nav .container {
|
|
position: relative;
|
|
margin-top: 80px;
|
|
border-top: 2px solid white;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.site-nav__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.site-nav__list:after {
|
|
content: '';
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
|
|
.site-nav__item {
|
|
width: 33.333%;
|
|
float: left;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.site-nav__item a {
|
|
display: block;
|
|
padding: 5px
|
|
}
|
|
|
|
.site-nav__item--homepage {
|
|
font-size: 1.15rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.site-nav__item--homepage a {
|
|
color: #D26;
|
|
}
|
|
|
|
.site-nav__item a:hover {
|
|
background: #D26;
|
|
color: white;
|
|
}
|
|
|
|
.site-nav__item a:active {
|
|
background: white;
|
|
color: #D26;
|
|
}
|
|
|
|
|
|
/* selected */
|
|
|
|
.page--options .site-nav__item--options a,
|
|
.page--methods .site-nav__item--methods a,
|
|
.page--events .site-nav__item--events a,
|
|
.page--extras .site-nav__item--extras a,
|
|
.page--faq .site-nav__item--faq a {
|
|
color: white;
|
|
}
|
|
|
|
.page--index .site-nav__item--homepage {
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
/* size at which it can fit */
|
|
|
|
@media screen and ( min-width: 768px) {
|
|
.site-nav__item {
|
|
width: auto;
|
|
font-size: 1.15rem;
|
|
line-height: 70px;
|
|
}
|
|
.site-nav__item a {
|
|
padding: 0px 25px;
|
|
}
|
|
.site-nav__item--homepage {
|
|
font-size: 1.5rem;
|
|
}
|
|
} |