mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-08-10 11:20:34 +02:00
Update
This commit is contained in:
@@ -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