mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-07-26 20:22:32 +02:00
Update
This commit is contained in:
wpioneer
@@ -1 +1 @@
|
||||
import './style.sss';
|
||||
import './style.sss'
|
||||
@@ -1,24 +1,24 @@
|
||||
.wrapper
|
||||
lost-center: 1070px
|
||||
lost-center: 1070px
|
||||
.content
|
||||
lost-column: 2/3
|
||||
lost-column: 2/3
|
||||
.main-inner
|
||||
padding: 40px 35px
|
||||
|
||||
padding: 40px 35px
|
||||
|
||||
@media screen and (max-width: 1100px)
|
||||
.content
|
||||
lost-column: 2/4
|
||||
.main-inner
|
||||
padding: 35px 20px
|
||||
|
||||
.content
|
||||
lost-column: 2/4
|
||||
.main-inner
|
||||
padding: 35px 20px
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
.content
|
||||
lost-column: 7/12
|
||||
.main-inner
|
||||
padding: 30px 20px
|
||||
|
||||
.content
|
||||
lost-column: 7/12
|
||||
.main-inner
|
||||
padding: 30px 20px
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
.content
|
||||
lost-column: 4/4
|
||||
.main-inner
|
||||
padding: 25px 20px
|
||||
.content
|
||||
lost-column: 4/4
|
||||
.main-inner
|
||||
padding: 25px 20px
|
||||
@@ -5,28 +5,31 @@ import { link } from 'gatsby-helpers'
|
||||
import './style.sss'
|
||||
|
||||
class BlogNav extends React.Component {
|
||||
render() {
|
||||
const { location } = this.props
|
||||
return (
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/" className={location.pathname === link('/')?"current":null}>Articles</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className={location.pathname === link('/about')?"current":null}>About me</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={location.pathname === link('/contact')?"current":null}>Contact me</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const {location} = this.props
|
||||
return (
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className={ location.pathname === link('/about') ? "current" : null }> About me
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BlogNav.propTypes = {
|
||||
location: React.PropTypes.object,
|
||||
BlogNav.propTypes = {
|
||||
location: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default BlogNav
|
||||
@@ -1,23 +1,23 @@
|
||||
.blog-nav
|
||||
margin: 20px 0px 10px
|
||||
margin: 20px 0px 10px
|
||||
|
||||
.blog-nav ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
|
||||
.blog-nav ul li
|
||||
margin: 10px 0 10px
|
||||
margin: 10px 0 10px
|
||||
|
||||
.blog-nav ul li a
|
||||
font-size: 16px
|
||||
line-heigh: 26px
|
||||
margin-bottom: 26px
|
||||
border-bottom: 0
|
||||
font-weight: 400
|
||||
color: #222
|
||||
font-size: 16px
|
||||
line-heigh: 26px
|
||||
margin-bottom: 26px
|
||||
border-bottom: 0
|
||||
font-weight: 400
|
||||
color: #222
|
||||
|
||||
.blog-nav ul li a.current
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-nav ul li a:hover
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
@@ -10,33 +10,33 @@ import { config } from 'config'
|
||||
import './style.sss';
|
||||
|
||||
class BlogPage extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const post = route.page.data
|
||||
render() {
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
<div className='blog-page'>
|
||||
<div className='text'>
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||
return (
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
<div className='blog-page'>
|
||||
<div className='text'>
|
||||
<h1>{ post.title }</h1>
|
||||
<div dangerouslySetInnerHTML={ { __html: post.body} } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BlogPage.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
}
|
||||
|
||||
export default BlogPage
|
||||
@@ -1,16 +1,16 @@
|
||||
.blog-page
|
||||
margin-bottom: 40px
|
||||
margin-bottom: 40px
|
||||
|
||||
.blog-page h1
|
||||
font-size: responsive 20px 36px
|
||||
margin-top: 0
|
||||
font-size: responsive 20px 36px
|
||||
margin-top: 0
|
||||
|
||||
.blog-page p
|
||||
font-size: responsive 14px 16px
|
||||
line-height: 1.5
|
||||
margin-top: 10px
|
||||
font-size: responsive 14px 16px
|
||||
line-height: 1.5
|
||||
margin-top: 10px
|
||||
|
||||
@media (max-width: 900px)
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
@@ -12,48 +12,45 @@ import './style.sss'
|
||||
import '../../static/css/highlight.css'
|
||||
|
||||
class BlogPost extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<div>
|
||||
<Link
|
||||
className='gohome'
|
||||
to={link('/')}
|
||||
>
|
||||
All Articles
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
render() {
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<div>
|
||||
{home}
|
||||
<div className='blog-single'>
|
||||
<div className='text'>
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||
<div className='date-published'>
|
||||
<em>Published {moment(post.datePublished).format('D MMM YYYY')}</em>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer'>
|
||||
<ReadNext post={post} {...this.props}/>
|
||||
<hr></hr>
|
||||
<p>
|
||||
{config.siteDescr} <a href={config.twitter}><br></br> <strong>{config.authorName}</strong> on Twitter</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link className='gohome' to={ link('/') }> All Articles
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ home }
|
||||
<div className='blog-single'>
|
||||
<div className='text'>
|
||||
<h1>{ post.title }</h1>
|
||||
<div dangerouslySetInnerHTML={ { __html: post.body} } />
|
||||
<div className='date-published'>
|
||||
<em>Published { moment(post.datePublished).format('D MMM YYYY') }</em>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer'>
|
||||
<ReadNext post={ post } {...this.props}/>
|
||||
<hr></hr>
|
||||
<p>
|
||||
{ config.siteDescr }
|
||||
<a href={ config.twitter }>
|
||||
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BlogPost.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
}
|
||||
|
||||
export default BlogPost
|
||||
@@ -1,108 +1,108 @@
|
||||
.blog-post
|
||||
margin-bottom: 30px
|
||||
margin-bottom: 30px
|
||||
|
||||
.blog-post:last-child
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 10px
|
||||
|
||||
.blog-post h2
|
||||
margin-top: 10px
|
||||
line-height: 30px
|
||||
margin-bottom: 20px
|
||||
margin-top: 10px
|
||||
line-height: 30px
|
||||
margin-bottom: 20px
|
||||
|
||||
.blog-post h2 a:hover
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-post p
|
||||
font-size: 16px
|
||||
line-height: 26px
|
||||
margin-bottom: 26px
|
||||
font-size: 16px
|
||||
line-height: 26px
|
||||
margin-bottom: 26px
|
||||
|
||||
.blog-post time
|
||||
font-size: 14px
|
||||
color: #222
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
font-size: 14px
|
||||
color: #222
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .blog-category
|
||||
font-size: 14px
|
||||
color: #f7a046
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
font-size: 14px
|
||||
color: #f7a046
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .readmore
|
||||
font-size: 16px
|
||||
color: #5d93ff
|
||||
font-weight: 600
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
font-size: 16px
|
||||
color: #5d93ff
|
||||
font-weight: 600
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .readmore:hover
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-single h1
|
||||
text-align: center
|
||||
margin-top: 30px
|
||||
text-align: center
|
||||
margin-top: 30px
|
||||
|
||||
.blog-single .text
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
|
||||
.blog-single h1,
|
||||
.blog-single .date-published,
|
||||
.blog-single .text div :not(figure)
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
.blog-single .text img
|
||||
max-width: 100%
|
||||
height: auto
|
||||
max-width: 100%
|
||||
height: auto
|
||||
|
||||
.blog-single .footer
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
|
||||
.gohome
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
font-size: 16px
|
||||
text-align: center
|
||||
color: #343e47
|
||||
font-weight: 600
|
||||
position: fixed
|
||||
left: 20px
|
||||
top: 20px
|
||||
opacity: 0.5
|
||||
padding: 8px 18px
|
||||
border: 2px solid #343e47 !important
|
||||
border-radius: 3px
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
font-size: 16px
|
||||
text-align: center
|
||||
color: #343e47
|
||||
font-weight: 600
|
||||
position: fixed
|
||||
left: 20px
|
||||
top: 20px
|
||||
opacity: 0.5
|
||||
padding: 8px 18px
|
||||
border: 2px solid #343e47 !important
|
||||
border-radius: 3px
|
||||
|
||||
.gohome:hover
|
||||
color: #201e28
|
||||
opacity: 1
|
||||
color: #201e28
|
||||
opacity: 1
|
||||
|
||||
@media (max-width: 900px)
|
||||
.blog-single h1
|
||||
margin-top: 15px
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
line-height: 26px
|
||||
line-height: 1.625rem
|
||||
margin: 0px 0px 26px
|
||||
margin: 0rem 0rem 1.625rem
|
||||
.gohome
|
||||
position: static
|
||||
margin: 20px auto 0
|
||||
text-align: center
|
||||
width: 85px
|
||||
display: block
|
||||
.blog-single h1
|
||||
margin-top: 15px
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
line-height: 26px
|
||||
line-height: 1.625rem
|
||||
margin: 0px 0px 26px
|
||||
margin: 0rem 0rem 1.625rem
|
||||
.gohome
|
||||
position: static
|
||||
margin: 20px auto 0
|
||||
text-align: center
|
||||
width: 85px
|
||||
display: block
|
||||
@@ -7,32 +7,44 @@ import './style.sss'
|
||||
import '../../static/fonts/fontawesome/style.css'
|
||||
|
||||
class BlogSocial extends React.Component {
|
||||
render() {
|
||||
render() {
|
||||
|
||||
const twitter = config.blogTitle
|
||||
const vk = config.vk
|
||||
const rss = config.rss
|
||||
const email = config.email
|
||||
const github = config.github
|
||||
const telegram = config.telegram
|
||||
const twitter = config.blogTitle
|
||||
const vk = config.vk
|
||||
const rss = config.rss
|
||||
const email = config.email
|
||||
const github = config.github
|
||||
const telegram = config.telegram
|
||||
|
||||
return (
|
||||
<div className='blog-social'>
|
||||
<ul>
|
||||
<li><a href={twitter}><i className='fa fa-twitter'></i></a></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>
|
||||
<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>
|
||||
<li><a href={rss}><i className='fa fa-rss'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className='blog-social'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ twitter }><i className='fa fa-twitter'></i></a>
|
||||
</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>
|
||||
<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>
|
||||
<li>
|
||||
<a href={ rss }><i className='fa fa-rss'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BlogSocial
|
||||
@@ -1,34 +1,34 @@
|
||||
.blog-social
|
||||
margin-top: 30px
|
||||
margin-top: 30px
|
||||
|
||||
.blog-social ul
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 10px 0
|
||||
clear: fix-legacy
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 10px 0
|
||||
clear: fix-legacy
|
||||
|
||||
.blog-social ul > li
|
||||
float: left
|
||||
margin-right: 5px
|
||||
text-align: center
|
||||
line-height: 21px
|
||||
height: 24px
|
||||
width: 24px
|
||||
border-radius: 3px
|
||||
background: #f4edde
|
||||
float: left
|
||||
margin-right: 5px
|
||||
text-align: center
|
||||
line-height: 21px
|
||||
height: 24px
|
||||
width: 24px
|
||||
border-radius: 3px
|
||||
background: #f4edde
|
||||
|
||||
.blog-social ul > li:hover
|
||||
background: #f4efe8
|
||||
background: #f4efe8
|
||||
|
||||
.blog-social ul > li > a
|
||||
border-bottom: 0
|
||||
line-height: 21px
|
||||
cursor: pointer
|
||||
border-bottom: 0
|
||||
line-height: 21px
|
||||
cursor: pointer
|
||||
|
||||
.blog-social ul > li > a > i
|
||||
color: #333
|
||||
font-size: 14px
|
||||
line-height: 21px
|
||||
color: #333
|
||||
font-size: 14px
|
||||
line-height: 21px
|
||||
|
||||
.blog-social ul > li:hover a > i
|
||||
color: #222
|
||||
color: #222
|
||||
@@ -6,56 +6,38 @@ import find from 'lodash/find'
|
||||
import './style.sss'
|
||||
|
||||
class ReadNext extends React.Component {
|
||||
render() {
|
||||
const { pages, post } = this.props
|
||||
const { readNext } = post
|
||||
render() {
|
||||
const {pages, post} = this.props
|
||||
const {readNext} = post
|
||||
|
||||
let nextPost
|
||||
if (readNext) {
|
||||
nextPost = find(pages, (page) =>
|
||||
includes(page.path, readNext)
|
||||
)
|
||||
}
|
||||
if (!nextPost) {
|
||||
return React.createElement('noscript', null)
|
||||
} else {
|
||||
nextPost = find(pages, (page) =>
|
||||
includes(page.path, readNext.slice(1, -1))
|
||||
)
|
||||
const description = nextPost.data.description
|
||||
let nextPost
|
||||
if (readNext) {
|
||||
nextPost = find(pages, (page) => includes(page.path, readNext)
|
||||
)
|
||||
}
|
||||
if (!nextPost) {
|
||||
return React.createElement('noscript', null)
|
||||
} else {
|
||||
nextPost = find(pages, (page) => includes(page.path, readNext.slice(1, -1))
|
||||
)
|
||||
const description = nextPost.data.description
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h6
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
margin: '20px 0 0'
|
||||
}}
|
||||
>
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<h6 style={ { fontSize: '16px', margin: '20px 0 0'} }>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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ReadNext.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
}
|
||||
|
||||
export default ReadNext
|
||||
@@ -7,72 +7,48 @@ import BlogSocial from '../BlogSocial'
|
||||
import './style.sss'
|
||||
|
||||
class SidebarLeft extends React.Component {
|
||||
render() {
|
||||
const { location, children } = this.props
|
||||
let header
|
||||
render() {
|
||||
const {location, children} = this.props
|
||||
let header
|
||||
|
||||
header = (
|
||||
<header>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
borderBottom: 'none',
|
||||
outline: 'none'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
<img
|
||||
src='./images/photo9.jpg'
|
||||
width='75'
|
||||
height='75'
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<h1>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
borderBottom: 'none',
|
||||
color: 'inherit'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{config.siteTitle}
|
||||
</Link>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
{config.siteDescr}
|
||||
</p>
|
||||
</header>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='sidebar'>
|
||||
<div className='sidebar-inner'>
|
||||
<div className='blog-details'>
|
||||
header = (
|
||||
<header>
|
||||
{header}
|
||||
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ link('/') }>
|
||||
<img src='./images/photo9.jpg' width='75' height='75' />
|
||||
</Link>
|
||||
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ link('/') } > { config.siteTitle } </Link></h1>
|
||||
<p>
|
||||
{ config.siteDescr }
|
||||
</p>
|
||||
</header>
|
||||
</div>
|
||||
<div className='blog-options'>
|
||||
<BlogNav {...this.props}/>
|
||||
<footer>
|
||||
<BlogSocial {...this.props}/>
|
||||
<p className='copyright'>
|
||||
© All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='sidebar'>
|
||||
<div className='sidebar-inner'>
|
||||
<div className='blog-details'>
|
||||
<header>
|
||||
{ header }
|
||||
</header>
|
||||
</div>
|
||||
<div className='blog-options'>
|
||||
<BlogNav {...this.props}/>
|
||||
<footer>
|
||||
<BlogSocial {...this.props}/>
|
||||
<p className='copyright'>
|
||||
© All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SidebarLeft.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
location: React.PropTypes.object,
|
||||
children: React.PropTypes.any,
|
||||
location: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default SidebarLeft
|
||||
@@ -1,59 +1,59 @@
|
||||
.sidebar
|
||||
lost-column: 1/3
|
||||
lost-column: 1/3
|
||||
|
||||
.sidebar .sidebar-inner
|
||||
position: relative
|
||||
padding: 40px
|
||||
position: relative
|
||||
padding: 40px
|
||||
|
||||
.sidebar .sidebar-inner:after
|
||||
background: #eee
|
||||
background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%)
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 1px
|
||||
height: 540px
|
||||
top: 30px
|
||||
right: -10px
|
||||
bottom: 0
|
||||
background: #eee
|
||||
background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%)
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 1px
|
||||
height: 540px
|
||||
top: 30px
|
||||
right: -10px
|
||||
bottom: 0
|
||||
|
||||
.sidebar .sidebar-inner img
|
||||
display: inline-block
|
||||
margin-bottom: 0
|
||||
border-radius: 50%
|
||||
background-clip: padding-box
|
||||
display: inline-block
|
||||
margin-bottom: 0
|
||||
border-radius: 50%
|
||||
background-clip: padding-box
|
||||
|
||||
.sidebar .sidebar-inner h1,
|
||||
.sidebar .sidebar-inner h2
|
||||
font-size: responsive 16px 18px
|
||||
line-height: 1
|
||||
margin: 20px 0 10px
|
||||
font-size: responsive 16px 18px
|
||||
line-height: 1
|
||||
margin: 20px 0 10px
|
||||
|
||||
.sidebar .sidebar-inner p
|
||||
font-size: 14px
|
||||
color: #888
|
||||
line-height: 23px
|
||||
margin-bottom: 23px
|
||||
font-size: 14px
|
||||
color: #888
|
||||
line-height: 23px
|
||||
margin-bottom: 23px
|
||||
|
||||
.sidebar .sidebar-inner p.copyright
|
||||
color: #b6b6b6
|
||||
font-size: 12px
|
||||
color: #b6b6b6
|
||||
font-size: 12px
|
||||
|
||||
@media (max-width: 1100px)
|
||||
.sidebar .sidebar-inner
|
||||
padding: 35px 20px 0
|
||||
.sidebar
|
||||
lost-column: 2/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 35px 20px 0
|
||||
.sidebar
|
||||
lost-column: 2/4
|
||||
|
||||
@media (max-width: 900px)
|
||||
.sidebar
|
||||
lost-column: 5/12
|
||||
.sidebar .sidebar-inner
|
||||
padding: 30px 20px 0
|
||||
.sidebar
|
||||
lost-column: 5/12
|
||||
.sidebar .sidebar-inner
|
||||
padding: 30px 20px 0
|
||||
|
||||
@media (max-width: 500px)
|
||||
.sidebar
|
||||
lost-column: 4/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 25px 20px 0
|
||||
.sidebar .sidebar-inner:after
|
||||
display: none
|
||||
.sidebar
|
||||
lost-column: 4/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 25px 20px 0
|
||||
.sidebar .sidebar-inner:after
|
||||
display: none
|
||||
Reference in New Issue
Block a user