style blog posts and grid

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

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;
 }

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;