From 8da2fee506fe421beaea076b41fc057d57fdf337 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Wed, 30 Jan 2019 13:52:26 +0100
Subject: [PATCH] style blog posts and grid

---
 src/components/PostList.js | 4 ++--
 src/css/base.scss          | 9 ++++++++-
 src/css/blog.scss          | 5 ++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/PostList.js b/src/components/PostList.js
index 80eb543..4b44856 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -7,8 +7,8 @@ export default class IndexPage extends React.Component {
     const { posts, title } = this.props
 
     return (
-      <section>
-        <h1>{title}</h1>
+      <section class="blog">
+        <h1 class="section-title">{title}</h1>
         <div className="post-list">
           {posts.map(({ node: post }) => (
             <div
diff --git a/src/css/base.scss b/src/css/base.scss
index a38f8ba..4488ccd 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -28,11 +28,14 @@ body {
 }
 
 main {
-  padding: 2rem 2rem 6rem;
   background: $color-white;
   color: $color-black;
 }
 
+section {
+  padding: 2rem 2rem 6rem;
+}
+
 a {
   color: $color-link;
   transition: all .2s ease-in-out;
@@ -66,4 +69,8 @@ h3 {
 
 img {
   max-width: 100%;
+}
+
+.section-title {
+  margin-bottom: 1.6rem;
 }
\ No newline at end of file
diff --git a/src/css/blog.scss b/src/css/blog.scss
index 17deca2..b3b611e 100644
--- a/src/css/blog.scss
+++ b/src/css/blog.scss
@@ -1,3 +1,7 @@
+.blog {
+  background: $color-yellow;
+}
+
 .post-list {
   display: flex;
   flex-wrap: wrap;
@@ -12,7 +16,6 @@
   color: $color-black;
 
   box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.3);
-  border: 0.16rem solid $color-black;
 
   &-title {
     display: block;