mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-08-11 03:40:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

71
components/BlogPost/index.jsx
View File

@@ -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

146
components/BlogPost/style.sss
View File

@@ -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