Commit ca348949 authored by Alex Turner's avatar Alex Turner

Further author styling

parent 9e27169b
Pipeline #17642 passed with stage
in 17 seconds
import styled from 'styled-components';
const AuthorStyled = styled.div`
display: block;
.author {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.author__name {
margin: 0;
line-height: 16px;
}
span {
font-style: normal;
font-weight: normal;
font-size: 16px;
color: #777777;
}
img {
margin-right: 20px;
width: 80px;
border-radius: 80px;
}
`;
export default AuthorStyled;
import React from 'react';
import PropTypes from 'prop-types';
import AuthorStyled from '../components.styled/Author.styled';
import Image from '~/features/image/components/Image';
const Author = ({ name, bio }) => {
const Author = ({ name, bio, image }) => {
return (
<div>
By {name}
<p>{bio}</p>
</div>
<AuthorStyled>
<div className="author">
{image && <Image image={image} />}
<p className="author__name">By {name}</p>
</div>
<p className="author__bio">{bio}</p>
</AuthorStyled>
);
};
......
......@@ -10,7 +10,7 @@ import styled from 'styled-components';
const ArticleContainer = styled.div`
display: flex;
justify-content: space-between;
max-width: 1200px;
max-width: 1100px;
width: 100%;
margin: auto;
`;
......@@ -25,7 +25,8 @@ const ArticleContent = styled.article`
`;
// TODO: Extract into separate component
const ArticleSidebar = styled.aside`
padding: 20px;
max-width: 250px;
width: 100%;
`;
const BlogPost = ({ entry }) => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment