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

@@ -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'>
&copy; 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'>
&copy; 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

View File

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