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

upgrade to Gatsby 0.11

Browse Source
This commit is contained in:
wpioneer
2016-06-03 02:32:38 +03:00
parent b00aff65ad
commit 05ee70daab
59 changed files with 795 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/SidebarLeft/index.jsx
View File

@@ -1,27 +1,30 @@
import React from 'react'
import { RouteHandler, Link } from 'react-router'
import { link } from 'gatsby-helpers'
import { prefixLink } from 'gatsby-helpers'
import { config } from 'config'
import BlogNav from '../BlogNav'
import BlogSocial from '../BlogSocial'
import './style.sss'
import './style.css'
class SidebarLeft extends React.Component {
render() {
const {location, children} = this.props
let header
const isHome = location.pathname === prefixLink('/')
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>
);
let header = (
<header>
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ prefixLink('/') }>
<img src='./photo.jpg' width='75' height='75' />
</Link>
{ isHome ? (
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h1>
) :
<h2><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h2> }
<p>
{ config.siteDescr }
</p>
</header>
)
return (
<div className='sidebar'>

67
components/SidebarLeft/style.css Normal file
View File

@@ -0,0 +1,67 @@
.sidebar {
lost-column: 1/3;
}
.sidebar .sidebar-inner {
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;
}
.sidebar .sidebar-inner img {
display: inline-block;
margin-bottom: 0;
border-radius: 50%;
background-clip: padding-box;
}
.sidebar .sidebar-inner h1, .sidebar .sidebar-inner h2 {
font-size: 18px;
font-weight: 500;
line-height: 18px;
margin: 20px 0 10px;
}
.sidebar .sidebar-inner p {
color: #888;
font-size: 16px;
line-height: 26px;
margin-bottom: 26px;
}
.sidebar .sidebar-inner p.copyright {
color: #b6b6b6;
font-size: 14px;
}
@media (max-width:1100px) {
.sidebar .sidebar-inner {
padding: 35px 20px 0;
}
.sidebar {
lost-column: 1/2;
}
}
@media (max-width:900px) {
.sidebar {
lost-column: 5/12;
}
.sidebar .sidebar-inner {
padding: 30px 20px 0;
}
}
@media (max-width:500px) {
.sidebar {
lost-column: 1;
}
.sidebar .sidebar-inner {
padding: 25px 20px 0;
}
.sidebar .sidebar-inner:after {
display: none;
}
}

59
components/SidebarLeft/style.sss
View File

@@ -1,59 +0,0 @@
.sidebar
lost-column: 1/3
.sidebar .sidebar-inner
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
.sidebar .sidebar-inner img
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
.sidebar .sidebar-inner p
font-size: 14px
color: #888
line-height: 23px
margin-bottom: 23px
.sidebar .sidebar-inner p.copyright
color: #b6b6b6
font-size: 12px
@media (max-width: 1100px)
.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
@media (max-width: 500px)
.sidebar
lost-column: 4/4
.sidebar .sidebar-inner
padding: 25px 20px 0
.sidebar .sidebar-inner:after
display: none