Created
May 11, 2015 12:40
-
-
Save pepelsbey/afef0d482d8cdf63da38 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video, picture { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; } | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, main, nav, section, summary { | |
display: block; } | |
body { | |
line-height: 1; } | |
ol, ul { | |
list-style: none; } | |
blockquote, q { | |
quotes: none; } | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; } | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; } | |
*, *:before, *:after { | |
box-sizing: border-box; } | |
html { | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; } | |
body { | |
max-width: 1200px; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 0 20px; | |
background: #FFF; | |
color: #000; | |
font: 16px/1.5 Helvetica, Arial, sans-serif; } | |
body:before, | |
body:after { | |
display: block; | |
content: ''; } | |
body:after { | |
clear: both; } | |
a { | |
text-decoration: none; } | |
.teaser__author, .teaser__intro a, .tags__link, .linkbait__link, .entry__link, .content a, .authors__link { | |
color: #1096D5; } | |
.teaser__author:hover, | |
.teaser__intro a:hover, | |
.tags__link:hover, | |
.linkbait__link:hover, | |
.entry__link:hover, | |
.content a:hover, | |
.authors__link:hover, | |
.teaser__author:focus, .teaser__intro a:focus, .tags__link:focus, .linkbait__link:focus, .entry__link:focus, .content a:focus, .authors__link:focus { | |
color: #29b0ef; } | |
.header__menu-link:hover, | |
.teaser__link:hover, | |
.footer__link:hover, | |
.header__menu-link:focus, .teaser__link:focus, .footer__link:focus { | |
color: #1096D5; } | |
.teaser__category, .entry__category { | |
color: #00A700; } | |
.teaser__category:hover, | |
.entry__category:hover, | |
.teaser__category:focus, .entry__category:focus { | |
color: #00c600; } | |
.footer__link { | |
color: #A2A4A3; } | |
.header__logo-type, .header__menu-link, .teaser__link { | |
color: #000; } | |
.content a:visited { | |
color: #7957BC; } | |
.content a:visited:hover { | |
color: #9c83cd; } | |
.header__logo-type, .header__menu-link { | |
transition: color 0.3s; } | |
.header:before, | |
.header:after { | |
display: block; | |
content: ''; } | |
.header:after { | |
clear: both; } | |
.header__logo { | |
letter-spacing: -1px; | |
font-weight: bold; | |
font-size: 20px; } | |
.header__logo-type { | |
padding-left: 50px; | |
line-height: 48px; } | |
.header__logo-type:before { | |
position: absolute; | |
margin: -2px 0 0 -52px; | |
width: 48px; | |
height: 48px; | |
background: url(/images/logo.png) no-repeat; | |
content: ''; } | |
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
.header__logo-type:before { | |
background-image: url(/images/logo@2x.png); | |
background-size: 48px; } } | |
.header__logo-opera { | |
font-weight: 100; } | |
.header__menu { | |
display: flex; | |
justify-content: space-between; | |
font-size: 20px; | |
color: #A2A4A3; } | |
.header__search-field { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
padding: 0 0 0 10px; | |
width: 100%; | |
height: 26px; | |
border: none; | |
border-radius: 13px; | |
background: linear-gradient(to bottom, #f2f2f2, #f9f9f9); | |
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); | |
font-size: 14px; } | |
.header__search-field::-webkit-search-cancel-button, | |
.header__search-field::-webkit-search-decoration { | |
-webkit-appearance: none; } | |
.header__search-field::placeholder { | |
opacity: 1; | |
color: #A2A4A3; } | |
.header__search-field:focus { | |
outline: none; | |
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.22); } | |
@media (max-width: 568px) { | |
.header { | |
padding-bottom: 24px; } | |
.header__logo { | |
position: absolute; | |
top: 57px; | |
left: 0; | |
right: 0; | |
text-align: center; } | |
.header__menu { | |
padding-top: 20px; | |
padding-bottom: 78px; | |
font-size: 16px; } } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.header { | |
padding-top: 20px; | |
padding-bottom: 24px; } | |
.header__logo { | |
width: 14.6341463415%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 31.7073170732%; | |
float: left; | |
margin-left: 17.0731707317%; | |
margin-right: -100%; | |
padding-top: 8px; | |
padding-bottom: 25px; } | |
.header__search { | |
clear: both; | |
width: 48.7804878049%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.header { | |
padding-top: 20px; | |
padding-bottom: 24px; } | |
.header__logo { | |
width: 31.7073170732%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 65.8536585366%; | |
float: left; | |
margin-left: 34.1463414634%; | |
margin-right: -100%; | |
padding-top: 8px; | |
padding-bottom: 16px; } | |
.header__search { | |
clear: both; | |
width: 65.8536585366%; | |
float: left; | |
margin-left: 34.1463414634%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.header { | |
padding-top: 50px; | |
padding-bottom: 47px; } | |
.header__logo { | |
width: 23.7288135593%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 40.6779661017%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; | |
padding-top: 8px; } | |
.header__search { | |
width: 23.7288135593%; | |
float: left; | |
margin-left: 76.2711864407%; | |
margin-right: -100%; | |
padding-top: 11px; } } | |
.teaser { | |
margin-bottom: 16px; | |
border-bottom: 1px solid #ececec; } | |
.teaser:before, | |
.teaser:after { | |
display: block; | |
content: ''; } | |
.teaser:after { | |
clear: both; } | |
.teaser__title { | |
padding-bottom: 6px; | |
line-height: 1.3; | |
font-weight: 100; | |
font-size: 21px; } | |
.teaser__picture { | |
margin-top: 5px; | |
margin-bottom: 4px; | |
width: 100%; | |
max-width: 100%; } | |
.teaser__meta { | |
padding-bottom: 18px; | |
font-size: 12px; | |
color: #A2A4A3; } | |
.teaser__intro { | |
padding-bottom: 16px; } | |
.teaser--blog { | |
border-bottom-color: #dbeff8; } | |
.teaser:last-child { | |
margin-bottom: -1px; | |
border-bottom: none; } | |
.teaser__title--featured { | |
margin-bottom: 5px; | |
font-size: 24px; } | |
@media (min-width: 768px) { | |
.teaser__picture--featured { | |
width: 48.275862069%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; | |
margin-top: 2px; | |
margin-bottom: 22px; } | |
.teaser__content--featured { | |
width: 48.275862069%; | |
float: left; | |
margin-left: 51.724137931%; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.teaser__title--featured { | |
font-size: 30px; } } | |
@media (min-width: 1024px) { | |
.teaser__title--featured { | |
margin-top: -7px; | |
font-size: 36px; } } | |
.tags { | |
padding-bottom: 16px; } | |
.tags__item { | |
display: inline-block; } | |
.tags__item:not(:last-child):after { | |
color: #A2A4A3; | |
content: '\00A0\2219\00A0'; } | |
.tags--featured { | |
margin-top: -6px; | |
padding-bottom: 12px; | |
font-size: 18px; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.tags--featured { | |
font-size: 20px; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.tags--featured { | |
font-size: 22px; } } | |
@media (max-width: 1023px) { | |
.tags--featured { | |
padding-top: 12px; | |
border-top: 1px solid #ececec; } } | |
@media (min-width: 1024px) { | |
.tags--featured { | |
font-size: 24px; } } | |
.layout:before, | |
.layout:after { | |
display: block; | |
content: ''; } | |
.layout:after { | |
clear: both; } | |
.layout__aside, | |
.layout__content { | |
padding-bottom: 24px; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.layout__aside { | |
width: 14.6341463415%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 31.7073170732%; | |
float: left; | |
margin-left: 17.0731707317%; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.layout__aside { | |
width: 31.7073170732%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 65.8536585366%; | |
float: left; | |
margin-left: 34.1463414634%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.layout__aside { | |
width: 23.7288135593%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 74.5762711864%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; } | |
.layout__content--entry { | |
width: 66.1016949153%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; } } | |
.archive__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.archive__columns[data-columns]::before { | |
content: '2 .archive__column'; } } | |
@media (min-width: 1024px) { | |
.archive__columns[data-columns]::before { | |
content: '3 .archive__column'; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.archive__column:nth-child(1) { | |
width: 48.1481481481%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.archive__column:nth-child(2) { | |
width: 48.1481481481%; | |
float: left; | |
margin-left: 51.8518518519%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.archive__column:nth-child(1) { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.archive__column:nth-child(2) { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 34.0909090909%; | |
margin-right: -100%; } | |
.archive__column:nth-child(3) { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 68.1818181818%; | |
margin-right: -100%; } } | |
.featured { | |
padding-bottom: 14px; } | |
.featured:before, | |
.featured:after { | |
display: block; | |
content: ''; } | |
.featured:after { | |
clear: both; } | |
.featured__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 1024px) { | |
.featured__article { | |
width: 65.9090909091%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.featured__tags { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 68.1818181818%; | |
margin-right: -100%; } } | |
.featured:after { | |
border-bottom: 1px solid #ececec; } | |
.blog { | |
margin: 0 -20px 24px; | |
padding: 20px 20px 0; | |
background: #f3f9fc; } | |
.blog__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.blog { | |
margin-right: 0; } } | |
@media (min-width: 768px) { | |
.blog { | |
margin-left: 0; | |
margin-right: 0; | |
padding: 15px 15px 0; } } | |
.linkbait { | |
margin-bottom: 24px; } | |
.linkbait__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
.linkbait__item { | |
margin-bottom: 10px; | |
padding-left: 12px; | |
line-height: 1.3; } | |
.linkbait__item:before { | |
position: absolute; | |
margin-left: -12px; | |
content: '\2022'; | |
color: #d9dada; } | |
@media (min-width: 768px) { | |
.linkbait { | |
padding: 0 15px; } } | |
.entry { | |
margin-bottom: 16px; } | |
.content__title { | |
margin-bottom: 15px; | |
line-height: 1.3; | |
font-weight: 100; | |
font-size: 24px; } | |
.content h2 { | |
padding-top: 14px; | |
margin-bottom: 16px; | |
line-height: 1.3; | |
font-size: 20px; } | |
.content h3 { | |
padding-top: 15px; | |
margin-bottom: 18px; | |
line-height: 1.3; | |
font-weight: bold; | |
font-size: 18px; } | |
.content h2 code, .content h3 code { | |
font-family: inherit; } | |
.content p { | |
margin-bottom: 16px; } | |
.content blockquote { | |
color: #888; | |
font-style: italic; } | |
.content ol, .content ul { | |
margin-bottom: 8px; | |
counter-reset: list; } | |
.content ol ol, .content ol ul, .content ul ol, .content ul ul { | |
margin-bottom: -16px; | |
padding-top: 8px; | |
padding-left: 20px; } | |
.content ol li, .content ul li { | |
padding-bottom: 8px; } | |
.content ul > li:before { | |
content: '\2022\00A0\00A0'; } | |
.content ol > li:before { | |
counter-increment: list; | |
content: counter(list) ". "; } | |
.content pre { | |
margin-bottom: 16px; | |
white-space: pre-wrap; } | |
.content pre code { | |
word-wrap: break-word; } | |
.content b, .content strong { | |
font-weight: bold; } | |
.content i, .content em, .content dfn { | |
font-style: italic; } | |
.content code { | |
tab-size: 4; | |
font-family: Monaco, Consolas, monospace, monospace; } | |
@media (min-width: 768px) { | |
.content__title { | |
padding-bottom: 14px; | |
font-size: 30px; } | |
.content blockquote, | |
.content ol, .content ul, | |
.content pre { | |
padding-left: 24px; } } | |
@media (min-width: 1024px) { | |
.content__title { | |
margin-top: -7px; | |
padding-bottom: 20px; | |
font-size: 36px; } } | |
.figure { | |
max-width: 100%; | |
overflow: auto; } | |
.figure--left { | |
float: left; } | |
.figure--right { | |
float: right; } | |
.figure__media { | |
display: block; | |
margin-bottom: 16px; | |
max-width: 100%; } | |
.figure__media + .figure__media { | |
margin-top: 22px; } | |
.figure__media--center { | |
margin: auto; } | |
.figure__media--full { | |
width: 100%; } | |
@media (min-width: 768px) { | |
.figure__media--first { | |
float: left; } | |
.figure__media--second { | |
float: right; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.figure__media--half { | |
width: 48.1481481481%; } } | |
@media (min-width: 1024px) { | |
.figure__media--half { | |
width: 48.7179487179%; } } | |
@media (min-width: 768px) { | |
.figure__media--half + .figure__media--half { | |
margin-top: 0; } } | |
.figure table { | |
width: 100%; | |
border-collapse: collapse; | |
border-spacing: 0; } | |
.figure th, .figure td { | |
padding: 8px; } | |
.figure th { | |
background: #eff0ef; | |
text-align: left; | |
font-weight: bold; } | |
.figure td { | |
border-top: 1px solid #d9dada; } | |
.figure tr:first-child td { | |
border: none; } | |
.figure__caption { | |
margin-bottom: 16px; | |
font-weight: bold; } | |
* + .figure__caption { | |
margin-top: 16px; | |
color: #888; | |
font-size: 14px; | |
font-weight: normal; } | |
.figure__caption--center { | |
text-align: center; } | |
.authors { | |
margin: 0 auto 16px; | |
text-align: center; } | |
.authors--fixed { | |
width: 8em; } | |
.authors__link { | |
display: block; } | |
.authors__link + .authors__link { | |
margin-top: 16px; } | |
.authors__picture { | |
max-width: 100%; } | |
.authors__picture--rounded { | |
border-radius: 50%; } | |
.hljs-comment, | |
.hljs-title { | |
color: #8e908c; } | |
.hljs-variable, | |
.hljs-attribute, | |
.hljs-tag, | |
.hljs-regexp, | |
.ruby .hljs-constant, | |
.xml .hljs-tag .hljs-title, | |
.xml .hljs-pi, | |
.xml .hljs-doctype, | |
.html .hljs-doctype, | |
.css .hljs-id, | |
.css .hljs-class, | |
.css .hljs-pseudo { | |
color: #c82829; } | |
.hljs-number, | |
.hljs-preprocessor, | |
.hljs-pragma, | |
.hljs-built_in, | |
.hljs-literal, | |
.hljs-params, | |
.hljs-constant { | |
color: #f5871f; } | |
.ruby .hljs-class .hljs-title, | |
.css .hljs-rules .hljs-attribute { | |
color: #eab700; } | |
.hljs-string, | |
.hljs-value, | |
.hljs-inheritance, | |
.hljs-header, | |
.ruby .hljs-symbol, | |
.xml .hljs-cdata { | |
color: #718c00; } | |
.css .hljs-hexcolor { | |
color: #3e999f; } | |
.hljs-function, | |
.python .hljs-decorator, | |
.python .hljs-title, | |
.ruby .hljs-function .hljs-title, | |
.ruby .hljs-title .hljs-keyword, | |
.perl .hljs-sub, | |
.javascript .hljs-title, | |
.coffeescript .hljs-title { | |
color: #4271ae; } | |
.hljs-keyword, | |
.javascript .hljs-function { | |
color: #8959a8; } | |
.coffeescript .javascript, | |
.javascript .xml, | |
.tex .hljs-formula, | |
.xml .javascript, | |
.xml .vbscript, | |
.xml .css, | |
.xml .hljs-cdata { | |
opacity: 0.5; } | |
.footer { | |
padding-bottom: 24px; | |
color: #A2A4A3; | |
font-size: 14px; } | |
.footer:before, | |
.footer:after { | |
display: block; | |
content: ''; } | |
.footer:after { | |
clear: both; } | |
.footer__link--contribute { | |
padding-left: 20px; } | |
.footer__link--contribute:before { | |
position: absolute; | |
margin: 1px 0 0 -20px; | |
width: 18px; | |
height: 18px; | |
background: #A2A4A3 url(/images/github.svg) no-repeat; | |
content: ''; } | |
.footer__link--contribute:hover:before { | |
background-color: #1096D5; } | |
@media (min-width: 1024px) { | |
.footer__copy { | |
width: 74.5762711864%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; } } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, picture { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; } | |
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { | |
display: block; } | |
body { | |
line-height: 1; } | |
ol, ul { | |
list-style: none; } | |
blockquote, q { | |
quotes: none; } | |
blockquote:before, blockquote:after, q:before, q:after { | |
content: ''; | |
content: none; } | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; } | |
*, *:before, *:after { | |
box-sizing: border-box; } | |
html { | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; } | |
body { | |
max-width: 1200px; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 0 20px; | |
background: #FFF; | |
color: #000; | |
font: 16px/1.5 Helvetica, Arial, sans-serif; } | |
body:before, body:after { | |
display: block; | |
content: ''; } | |
body:after { | |
clear: both; } | |
a { | |
text-decoration: none; } | |
.teaser__author, .teaser__intro a, .tags__link, .linkbait__link, .entry__link, .content a, .authors__link { | |
color: #1096D5; } | |
.teaser__author:hover, .teaser__intro a:hover, .tags__link:hover, .linkbait__link:hover, .entry__link:hover, .content a:hover, .authors__link:hover, .teaser__author:focus, .teaser__intro a:focus, .tags__link:focus, .linkbait__link:focus, .entry__link:focus, .content a:focus, .authors__link:focus { | |
color: #29b0ef; } | |
.header__menu-link:hover, .teaser__link:hover, .footer__link:hover, .header__menu-link:focus, .teaser__link:focus, .footer__link:focus { | |
color: #1096D5; } | |
.teaser__category, .entry__category { | |
color: #00A700; } | |
.teaser__category:hover, .entry__category:hover, .teaser__category:focus, .entry__category:focus { | |
color: #00c600; } | |
.footer__link { | |
color: #A2A4A3; } | |
.header__logo-type, .header__menu-link, .teaser__link { | |
color: #000; } | |
.content a:visited { | |
color: #7957BC; } | |
.content a:visited:hover { | |
color: #9c83cd; } | |
.header__logo-type, .header__menu-link { | |
transition: color 0.3s; } | |
.header:before, .header:after { | |
display: block; | |
content: ''; } | |
.header:after { | |
clear: both; } | |
.header__logo { | |
letter-spacing: -1px; | |
font-weight: bold; | |
font-size: 20px; } | |
.header__logo-type { | |
padding-left: 50px; | |
line-height: 48px; } | |
.header__logo-type:before { | |
position: absolute; | |
margin: -2px 0 0 -52px; | |
width: 48px; | |
height: 48px; | |
background: url(/images/logo.png) no-repeat; | |
content: ''; } | |
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
.header__logo-type:before { | |
background-image: url(/images/logo@2x.png); | |
background-size: 48px; } } | |
.header__logo-opera { | |
font-weight: 100; } | |
.header__menu { | |
display: flex; | |
justify-content: space-between; | |
font-size: 20px; | |
color: #A2A4A3; } | |
.header__search-field { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
padding: 0 0 0 10px; | |
width: 100%; | |
height: 26px; | |
border: none; | |
border-radius: 13px; | |
background: linear-gradient(to bottom, #f2f2f2, #f9f9f9); | |
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); | |
font-size: 14px; } | |
.header__search-field::-webkit-search-cancel-button, .header__search-field::-webkit-search-decoration { | |
-webkit-appearance: none; } | |
.header__search-field::placeholder { | |
opacity: 1; | |
color: #A2A4A3; } | |
.header__search-field:focus { | |
outline: none; | |
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.22); } | |
@media (max-width: 568px) { | |
.header { | |
padding-bottom: 24px; } | |
.header__logo { | |
position: absolute; | |
top: 57px; | |
left: 0; | |
right: 0; | |
text-align: center; } | |
.header__menu { | |
padding-top: 20px; | |
padding-bottom: 78px; | |
font-size: 16px; } } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.header { | |
padding-top: 20px; | |
padding-bottom: 24px; } | |
.header__logo { | |
width: 30.7692307692%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 65.3846153846%; | |
float: left; | |
margin-left: 34.6153846154%; | |
margin-right: -100%; | |
padding-top: 8px; | |
padding-bottom: 25px; } | |
.header__search { | |
clear: both; | |
width: 100%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.header { | |
padding-top: 20px; | |
padding-bottom: 24px; } | |
.header__logo { | |
width: 31.7073170732%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 65.8536585366%; | |
float: left; | |
margin-left: 34.1463414634%; | |
margin-right: -100%; | |
padding-top: 8px; | |
padding-bottom: 16px; } | |
.header__search { | |
clear: both; | |
width: 65.8536585366%; | |
float: left; | |
margin-left: 34.1463414634%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.header { | |
padding-top: 50px; | |
padding-bottom: 47px; } | |
.header__logo { | |
width: 23.7288135593%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 40.6779661017%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; | |
padding-top: 8px; } | |
.header__search { | |
width: 23.7288135593%; | |
float: left; | |
margin-left: 76.2711864407%; | |
margin-right: -100%; | |
padding-top: 11px; } } | |
.teaser { | |
margin-bottom: 16px; | |
border-bottom: 1px solid #ececec; } | |
.teaser:before, .teaser:after { | |
display: block; | |
content: ''; } | |
.teaser:after { | |
clear: both; } | |
.teaser__title { | |
padding-bottom: 6px; | |
line-height: 1.3; | |
font-weight: 100; | |
font-size: 21px; } | |
.teaser__picture { | |
margin-top: 5px; | |
margin-bottom: 4px; | |
width: 100%; | |
max-width: 100%; } | |
.teaser__meta { | |
padding-bottom: 18px; | |
font-size: 12px; | |
color: #A2A4A3; } | |
.teaser__intro { | |
padding-bottom: 16px; } | |
.teaser--blog { | |
border-bottom-color: #dbeff8; } | |
.teaser:last-child { | |
margin-bottom: -1px; | |
border-bottom: none; } | |
.teaser__title--featured { | |
margin-bottom: 5px; | |
font-size: 24px; } | |
@media (min-width: 768px) { | |
.teaser__picture--featured { | |
width: 48.275862069%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; | |
margin-top: 2px; | |
margin-bottom: 22px; } | |
.teaser__content--featured { | |
width: 48.275862069%; | |
float: left; | |
margin-left: 51.724137931%; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.teaser__title--featured { | |
font-size: 30px; } } | |
@media (min-width: 1024px) { | |
.teaser__title--featured { | |
margin-top: -7px; | |
font-size: 36px; } } | |
.tags { | |
padding-bottom: 16px; } | |
.tags__item { | |
display: inline-block; } | |
.tags__item:not(:last-child):after { | |
color: #A2A4A3; | |
content: '\00A0\2219\00A0'; } | |
.tags--featured { | |
margin-top: -6px; | |
padding-bottom: 12px; | |
font-size: 18px; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.tags--featured { | |
font-size: 20px; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.tags--featured { | |
font-size: 22px; } } | |
@media (max-width: 1023px) { | |
.tags--featured { | |
padding-top: 12px; | |
border-top: 1px solid #ececec; } } | |
@media (min-width: 1024px) { | |
.tags--featured { | |
font-size: 24px; } } | |
.layout:before, .layout:after { | |
display: block; | |
content: ''; } | |
.layout:after { | |
clear: both; } | |
.layout__aside, .layout__content { | |
padding-bottom: 24px; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.layout__aside { | |
width: 30.7692307692%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 65.3846153846%; | |
float: left; | |
margin-left: 34.6153846154%; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.layout__aside { | |
width: 31.7073170732%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 65.8536585366%; | |
float: left; | |
margin-left: 34.1463414634%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.layout__aside { | |
width: 23.7288135593%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 74.5762711864%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; } | |
.layout__content--entry { | |
width: 66.1016949153%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; } } | |
.archive__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.archive__columns[data-columns]::before { | |
content: '2 .archive__column'; } } | |
@media (min-width: 1024px) { | |
.archive__columns[data-columns]::before { | |
content: '3 .archive__column'; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.archive__column:nth-child(1) { | |
width: 48.1481481481%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.archive__column:nth-child(2) { | |
width: 48.1481481481%; | |
float: left; | |
margin-left: 51.8518518519%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.archive__column:nth-child(1) { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.archive__column:nth-child(2) { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 34.0909090909%; | |
margin-right: -100%; } | |
.archive__column:nth-child(3) { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 68.1818181818%; | |
margin-right: -100%; } } | |
.featured { | |
padding-bottom: 14px; } | |
.featured:before, .featured:after { | |
display: block; | |
content: ''; } | |
.featured:after { | |
clear: both; } | |
.featured__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 1024px) { | |
.featured__article { | |
width: 65.9090909091%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.featured__tags { | |
width: 31.8181818182%; | |
float: left; | |
margin-left: 68.1818181818%; | |
margin-right: -100%; } } | |
.featured:after { | |
border-bottom: 1px solid #ececec; } | |
.blog { | |
margin: 0 -20px 24px; | |
padding: 20px 20px 0; | |
background: #f3f9fc; } | |
.blog__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.blog { | |
margin-right: 0; } } | |
@media (min-width: 768px) { | |
.blog { | |
margin-left: 0; | |
margin-right: 0; | |
padding: 15px 15px 0; } } | |
.linkbait { | |
margin-bottom: 24px; } | |
.linkbait__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
.linkbait__item { | |
margin-bottom: 10px; | |
padding-left: 12px; | |
line-height: 1.3; } | |
.linkbait__item:before { | |
position: absolute; | |
margin-left: -12px; | |
content: '\2022'; | |
color: #d9dada; } | |
@media (min-width: 768px) { | |
.linkbait { | |
padding: 0 15px; } } | |
.entry { | |
margin-bottom: 16px; } | |
.content__title { | |
margin-bottom: 15px; | |
line-height: 1.3; | |
font-weight: 100; | |
font-size: 24px; } | |
.content h2 { | |
padding-top: 14px; | |
margin-bottom: 16px; | |
line-height: 1.3; | |
font-size: 20px; } | |
.content h3 { | |
padding-top: 15px; | |
margin-bottom: 18px; | |
line-height: 1.3; | |
font-weight: bold; | |
font-size: 18px; } | |
.content h2 code, .content h3 code { | |
font-family: inherit; } | |
.content p { | |
margin-bottom: 16px; } | |
.content blockquote { | |
color: #888; | |
font-style: italic; } | |
.content ol, .content ul { | |
margin-bottom: 8px; | |
counter-reset: list; } | |
.content ol ol, .content ol ul, .content ul ol, .content ul ul { | |
margin-bottom: -16px; | |
padding-top: 8px; | |
padding-left: 20px; } | |
.content ol li, .content ul li { | |
padding-bottom: 8px; } | |
.content ul > li:before { | |
content: '\2022\00A0\00A0'; } | |
.content ol > li:before { | |
counter-increment: list; | |
content: counter(list) '.\00A0\00A0'; } | |
.content pre { | |
margin-bottom: 16px; | |
white-space: pre-wrap; } | |
.content pre code { | |
word-wrap: break-word; } | |
.content b, .content strong { | |
font-weight: bold; } | |
.content i, .content em, .content dfn { | |
font-style: italic; } | |
.content code { | |
tab-size: 4; | |
font-family: Monaco, Consolas, monospace, monospace; } | |
@media (min-width: 768px) { | |
.content__title { | |
padding-bottom: 14px; | |
font-size: 30px; } | |
.content blockquote, .content ol, .content ul, .content pre { | |
padding-left: 24px; } } | |
@media (min-width: 1024px) { | |
.content__title { | |
margin-top: -7px; | |
padding-bottom: 20px; | |
font-size: 36px; } } | |
.figure { | |
max-width: 100%; | |
overflow: auto; } | |
.figure--left { | |
float: left; } | |
.figure--right { | |
float: right; } | |
.figure__media { | |
display: block; | |
margin-bottom: 16px; | |
max-width: 100%; } | |
.figure__media + .figure__media { | |
margin-top: 22px; } | |
.figure__media--center { | |
margin: auto; } | |
.figure__media--full { | |
width: 100%; } | |
@media (min-width: 768px) { | |
.figure__media--first { | |
float: left; } | |
.figure__media--second { | |
float: right; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.figure__media--half { | |
width: 48.1481481481%; } } | |
@media (min-width: 1024px) { | |
.figure__media--half { | |
width: 48.7179487179%; } } | |
@media (min-width: 768px) { | |
.figure__media--half + .figure__media--half { | |
margin-top: 0; } } | |
.figure table { | |
width: 100%; | |
border-collapse: collapse; | |
border-spacing: 0; } | |
.figure th, .figure td { | |
padding: 8px; } | |
.figure th { | |
background: #eff0ef; | |
text-align: left; | |
font-weight: bold; } | |
.figure td { | |
border-top: 1px solid #d9dada; } | |
.figure tr:first-child td { | |
border: none; } | |
.figure__caption { | |
margin-bottom: 16px; | |
font-weight: bold; } | |
* + .figure__caption { | |
margin-top: 16px; | |
color: #888; | |
font-size: 14px; | |
font-weight: normal; } | |
.figure__caption--center { | |
text-align: center; } | |
.authors { | |
margin: 0 auto 16px; | |
text-align: center; } | |
.authors--fixed { | |
width: 8em; } | |
.authors__link { | |
display: block; } | |
.authors__link + .authors__link { | |
margin-top: 16px; } | |
.authors__picture { | |
max-width: 100%; } | |
.authors__picture--rounded { | |
border-radius: 50%; } | |
.hljs-comment, .hljs-title { | |
color: #8e908c; } | |
.hljs-variable, .hljs-attribute, .hljs-tag, .hljs-regexp, .ruby .hljs-constant, .xml .hljs-tag .hljs-title, .xml .hljs-pi, .xml .hljs-doctype, .html .hljs-doctype, .css .hljs-id, .css .hljs-class, .css .hljs-pseudo { | |
color: #c82829; } | |
.hljs-number, .hljs-preprocessor, .hljs-pragma, .hljs-built_in, .hljs-literal, .hljs-params, .hljs-constant { | |
color: #f5871f; } | |
.ruby .hljs-class .hljs-title, .css .hljs-rules .hljs-attribute { | |
color: #eab700; } | |
.hljs-string, .hljs-value, .hljs-inheritance, .hljs-header, .ruby .hljs-symbol, .xml .hljs-cdata { | |
color: #718c00; } | |
.css .hljs-hexcolor { | |
color: #3e999f; } | |
.hljs-function, .python .hljs-decorator, .python .hljs-title, .ruby .hljs-function .hljs-title, .ruby .hljs-title .hljs-keyword, .perl .hljs-sub, .javascript .hljs-title, .coffeescript .hljs-title { | |
color: #4271ae; } | |
.hljs-keyword, .javascript .hljs-function { | |
color: #8959a8; } | |
.coffeescript .javascript, .javascript .xml, .tex .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .hljs-cdata { | |
opacity: 0.5; } | |
.footer { | |
padding-bottom: 24px; | |
color: #A2A4A3; | |
font-size: 14px; } | |
.footer:before, .footer:after { | |
display: block; | |
content: ''; } | |
.footer:after { | |
clear: both; } | |
.footer__link--contribute { | |
padding-left: 20px; } | |
.footer__link--contribute:before { | |
position: absolute; | |
margin: 1px 0 0 -20px; | |
width: 18px; | |
height: 18px; | |
background: #A2A4A3 url(/images/github.svg) no-repeat; | |
content: ''; } | |
.footer__link--contribute:hover:before { | |
background-color: #1096D5; } | |
@media (min-width: 1024px) { | |
.footer__copy { | |
width: 74.5762711864%; | |
float: left; | |
margin-left: 25.4237288136%; | |
margin-right: -100%; } } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video, picture { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; } | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, main, nav, section, summary { | |
display: block; } | |
body { | |
line-height: 1; } | |
ol, ul { | |
list-style: none; } | |
blockquote, q { | |
quotes: none; } | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; } | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; } | |
*, *:before, *:after { | |
box-sizing: border-box; } | |
html { | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; } | |
body { | |
max-width: 1200px; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 0 20px; | |
background: #FFF; | |
color: #000; | |
font: 16px/1.5 Helvetica, Arial, sans-serif; } | |
body:before, body:after { | |
display: block; | |
content: ''; } | |
body:after { | |
clear: both; } | |
a { | |
text-decoration: none; } | |
.teaser__author, .teaser__intro a, .tags__link, .linkbait__link, .entry__link, .content a, .authors__link { | |
color: #1096D5; } | |
.teaser__author:hover, .teaser__intro a:hover, .tags__link:hover, .linkbait__link:hover, .entry__link:hover, .content a:hover, .authors__link:hover, .teaser__author:focus, .teaser__intro a:focus, .tags__link:focus, .linkbait__link:focus, .entry__link:focus, .content a:focus, .authors__link:focus { | |
color: #29b0ef; } | |
.header__menu-link:hover, .teaser__link:hover, .footer__link:hover, .header__menu-link:focus, .teaser__link:focus, .footer__link:focus { | |
color: #1096D5; } | |
.teaser__category, .entry__category { | |
color: #00A700; } | |
.teaser__category:hover, .entry__category:hover, .teaser__category:focus, .entry__category:focus { | |
color: #00c600; } | |
.footer__link { | |
color: #A2A4A3; } | |
.header__logo-type, .header__menu-link, .teaser__link { | |
color: #000; } | |
.content a:visited { | |
color: #7957BC; } | |
.content a:visited:hover { | |
color: #9c83cd; } | |
.header__logo-type, .header__menu-link { | |
transition: color 0.3s; } | |
.header:before, .header:after { | |
display: block; | |
content: ''; } | |
.header:after { | |
clear: both; } | |
.header__logo { | |
letter-spacing: -1px; | |
font-weight: bold; | |
font-size: 20px; } | |
.header__logo-type { | |
padding-left: 50px; | |
line-height: 48px; } | |
.header__logo-type:before { | |
position: absolute; | |
margin: -2px 0 0 -52px; | |
width: 48px; | |
height: 48px; | |
background: url(/images/logo.png) no-repeat; | |
content: ''; } | |
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { | |
.header__logo-type:before { | |
background-image: url(/images/logo@2x.png); | |
background-size: 48px; } } | |
.header__logo-opera { | |
font-weight: 100; } | |
.header__menu { | |
display: flex; | |
justify-content: space-between; | |
font-size: 20px; | |
color: #A2A4A3; } | |
.header__search-field { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
padding: 0 0 0 10px; | |
width: 100%; | |
height: 26px; | |
border: none; | |
border-radius: 13px; | |
background: linear-gradient(to bottom, #f2f2f2, #f9f9f9); | |
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); | |
font-size: 14px; } | |
.header__search-field::-webkit-search-cancel-button, .header__search-field::-webkit-search-decoration { | |
-webkit-appearance: none; } | |
.header__search-field::placeholder { | |
opacity: 1; | |
color: #A2A4A3; } | |
.header__search-field:focus { | |
outline: none; | |
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.22); } | |
@media (max-width: 568px) { | |
.header { | |
padding-bottom: 24px; } | |
.header__logo { | |
position: absolute; | |
top: 57px; | |
left: 0; | |
right: 0; | |
text-align: center; } | |
.header__menu { | |
padding-top: 20px; | |
padding-bottom: 78px; | |
font-size: 16px; } } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.header { | |
padding-top: 20px; | |
padding-bottom: 24px; } | |
.header__logo { | |
width: 30.76923%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 65.38462%; | |
float: left; | |
margin-left: 34.61538%; | |
margin-right: -100%; | |
padding-top: 8px; | |
padding-bottom: 25px; } | |
.header__search { | |
clear: both; | |
width: 100%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.header { | |
padding-top: 20px; | |
padding-bottom: 24px; } | |
.header__logo { | |
width: 31.70732%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 65.85366%; | |
float: left; | |
margin-left: 34.14634%; | |
margin-right: -100%; | |
padding-top: 8px; | |
padding-bottom: 16px; } | |
.header__search { | |
clear: both; | |
width: 65.85366%; | |
float: left; | |
margin-left: 34.14634%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.header { | |
padding-top: 50px; | |
padding-bottom: 47px; } | |
.header__logo { | |
width: 23.72881%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.header__menu { | |
width: 40.67797%; | |
float: left; | |
margin-left: 25.42373%; | |
margin-right: -100%; | |
padding-top: 8px; } | |
.header__search { | |
width: 23.72881%; | |
float: left; | |
margin-left: 76.27119%; | |
margin-right: -100%; | |
padding-top: 11px; } } | |
.teaser { | |
margin-bottom: 16px; | |
border-bottom: 1px solid #ececec; } | |
.teaser:before, .teaser:after { | |
display: block; | |
content: ''; } | |
.teaser:after { | |
clear: both; } | |
.teaser__title { | |
padding-bottom: 6px; | |
line-height: 1.3; | |
font-weight: 100; | |
font-size: 21px; } | |
.teaser__picture { | |
margin-top: 5px; | |
margin-bottom: 4px; | |
width: 100%; | |
max-width: 100%; } | |
.teaser__meta { | |
padding-bottom: 18px; | |
font-size: 12px; | |
color: #A2A4A3; } | |
.teaser__intro { | |
padding-bottom: 16px; } | |
.teaser--blog { | |
border-bottom-color: #dbeff8; } | |
.teaser:last-child { | |
margin-bottom: -1px; | |
border-bottom: none; } | |
.teaser__title--featured { | |
margin-bottom: 5px; | |
font-size: 24px; } | |
@media (min-width: 768px) { | |
.teaser__picture--featured { | |
width: 48.27586%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; | |
margin-top: 2px; | |
margin-bottom: 22px; } | |
.teaser__content--featured { | |
width: 48.27586%; | |
float: left; | |
margin-left: 51.72414%; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.teaser__title--featured { | |
font-size: 30px; } } | |
@media (min-width: 1024px) { | |
.teaser__title--featured { | |
margin-top: -7px; | |
font-size: 36px; } } | |
.tags { | |
padding-bottom: 16px; } | |
.tags__item { | |
display: inline-block; } | |
.tags__item:not(:last-child):after { | |
color: #A2A4A3; | |
content: '\00A0\2219\00A0'; } | |
.tags--featured { | |
margin-top: -6px; | |
padding-bottom: 12px; | |
font-size: 18px; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.tags--featured { | |
font-size: 20px; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.tags--featured { | |
font-size: 22px; } } | |
@media (max-width: 1023px) { | |
.tags--featured { | |
padding-top: 12px; | |
border-top: 1px solid #ececec; } } | |
@media (min-width: 1024px) { | |
.tags--featured { | |
font-size: 24px; } } | |
.layout:before, .layout:after { | |
display: block; | |
content: ''; } | |
.layout:after { | |
clear: both; } | |
.layout__aside, .layout__content { | |
padding-bottom: 24px; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.layout__aside { | |
width: 30.76923%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 65.38462%; | |
float: left; | |
margin-left: 34.61538%; | |
margin-right: -100%; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.layout__aside { | |
width: 31.70732%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 65.85366%; | |
float: left; | |
margin-left: 34.14634%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.layout__aside { | |
width: 23.72881%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.layout__content { | |
width: 74.57627%; | |
float: left; | |
margin-left: 25.42373%; | |
margin-right: -100%; } | |
.layout__content--entry { | |
width: 66.10169%; | |
float: left; | |
margin-left: 25.42373%; | |
margin-right: -100%; } } | |
.archive__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.archive__columns[data-columns]::before { | |
content: '2 .archive__column'; } } | |
@media (min-width: 1024px) { | |
.archive__columns[data-columns]::before { | |
content: '3 .archive__column'; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.archive__column:nth-child(1) { | |
width: 48.14815%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.archive__column:nth-child(2) { | |
width: 48.14815%; | |
float: left; | |
margin-left: 51.85185%; | |
margin-right: -100%; } } | |
@media (min-width: 1024px) { | |
.archive__column:nth-child(1) { | |
width: 31.81818%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.archive__column:nth-child(2) { | |
width: 31.81818%; | |
float: left; | |
margin-left: 34.09091%; | |
margin-right: -100%; } | |
.archive__column:nth-child(3) { | |
width: 31.81818%; | |
float: left; | |
margin-left: 68.18182%; | |
margin-right: -100%; } } | |
.featured { | |
padding-bottom: 14px; } | |
.featured:before, .featured:after { | |
display: block; | |
content: ''; } | |
.featured:after { | |
clear: both; } | |
.featured__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 1024px) { | |
.featured__article { | |
width: 65.90909%; | |
float: left; | |
margin-left: 0; | |
margin-right: -100%; } | |
.featured__tags { | |
width: 31.81818%; | |
float: left; | |
margin-left: 68.18182%; | |
margin-right: -100%; } } | |
.featured:after { | |
border-bottom: 1px solid #ececec; } | |
.blog { | |
margin: 0 -20px 24px; | |
padding: 20px 20px 0; | |
background: #f3f9fc; } | |
.blog__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
@media (min-width: 569px) and (max-width: 767px) { | |
.blog { | |
margin-right: 0; } } | |
@media (min-width: 768px) { | |
.blog { | |
margin-left: 0; | |
margin-right: 0; | |
padding: 15px 15px 0; } } | |
.linkbait { | |
margin-bottom: 24px; } | |
.linkbait__title { | |
position: absolute; | |
clip: rect(0 0 0 0); | |
overflow: hidden; | |
margin: -1px; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
border: 0; } | |
.linkbait__item { | |
margin-bottom: 10px; | |
padding-left: 12px; | |
line-height: 1.3; } | |
.linkbait__item:before { | |
position: absolute; | |
margin-left: -12px; | |
content: '\2022'; | |
color: #d9dada; } | |
@media (min-width: 768px) { | |
.linkbait { | |
padding: 0 15px; } } | |
.entry { | |
margin-bottom: 16px; } | |
.content__title { | |
margin-bottom: 15px; | |
line-height: 1.3; | |
font-weight: 100; | |
font-size: 24px; } | |
.content h2 { | |
padding-top: 14px; | |
margin-bottom: 16px; | |
line-height: 1.3; | |
font-size: 20px; } | |
.content h3 { | |
padding-top: 15px; | |
margin-bottom: 18px; | |
line-height: 1.3; | |
font-weight: bold; | |
font-size: 18px; } | |
.content h2 code, .content h3 code { | |
font-family: inherit; } | |
.content p { | |
margin-bottom: 16px; } | |
.content blockquote { | |
color: #888; | |
font-style: italic; } | |
.content ol, .content ul { | |
margin-bottom: 8px; | |
counter-reset: list; } | |
.content ol ol, .content ol ul, .content ul ol, .content ul ul { | |
margin-bottom: -16px; | |
padding-top: 8px; | |
padding-left: 20px; } | |
.content ol li, .content ul li { | |
padding-bottom: 8px; } | |
.content ul > li:before { | |
content: '\2022\00A0\00A0'; } | |
.content ol > li:before { | |
counter-increment: list; | |
content: counter(list) ". "; } | |
.content pre { | |
margin-bottom: 16px; | |
white-space: pre-wrap; } | |
.content pre code { | |
word-wrap: break-word; } | |
.content b, .content strong { | |
font-weight: bold; } | |
.content i, .content em, .content dfn { | |
font-style: italic; } | |
.content code { | |
tab-size: 4; | |
font-family: Monaco, Consolas, monospace, monospace; } | |
@media (min-width: 768px) { | |
.content__title { | |
padding-bottom: 14px; | |
font-size: 30px; } | |
.content blockquote, | |
.content ol, .content ul, | |
.content pre { | |
padding-left: 24px; } } | |
@media (min-width: 1024px) { | |
.content__title { | |
margin-top: -7px; | |
padding-bottom: 20px; | |
font-size: 36px; } } | |
.figure { | |
max-width: 100%; | |
overflow: auto; } | |
.figure--left { | |
float: left; } | |
.figure--right { | |
float: right; } | |
.figure__media { | |
display: block; | |
margin-bottom: 16px; | |
max-width: 100%; } | |
.figure__media + .figure__media { | |
margin-top: 22px; } | |
.figure__media--center { | |
margin: auto; } | |
.figure__media--full { | |
width: 100%; } | |
@media (min-width: 768px) { | |
.figure__media--first { | |
float: left; } | |
.figure__media--second { | |
float: right; } } | |
@media (min-width: 768px) and (max-width: 1023px) { | |
.figure__media--half { | |
width: 48.14815%; } } | |
@media (min-width: 1024px) { | |
.figure__media--half { | |
width: 48.71795%; } } | |
@media (min-width: 768px) { | |
.figure__media--half + .figure__media--half { | |
margin-top: 0; } } | |
.figure table { | |
width: 100%; | |
border-collapse: collapse; | |
border-spacing: 0; } | |
.figure th, .figure td { | |
padding: 8px; } | |
.figure th { | |
background: #eff0ef; | |
text-align: left; | |
font-weight: bold; } | |
.figure td { | |
border-top: 1px solid #d9dada; } | |
.figure tr:first-child td { | |
border: none; } | |
.figure__caption { | |
margin-bottom: 16px; | |
font-weight: bold; } | |
* + .figure__caption { | |
margin-top: 16px; | |
color: #888; | |
font-size: 14px; | |
font-weight: normal; } | |
.figure__caption--center { | |
text-align: center; } | |
.authors { | |
margin: 0 auto 16px; | |
text-align: center; } | |
.authors--fixed { | |
width: 8em; } | |
.authors__link { | |
display: block; } | |
.authors__link + .authors__link { | |
margin-top: 16px; } | |
.authors__picture { | |
max-width: 100%; } | |
.authors__picture--rounded { | |
border-radius: 50%; } | |
.hljs-comment, | |
.hljs-title { | |
color: #8e908c; } | |
.hljs-variable, | |
.hljs-attribute, | |
.hljs-tag, | |
.hljs-regexp, | |
.ruby .hljs-constant, | |
.xml .hljs-tag .hljs-title, | |
.xml .hljs-pi, | |
.xml .hljs-doctype, | |
.html .hljs-doctype, | |
.css .hljs-id, | |
.css .hljs-class, | |
.css .hljs-pseudo { | |
color: #c82829; } | |
.hljs-number, | |
.hljs-preprocessor, | |
.hljs-pragma, | |
.hljs-built_in, | |
.hljs-literal, | |
.hljs-params, | |
.hljs-constant { | |
color: #f5871f; } | |
.ruby .hljs-class .hljs-title, | |
.css .hljs-rules .hljs-attribute { | |
color: #eab700; } | |
.hljs-string, | |
.hljs-value, | |
.hljs-inheritance, | |
.hljs-header, | |
.ruby .hljs-symbol, | |
.xml .hljs-cdata { | |
color: #718c00; } | |
.css .hljs-hexcolor { | |
color: #3e999f; } | |
.hljs-function, | |
.python .hljs-decorator, | |
.python .hljs-title, | |
.ruby .hljs-function .hljs-title, | |
.ruby .hljs-title .hljs-keyword, | |
.perl .hljs-sub, | |
.javascript .hljs-title, | |
.coffeescript .hljs-title { | |
color: #4271ae; } | |
.hljs-keyword, | |
.javascript .hljs-function { | |
color: #8959a8; } | |
.coffeescript .javascript, | |
.javascript .xml, | |
.tex .hljs-formula, | |
.xml .javascript, | |
.xml .vbscript, | |
.xml .css, | |
.xml .hljs-cdata { | |
opacity: 0.5; } | |
.footer { | |
padding-bottom: 24px; | |
color: #A2A4A3; | |
font-size: 14px; } | |
.footer:before, .footer:after { | |
display: block; | |
content: ''; } | |
.footer:after { | |
clear: both; } | |
.footer__link--contribute { | |
padding-left: 20px; } | |
.footer__link--contribute:before { | |
position: absolute; | |
margin: 1px 0 0 -20px; | |
width: 18px; | |
height: 18px; | |
background: #A2A4A3 url(/images/github.svg) no-repeat; | |
content: ''; } | |
.footer__link--contribute:hover:before { | |
background-color: #1096D5; } | |
@media (min-width: 1024px) { | |
.footer__copy { | |
width: 74.57627%; | |
float: left; | |
margin-left: 25.42373%; | |
margin-right: -100%; } } | |
/*# sourceMappingURL=screen.css.map */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment