Merge pull request #24 from 040code/layout

JeroenKnoops · web-flow · commit b51c7418630c · 2019-04-23T22:11:58.000+02:00
Some layouting
diff --git a/src/components/PostsListItem.js b/src/components/PostsListItem.js
@@ -9,6 +9,7 @@ import styled from 'styled-components'
 const Post = styled.article`
   border-bottom: 1px solid rgba(214, 209, 230, 0.5);
   padding-bottom: 1.25rem;
+  margin-bottom: 2rem;
 `
 
 const ReadPost = styled(Link)`
@@ -37,7 +38,7 @@ const PostDate = styled.time`
 `
 
 const PostHeader = styled.header`
-  padding: 1em 0;
+  padding: 0em 0;
 `
 
 const Excerpt = styled.p`
@@ -46,12 +47,18 @@ const Excerpt = styled.p`
 `
 
 const PostTitleLink = styled(Link)`
+  font-size: 1.6rem;  
+  font-weight: bold;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   &:hover {
     border-bottom: 1px dotted rgba(34, 34, 34, 0.8);
   }
 `
 const PostSubTitle = styled.p`
-  padding: 1em 0;
+  padding: 0.8rem 0;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: italic;
+  font-size: 1.2rem;  
 `
 
 class PostsListItem extends React.Component {
@@ -75,10 +82,11 @@ class PostsListItem extends React.Component {
           <TagList tags={tags} icon={true} />
           <PostDate>{date}</PostDate>
           <AuthorList authors={authors} />
-          <ReadPost to={slug}>Read post &rsaquo;</ReadPost>
+          {/* <ReadPost to={slug}>Read post &rsaquo;</ReadPost> */}
         </footer>
       </Post>
     )
   }
 }
 export default PostsListItem
+
diff --git a/src/components/TagList.js b/src/components/TagList.js
@@ -36,7 +36,7 @@ class TagList extends React.Component {
 
     return (
       <ListContainer>
-        {icon === true && <Fragment>&#127991; </Fragment>}
+        {icon === true}
         {tags.map((tag, i) => {
           return (
             <Fragment key={`tag-list-${i}`}>

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ import styled from 'styled-components'`
`9`	`9`	const Post = styled.article`
`10`	`10`	`border-bottom: 1px solid rgba(214, 209, 230, 0.5);`
`11`	`11`	`padding-bottom: 1.25rem;`
	`12`	`+ margin-bottom: 2rem;`
`12`	`13`	`
`13`	`14`
`14`	`15`	const ReadPost = styled(Link)`
@@ -37,7 +38,7 @@ const PostDate = styled.time`
`37`	`38`	`
`38`	`39`
`39`	`40`	const PostHeader = styled.header`
`40`		`- padding: 1em 0;`
	`41`	`+ padding: 0em 0;`
`41`	`42`	`
`42`	`43`
`43`	`44`	const Excerpt = styled.p`
@@ -46,12 +47,18 @@ const Excerpt = styled.p`
`46`	`47`	`
`47`	`48`
`48`	`49`	const PostTitleLink = styled(Link)`
	`50`	`+ font-size: 1.6rem;`
	`51`	`+ font-weight: bold;`
	`52`	`+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;`
`49`	`53`	`&:hover {`
`50`	`54`	`border-bottom: 1px dotted rgba(34, 34, 34, 0.8);`
`51`	`55`	`}`
`52`	`56`	`
`53`	`57`	const PostSubTitle = styled.p`
`54`		`- padding: 1em 0;`
	`58`	`+ padding: 0.8rem 0;`
	`59`	`+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;`
	`60`	`+ font-style: italic;`
	`61`	`+ font-size: 1.2rem;`
`55`	`62`	`
`56`	`63`
`57`	`64`	`class PostsListItem extends React.Component {`
`@@ -75,10 +82,11 @@ class PostsListItem extends React.Component {`
`75`	`82`	`<TagList tags={tags} icon={true} />`
`76`	`83`	`<PostDate>{date}</PostDate>`
`77`	`84`	`<AuthorList authors={authors} />`
`78`		`- <ReadPost to={slug}>Read post ›</ReadPost>`
	`85`	`+ {/* <ReadPost to={slug}>Read post ›</ReadPost> */}`
`79`	`86`	`</footer>`
`80`	`87`	`</Post>`
`81`	`88`	`)`
`82`	`89`	`}`
`83`	`90`	`}`
`84`	`91`	`export default PostsListItem`
	`92`	`+`