This commit is contained in:
wpioneer 2016-03-21 20:03:01 +03:00
parent a044ccf244
commit e5ca5bc98b
23 changed files with 941 additions and 1122 deletions

View File

@ -10,3 +10,25 @@ Install this starter (assuming Gatsby is installed) by running from your CLI:
![](http://i.imgur.com/422y5GV.png) ![](http://i.imgur.com/422y5GV.png)
## License
The MIT license.
Copyright (c) 2016 Alexandr Shelepenok [ashk.io](http://ashk.io)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -1 +1 @@
import './style.sss'; import './style.sss'

View File

@ -11,13 +11,16 @@ class BlogNav extends React.Component {
<nav className='blog-nav'> <nav className='blog-nav'>
<ul> <ul>
<li> <li>
<Link to="/" className={location.pathname === link('/')?"current":null}>Articles</Link> <Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
</Link>
</li> </li>
<li> <li>
<Link to="/about" className={location.pathname === link('/about')?"current":null}>About me</Link> <Link to="/about" className={ location.pathname === link('/about') ? "current" : null }> About me
</Link>
</li> </li>
<li> <li>
<Link to="/contact" className={location.pathname === link('/contact')?"current":null}>Contact me</Link> <Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
</Link>
</li> </li>
</ul> </ul>
</nav> </nav>

View File

@ -17,11 +17,7 @@ class BlogPost extends React.Component {
const post = route.page.data const post = route.page.data
const home = ( const home = (
<div> <div>
<Link <Link className='gohome' to={ link('/') }> All Articles
className='gohome'
to={link('/')}
>
All Articles
</Link> </Link>
</div> </div>
) )
@ -41,7 +37,9 @@ class BlogPost extends React.Component {
<ReadNext post={ post } {...this.props}/> <ReadNext post={ post } {...this.props}/>
<hr></hr> <hr></hr>
<p> <p>
{config.siteDescr} <a href={config.twitter}><br></br> <strong>{config.authorName}</strong> on Twitter</a> { config.siteDescr }
<a href={ config.twitter }>
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
</p> </p>
</div> </div>
</div> </div>
@ -50,7 +48,6 @@ class BlogPost extends React.Component {
} }
} }
BlogPost.propTypes = { BlogPost.propTypes = {
post: React.PropTypes.object.isRequired, post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array, pages: React.PropTypes.array,

View File

@ -19,16 +19,28 @@ class BlogSocial extends React.Component {
return ( return (
<div className='blog-social'> <div className='blog-social'>
<ul> <ul>
<li><a href={twitter}><i className='fa fa-twitter'></i></a></li> <li>
<li><a href={github}><i className='fa fa-github-alt'></i></a></li> <a href={ twitter }><i className='fa fa-twitter'></i></a>
<li><a href={vk}><i className='fa fa-vk'></i></a></li> </li>
<li>
<a href={ github }><i className='fa fa-github-alt'></i></a>
</li>
<li>
<a href={ vk }><i className='fa fa-vk'></i></a>
</li>
</ul> </ul>
<ul> <ul>
<li><a href={email}><i className='fa fa-envelope-o'></i></a></li> <li>
<li><a href={telegram}><i className='fa fa-paper-plane'></i></a></li> <a href={ email }><i className='fa fa-envelope-o'></i></a>
</li>
<li>
<a href={ telegram }><i className='fa fa-paper-plane'></i></a>
</li>
</ul> </ul>
<ul> <ul>
<li><a href={rss}><i className='fa fa-rss'></i></a></li> <li>
<a href={ rss }><i className='fa fa-rss'></i></a>
</li>
</ul> </ul>
</div> </div>
); );

View File

@ -12,41 +12,23 @@ class ReadNext extends React.Component {
let nextPost let nextPost
if (readNext) { if (readNext) {
nextPost = find(pages, (page) => nextPost = find(pages, (page) => includes(page.path, readNext)
includes(page.path, readNext)
) )
} }
if (!nextPost) { if (!nextPost) {
return React.createElement('noscript', null) return React.createElement('noscript', null)
} else { } else {
nextPost = find(pages, (page) => nextPost = find(pages, (page) => includes(page.path, readNext.slice(1, -1))
includes(page.path, readNext.slice(1, -1))
) )
const description = nextPost.data.description const description = nextPost.data.description
return ( return (
<div> <div>
<h6 <h6 style={ { fontSize: '16px', margin: '20px 0 0'} }>READ THIS NEXT:</h6>
style={{ <h3 style={ { margin: '5px 0 0'} }><Link to={ nextPost.path } query={ { readNext: true} } > { nextPost.data.title } </Link></h3>
fontSize: '16px', <p className='description'>
margin: '20px 0 0' { description }
}} </p>
>
READ THIS NEXT:
</h6>
<h3
style={{
margin: '5px 0 0'
}}
>
<Link
to={nextPost.path}
query={{readNext: true}}
>
{nextPost.data.title}
</Link>
</h3>
<p className='description'>{description}</p>
</div> </div>
); );
} }

View File

@ -13,34 +13,10 @@ class SidebarLeft extends React.Component {
header = ( header = (
<header> <header>
<Link <Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ link('/') }>
style={{ <img src='./images/photo9.jpg' width='75' height='75' />
textDecoration: 'none',
borderBottom: 'none',
outline: 'none'
}}
to={link('/')}
>
<img
src='./images/photo9.jpg'
width='75'
height='75'
/>
</Link> </Link>
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ link('/') } > { config.siteTitle } </Link></h1>
<h1>
<Link
style={{
textDecoration: 'none',
borderBottom: 'none',
color: 'inherit'
}}
to={link('/')}
>
{config.siteTitle}
</Link>
</h1>
<p> <p>
{ config.siteDescr } { config.siteDescr }
</p> </p>

View File

@ -46,7 +46,9 @@ module.exports = function(config, env) {
config.plugin('extract-css', config.plugin('extract-css',
ExtractTextPlugin, ExtractTextPlugin,
["styles.css", { allChunks: true }]); ["styles.css", {
allChunks: true
}]);
return config return config
}; };

View File

@ -24,11 +24,10 @@ module.exports = React.createClass({
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0" />
name="viewport" <title>
content="width=device-width, initial-scale=1.0 maximum-scale=1.0" { title }
/> </title>
<title>{title}</title>
<link rel="shortcut icon" href={ this.props.favicon } /> <link rel="shortcut icon" href={ this.props.favicon } />
<link href='https://fonts.googleapis.com/css?family=Roboto:700|Raleway:600,700|PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css' /> <link href='https://fonts.googleapis.com/css?family=Roboto:700|Raleway:600,700|PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css' />
{ cssLink } { cssLink }

View File

@ -14,8 +14,7 @@ class BlogIndex extends React.Component {
render() { render() {
const pageLinks = [] const pageLinks = []
// Sort pages. // Sort pages.
const sortedPages = sortBy(this.props.route.pages, (page) => const sortedPages = sortBy(this.props.route.pages, (page) => access(page, 'data.date')
access(page, 'data.date')
).reverse() ).reverse()
sortedPages.forEach((page) => { sortedPages.forEach((page) => {
if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') { if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
@ -26,30 +25,14 @@ class BlogIndex extends React.Component {
pageLinks.push( pageLinks.push(
<div className='blog-post'> <div className='blog-post'>
<time dateTime={moment(datePublished).format('MMMM D, YYYY')}>{moment(datePublished).format('MMMM YYYY')}</time> <time dateTime={ moment(datePublished).format('MMMM D, YYYY') }>
<span { moment(datePublished).format('MMMM YYYY') }
style={{ </time>
padding: '5px' <span style={ { padding: '5px'} }></span>
}}
>
</span>
<span className='blog-category'>{ category }</span> <span className='blog-category'>{ category }</span>
<h2> <h2><Link style={ { borderBottom: 'none',} } to={ link(page.path) } > { title } </Link></h2>
<Link
style={{
borderBottom: 'none',
}}
to={link(page.path)}
>
{title}
</Link>
</h2>
<p dangerouslySetInnerHTML={ { __html: description} } /> <p dangerouslySetInnerHTML={ { __html: description} } />
<Link <Link className='readmore' to={ link(page.path) }> Read
className='readmore'
to={link(page.path)}
>
Read
</Link> </Link>
</div> </div>
) )

View File

@ -17,8 +17,6 @@ p > code, span > code {
overflow: auto; overflow: auto;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
} }
pre code { pre code {
display: block; display: block;
border-radius: 3px; border-radius: 3px;
@ -27,89 +25,57 @@ pre code {
color: #333; color: #333;
background: #f8f8f8; background: #f8f8f8;
} }
.hljs-comment, .hljs-quote {
.hljs-comment,
.hljs-quote {
color: #998; color: #998;
font-style: italic; font-style: italic;
} }
.hljs-keyword, .hljs-selector-tag, .hljs-subst {
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
color: #333; color: #333;
font-weight: bold; font-weight: bold;
} }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080; color: #008080;
} }
.hljs-string, .hljs-doctag {
.hljs-string,
.hljs-doctag {
color: #d14; color: #d14;
} }
.hljs-title, .hljs-section, .hljs-selector-id {
.hljs-title,
.hljs-section,
.hljs-selector-id {
color: #900; color: #900;
font-weight: bold; font-weight: bold;
} }
.hljs-subst { .hljs-subst {
font-weight: normal; font-weight: normal;
} }
.hljs-type, .hljs-class .hljs-title {
.hljs-type,
.hljs-class .hljs-title {
color: #458; color: #458;
font-weight: bold; font-weight: bold;
} }
.hljs-tag, .hljs-name, .hljs-attribute {
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080; color: #000080;
font-weight: normal; font-weight: normal;
} }
.hljs-regexp, .hljs-link {
.hljs-regexp,
.hljs-link {
color: #009926; color: #009926;
} }
.hljs-symbol, .hljs-bullet {
.hljs-symbol,
.hljs-bullet {
color: #990073; color: #990073;
} }
.hljs-built_in, .hljs-builtin-name {
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3; color: #0086b3;
} }
.hljs-meta { .hljs-meta {
color: #999; color: #999;
font-weight: bold; font-weight: bold;
} }
.hljs-deletion { .hljs-deletion {
background: #fdd; background: #fdd;
} }
.hljs-addition { .hljs-addition {
background: #dfd; background: #dfd;
} }
.hljs-emphasis { .hljs-emphasis {
font-style: italic; font-style: italic;
} }
.hljs-strong { .hljs-strong {
font-weight: bold; font-weight: bold;
} }

View File

@ -2,65 +2,29 @@ html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
body { body {
margin: 0; margin: 0;
} }
/* HTML5 display definitions /* HTML5 display definitions
========================================================================== */ ========================================================================== */
article, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, cite, code, small {
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
cite,
code,
small {
display: block; display: block;
} }
body, article, section, footer, header, div, input, nav, article ol, article ul, blockquote, figure {
body,
article,
section,
footer,
header,
div,
input,
nav,
article ol,
article ul,
blockquote,
figure {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
audio, canvas, progress, video {
audio, display: inline-block; /* 1 */
canvas, vertical-align: baseline; /* 2 */
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
} }
audio:not([controls]) { audio:not([controls]) {
display: none; display: none;
height: 0; height: 0;
} }
[hidden], template {
[hidden],
template {
display: none; display: none;
} }
@ -69,9 +33,7 @@ template {
a { a {
background: transparent; background: transparent;
} }
a:active, a:hover {
a:active,
a:hover {
outline: 0; outline: 0;
} }
@ -80,47 +42,35 @@ a:hover {
abbr { abbr {
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
} }
b, strong {
b,
strong {
font-weight: bold; font-weight: bold;
} }
dfn { dfn {
font-style: italic; font-style: italic;
} }
mark { mark {
background: #ff0; background: #ff0;
color: #000; color: #000;
} }
small { small {
font-size: 70%; font-size: 70%;
} }
sub, sup {
sub,
sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: -0.5em; top: -0.5em;
} }
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
em, i {
em,
i {
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
@ -131,7 +81,6 @@ i {
img { img {
border: 0; border: 0;
} }
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
@ -143,15 +92,10 @@ hr {
box-sizing: content-box; box-sizing: content-box;
height: 0; height: 0;
} }
pre { pre {
overflow: auto; overflow: auto;
} }
code, kbd, pre, samp {
code,
kbd,
pre,
samp {
font-family: monospace, monospace; font-family: monospace, monospace;
} }
@ -161,9 +105,7 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
td, th {
td,
th {
padding: 0; padding: 0;
} }

View File

@ -1,5 +1,4 @@
/*! Gatsby Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */ /*! Gatsby Lumen Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
html, body { html, body {
font-size: 16px; font-size: 16px;
font-size: 100%; font-size: 100%;
@ -9,6 +8,7 @@ html, body {
/* Paragraph /* Paragraph
========================================================================== */ ========================================================================== */
/* Headings /* Headings
========================================================================== */ ========================================================================== */
@ -16,7 +16,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", Helvetica, Arial, sans-serif; font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #222; color: #222;
} }
h1 { h1 {
font-size: 40px; font-size: 40px;
font-size: 2.5rem; font-size: 2.5rem;
@ -27,7 +26,6 @@ h1 {
margin-bottom: 26px; margin-bottom: 26px;
margin-bottom: 1.625rem; margin-bottom: 1.625rem;
} }
h2 { h2 {
font-size: 27px; font-size: 27px;
font-size: 1.6875rem; font-size: 1.6875rem;
@ -38,7 +36,6 @@ h2 {
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h3 { h3 {
font-size: 22px; font-size: 22px;
font-size: 1.375rem; font-size: 1.375rem;
@ -49,7 +46,6 @@ h3 {
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h4 { h4 {
font-size: 19.2px; font-size: 19.2px;
font-size: 1.2rem; font-size: 1.2rem;
@ -60,7 +56,6 @@ h4 {
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h5 { h5 {
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;
@ -71,7 +66,6 @@ h5 {
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h6 { h6 {
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;
@ -82,24 +76,18 @@ h6 {
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h1 + h2 { h1 + h2 {
margin-top: 26px; margin-top: 26px;
margin-top: 1.625rem; margin-top: 1.625rem;
} }
h2 + h3, h3 + h4, h4 + h5 {
h2 + h3,
h3 + h4,
h4 + h5 {
margin-top: 13px; margin-top: 13px;
margin-top: 0.8125rem; margin-top: 0.8125rem;
} }
h5 + h6 { h5 + h6 {
margin-top: -13px; margin-top: -13px;
margin-top: -0.8125rem; margin-top: -0.8125rem;
} }
h6 { h6 {
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
@ -107,18 +95,15 @@ h6 {
/* Links /* Links
========================================================================== */ ========================================================================== */
a { a {
color: #5d93ff; color: #5d93ff;
text-decoration: none; text-decoration: none;
transition: all .3s ease; transition: all .3s ease;
} }
a:hover { a:hover {
border-bottom: 1px solid; border-bottom: 1px solid;
text-decoration: none; text-decoration: none;
} }
a:visited { a:visited {
color: #222; color: #222;
} }
@ -130,7 +115,6 @@ a:active {
color: #222; color: #222;
border-bottom: 1px solid; border-bottom: 1px solid;
} }
h2 a { h2 a {
color: #222; color: #222;
} }
@ -146,17 +130,13 @@ figcaption {
margin-bottom: 0; margin-bottom: 0;
text-align: center; text-align: center;
} }
blockquote { blockquote {
font-style: italic; font-style: italic;
padding-left: 1.4375rem; padding-left: 1.4375rem;
} }
cite { cite {
font-style: normal; font-style: normal;
} }
figure blockquote { figure blockquote {
padding: 31px 0px; padding: 31px 0px;
padding: 1.722222222222222rem 0rem; padding: 1.722222222222222rem 0rem;
@ -169,52 +149,41 @@ figure blockquote p {
line-height: 46.5px; line-height: 46.5px;
line-height: 2.583333333333334rem; line-height: 2.583333333333334rem;
} }
figure.floatLeft, figure.floatRight {
figure.floatLeft,
figure.floatRight {
max-width: 315px; max-width: 315px;
max-width: 17.5rem; max-width: 17.5rem;
padding: 0px 31px; padding: 0px 31px;
padding: 0rem 1.722222222222222rem; padding: 0rem 1.722222222222222rem;
} }
figure.floatLeft blockquote, figure.floatLeft blockquote, figure.floatRight blockquote {
figure.floatRight blockquote {
text-align: left; text-align: left;
padding: 0px; padding: 0px;
padding: 0rem; padding: 0rem;
} }
figure.floatLeft blockquote p, figure.floatLeft blockquote p, figure.floatRight blockquote p {
figure.floatRight blockquote p {
font-size: 19.2px; font-size: 19.2px;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 31px; line-height: 31px;
line-height: 1.722222222222222rem; line-height: 1.722222222222222rem;
} }
figcaption { figcaption {
line-height: 31px; line-height: 31px;
line-height: 1.722222222222222rem; line-height: 1.722222222222222rem;
margin-bottom: 0; margin-bottom: 0;
} }
.floatLeft { .floatLeft {
float: left; float: left;
} }
.floatCenter { .floatCenter {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.floatRight { .floatRight {
float: right; float: right;
} }
ul li, ol li {
ul li,
ol li {
margin-bottom: 0; margin-bottom: 0;
} }
hr { hr {
margin-top: 52px; margin-top: 52px;
margin-top: 3.25rem; margin-top: 3.25rem;
@ -232,25 +201,20 @@ hr {
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px); background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
width: 100px; width: 100px;
} }
small { small {
line-height: 13px; line-height: 13px;
line-height: 0.8125rem; line-height: 0.8125rem;
} }
code { code {
padding: 26px; padding: 26px;
padding: 1.625rem; padding: 1.625rem;
} }
.alignLeft { .alignLeft {
text-align: left; text-align: left;
} }
.alignCenter { .alignCenter {
text-align: center; text-align: center;
} }
.alignRight { .alignRight {
text-align: right; text-align: right;
} }
@ -258,25 +222,22 @@ code {
/* Put your styles below this line /* Put your styles below this line
========================================================================== */ ========================================================================== */
@media screen and (min-width:40em) { @media screen and (min-width:40em) {
/* Mixins /* Mixins
========================================================================== */ ========================================================================== */
body, body, html {
html {
margin: 0; margin: 0;
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
html { html {
font-size: 18px; font-size: 18px;
font-size: 1.125rem; font-size: 1.125rem;
} }
article { article {
max-width: 945px; max-width: 945px;
max-width: 52.5rem; max-width: 52.5rem;
} }
h1 { h1 {
font-size: 40px; font-size: 40px;
font-size: 2.5rem; font-size: 2.5rem;
@ -287,7 +248,6 @@ code {
margin-bottom: 31px; margin-bottom: 31px;
margin-bottom: 1.722222222222222rem; margin-bottom: 1.722222222222222rem;
} }
h2 { h2 {
font-size: 27px; font-size: 27px;
font-size: 1.6875rem; font-size: 1.6875rem;
@ -298,7 +258,6 @@ code {
margin-bottom: 15.5px; margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem; margin-bottom: 0.861111111111111rem;
} }
h3 { h3 {
font-size: 22px; font-size: 22px;
font-size: 1.375rem; font-size: 1.375rem;
@ -309,7 +268,6 @@ code {
margin-bottom: 15.5px; margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem; margin-bottom: 0.861111111111111rem;
} }
h4 { h4 {
font-size: 19.2px; font-size: 19.2px;
font-size: 1.2rem; font-size: 1.2rem;
@ -320,7 +278,6 @@ code {
margin-bottom: 15.5px; margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem; margin-bottom: 0.861111111111111rem;
} }
h5 { h5 {
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;
@ -331,7 +288,6 @@ code {
margin-bottom: 15.5px; margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem; margin-bottom: 0.861111111111111rem;
} }
h6 { h6 {
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;
@ -342,31 +298,23 @@ code {
margin-bottom: 15.5px; margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem; margin-bottom: 0.861111111111111rem;
} }
h1 + h2 { h1 + h2 {
margin-top: 31px; margin-top: 31px;
margin-top: 1.722222222222222rem; margin-top: 1.722222222222222rem;
} }
h2 + h3, h3 + h4, h4 + h5 {
h2 + h3,
h3 + h4,
h4 + h5 {
margin-top: 15.5px; margin-top: 15.5px;
margin-top: 0.861111111111111rem; margin-top: 0.861111111111111rem;
} }
h5 + h6 { h5 + h6 {
margin-top: -15.5px; margin-top: -15.5px;
margin-top: -0.861111111111111rem; margin-top: -0.861111111111111rem;
} }
figcaption { figcaption {
line-height: 31px; line-height: 31px;
line-height: 1.722222222222222rem; line-height: 1.722222222222222rem;
margin-bottom: 0; margin-bottom: 0;
} }
figure blockquote { figure blockquote {
padding: 31px 0px; padding: 31px 0px;
padding: 1.722222222222222rem 0rem; padding: 1.722222222222222rem 0rem;
@ -379,56 +327,45 @@ code {
line-height: 46.5px; line-height: 46.5px;
line-height: 2.583333333333334rem; line-height: 2.583333333333334rem;
} }
figure.floatLeft, figure.floatRight {
figure.floatLeft,
figure.floatRight {
max-width: 315px; max-width: 315px;
max-width: 17.5rem; max-width: 17.5rem;
padding: 0px 31px; padding: 0px 31px;
padding: 0rem 1.722222222222222rem; padding: 0rem 1.722222222222222rem;
} }
figure.floatLeft blockquote, figure.floatLeft blockquote, figure.floatRight blockquote {
figure.floatRight blockquote {
text-align: left; text-align: left;
padding: 0px; padding: 0px;
padding: 0rem; padding: 0rem;
} }
figure.floatLeft blockquote p, figure.floatLeft blockquote p, figure.floatRight blockquote p {
figure.floatRight blockquote p {
font-size: 19.2px; font-size: 19.2px;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 31px; line-height: 31px;
line-height: 1.722222222222222rem; line-height: 1.722222222222222rem;
} }
figcaption { figcaption {
line-height: 31px; line-height: 31px;
line-height: 1.722222222222222rem; line-height: 1.722222222222222rem;
margin-bottom: 0; margin-bottom: 0;
} }
.floatLeft { .floatLeft {
float: left; float: left;
} }
.floatCenter { .floatCenter {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.floatRight { .floatRight {
float: right; float: right;
} }
blockquote { blockquote {
padding-left: 2rem; padding-left: 2rem;
} }
small { small {
line-height: 15.5px; line-height: 15.5px;
line-height: 0.861111111111111rem; line-height: 0.861111111111111rem;
} }
hr { hr {
margin-top: 62px; margin-top: 62px;
margin-top: 3.444444444444445rem; margin-top: 3.444444444444445rem;
@ -440,10 +377,8 @@ code {
background-size: 100% 1.722222222222222rem; background-size: 100% 1.722222222222222rem;
background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px); background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px);
} }
code { code {
padding: 31px; padding: 31px;
padding: 1.722222222222222rem; padding: 1.722222222222222rem;
} }
} }