mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-07-26 20:22:32 +02:00
upgrade to Gatsby 0.11
This commit is contained in:
wpioneer
@@ -1 +0,0 @@
|
||||
import './style.sss'
|
||||
@@ -1,24 +0,0 @@
|
||||
.wrapper
|
||||
lost-center: 1070px
|
||||
.content
|
||||
lost-column: 2/3
|
||||
.main-inner
|
||||
padding: 40px 35px
|
||||
|
||||
@media screen and (max-width: 1100px)
|
||||
.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
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
.content
|
||||
lost-column: 4/4
|
||||
.main-inner
|
||||
padding: 25px 20px
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
|
||||
import './style.sss'
|
||||
import './style.css'
|
||||
|
||||
class BlogNav extends React.Component {
|
||||
render() {
|
||||
@@ -11,15 +11,15 @@ class BlogNav extends React.Component {
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
|
||||
<Link to="/" className={ location.pathname === prefixLink('/') ? "current" : null }> Articles
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className={ location.pathname === link('/about') ? "current" : null }> About me
|
||||
<Link to="/about" className={ location.pathname === prefixLink('/about') ? "current" : null }> About me
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
|
||||
<Link to="/contact" className={ location.pathname === prefixLink('/contact') ? "current" : null }> Contact me
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
24
components/BlogNav/style.css
Normal file
24
components/BlogNav/style.css
Normal file
@@ -0,0 +1,24 @@
|
||||
.blog-nav {
|
||||
margin: 20px 0px 10px;
|
||||
}
|
||||
.blog-nav ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.blog-nav ul li {
|
||||
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;
|
||||
}
|
||||
.blog-nav ul li a.current {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-nav ul li a:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
.blog-nav
|
||||
margin: 20px 0px 10px
|
||||
|
||||
.blog-nav ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
|
||||
.blog-nav ul li
|
||||
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
|
||||
|
||||
.blog-nav ul li a.current
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-nav ul li a:hover
|
||||
border-bottom: 1px solid
|
||||
@@ -1,13 +1,13 @@
|
||||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import SidebarLeft from '../SidebarLeft'
|
||||
import access from 'safe-access'
|
||||
import { config } from 'config'
|
||||
|
||||
import './style.sss';
|
||||
import './style.css';
|
||||
|
||||
class BlogPage extends React.Component {
|
||||
render() {
|
||||
|
||||
17
components/BlogPage/style.css
Normal file
17
components/BlogPage/style.css
Normal file
@@ -0,0 +1,17 @@
|
||||
.blog-page {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.blog-page h1 {
|
||||
font-size: responsive 20px 36px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.blog-page p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.blog-single .text, .blog-single .footer {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
.blog-page
|
||||
margin-bottom: 40px
|
||||
|
||||
.blog-page h1
|
||||
font-size: responsive 20px 36px
|
||||
margin-top: 0
|
||||
|
||||
.blog-page p
|
||||
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
|
||||
@@ -2,13 +2,11 @@ import React from 'react'
|
||||
import moment from 'moment'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import access from 'safe-access'
|
||||
import ReadNext from '../ReadNext'
|
||||
import { config } from 'config'
|
||||
|
||||
import './style.sss'
|
||||
|
||||
import ReadNext from '../ReadNext'
|
||||
import './style.css'
|
||||
import '../../static/css/highlight.css'
|
||||
|
||||
class BlogPost extends React.Component {
|
||||
@@ -17,7 +15,7 @@ class BlogPost extends React.Component {
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<div>
|
||||
<Link className='gohome' to={ link('/') }> All Articles
|
||||
<Link className='gohome' to={ prefixLink('/') }> All Articles
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
@@ -39,7 +37,7 @@ class BlogPost extends React.Component {
|
||||
<p>
|
||||
{ config.siteDescr }
|
||||
<a href={ config.twitter }>
|
||||
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
|
||||
<br></br> <strong>{ config.siteAuthor }</strong> on Twitter</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
105
components/BlogPost/style.css
Normal file
105
components/BlogPost/style.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.blog-post {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.blog-post:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-post h2 {
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-post h2 a:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-post p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.blog-post time {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-post .blog-category {
|
||||
font-size: 14px;
|
||||
color: #f7a046;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-post .readmore {
|
||||
font-size: 16px;
|
||||
color: #5d93ff;
|
||||
}
|
||||
.blog-post .readmore:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-single {
|
||||
max-width: 945px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.blog-single h1 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.blog-single .text {
|
||||
line-height: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.blog-single h1, .blog-single .date-published, .blog-single .text *:not(div) {
|
||||
max-width: 630px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.blog-single .text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.blog-single .footer {
|
||||
max-width: 630px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.gohome {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 8px 16px;
|
||||
color: #999;
|
||||
background: #f4f4f4;
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.gohome:focus {
|
||||
color: #444;
|
||||
background: #f4f4f4;
|
||||
border: 0;
|
||||
}
|
||||
.gohome:hover {
|
||||
color: #444;
|
||||
background: #f4f4f4;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.blog-single h1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blog-single .text, .blog-single .footer {
|
||||
padding: 0 15px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.gohome {
|
||||
position: static;
|
||||
margin: 20px auto 0;
|
||||
text-align: center;
|
||||
width: 85px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
.blog-post
|
||||
margin-bottom: 30px
|
||||
|
||||
.blog-post:last-child
|
||||
margin-bottom: 10px
|
||||
|
||||
.blog-post h2
|
||||
margin-top: 10px
|
||||
line-height: 30px
|
||||
margin-bottom: 20px
|
||||
|
||||
.blog-post h2 a:hover
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-post p
|
||||
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
|
||||
|
||||
.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
|
||||
|
||||
.blog-post .readmore
|
||||
font-size: 16px
|
||||
color: #5d93ff
|
||||
font-weight: 600
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .readmore:hover
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-single h1
|
||||
text-align: center
|
||||
margin-top: 30px
|
||||
|
||||
.blog-single .text
|
||||
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
|
||||
|
||||
.blog-single .text img
|
||||
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
|
||||
|
||||
.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
|
||||
|
||||
.gohome:hover
|
||||
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
|
||||
@@ -1,45 +1,38 @@
|
||||
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 './style.sss'
|
||||
import './style.css'
|
||||
import '../../static/fonts/fontawesome/style.css'
|
||||
|
||||
class BlogSocial extends React.Component {
|
||||
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
|
||||
|
||||
return (
|
||||
<div className='blog-social'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ twitter }><i className='fa fa-twitter'></i></a>
|
||||
<a href={ config.siteTwitterUrl }><i className='fa fa-twitter'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ github }><i className='fa fa-github-alt'></i></a>
|
||||
<a href={ config.siteGithubUrl }><i className='fa fa-github-alt'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ vk }><i className='fa fa-vk'></i></a>
|
||||
<a href={ config.siteVkUrl }><i className='fa fa-vk'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ email }><i className='fa fa-envelope-o'></i></a>
|
||||
<a href={ config.siteEmailUrl }><i className='fa fa-envelope-o'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ telegram }><i className='fa fa-paper-plane'></i></a>
|
||||
<a href={ config.siteTelegramUrl }><i className='fa fa-paper-plane'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ rss }><i className='fa fa-rss'></i></a>
|
||||
<a href={ config.siteRssUrl }><i className='fa fa-rss'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
32
components/BlogSocial/style.css
Normal file
32
components/BlogSocial/style.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.blog-social {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.blog-social ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
clear: fix-legacy;
|
||||
}
|
||||
.blog-social ul > li {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 3px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.blog-social ul > li:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.blog-social ul > li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.blog-social ul > li > a > i {
|
||||
color: #606060;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.blog-social ul > li:hover a > i {
|
||||
color: #444;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
.blog-social
|
||||
margin-top: 30px
|
||||
|
||||
.blog-social ul
|
||||
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
|
||||
|
||||
.blog-social ul > li:hover
|
||||
background: #f4efe8
|
||||
|
||||
.blog-social ul > li > a
|
||||
border-bottom: 0
|
||||
line-height: 21px
|
||||
cursor: pointer
|
||||
|
||||
.blog-social ul > li > a > i
|
||||
color: #333
|
||||
font-size: 14px
|
||||
line-height: 21px
|
||||
|
||||
.blog-social ul > li:hover a > i
|
||||
color: #222
|
||||
@@ -3,7 +3,7 @@ import { Link } from 'react-router'
|
||||
import { prune, include as includes } from 'underscore.string'
|
||||
import find from 'lodash/find'
|
||||
|
||||
import './style.sss'
|
||||
import './style.css'
|
||||
|
||||
class ReadNext extends React.Component {
|
||||
render() {
|
||||
|
||||
4
components/ReadNext/style.css
Normal file
4
components/ReadNext/style.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.description {
|
||||
font-size: responsive 12px 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.description
|
||||
font-size: responsive 12px 14px
|
||||
line-height: 1.6
|
||||
@@ -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
67
components/SidebarLeft/style.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user