add volunteer section, responsive news grid

src/css/base.scss

@@ -19,6 +19,7 @@ body {
 
   font-family: $sans-serif;
   line-height: 1.6;
+  letter-spacing: 0.02rem;
 }
 
 main {

src/css/blog.scss

@@ -84,6 +84,30 @@
       margin-top: 3.6rem;
     }
   }
+
+  &:last-of-type {
+    display: none;
+  }
+
+  @media (max-width: $media-m) {
+    width: 48%;
+    &:nth-of-type(3) {
+      display: none;
+    }
+  }
+
+  @media (max-width: $media-s) {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  @media (min-width: $media-xl) {
+    width: 23%;
+    &:last-of-type {
+      display: block;
+    }
+  }
 }
 
 .post-hero {

src/css/events.scss

@@ -10,7 +10,7 @@
   font-size: 1.3rem;
   line-height: 1.2;
   letter-spacing: 0.05em;
-  margin: 0 0 1rem;
+  margin: 0 0 1.2rem;
 }
 
 .event-grouped-by-day {
@@ -38,7 +38,11 @@
   }
 
   .event {
-    width: 50%;
+    width: 48%;
+    margin: 0 0 1.2rem 2%;
+    &:nth-child(odd) {
+      margin: 0 2% 1.2rem 0;
+    }
   }
 
   .event-title {
@@ -50,6 +54,10 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
+
+  .event-types {
+    display: none;
+  }
 }
 
 .event-list {
@@ -62,7 +70,7 @@
   width: 100%;
   margin: 0 0 1.2rem 0;
   position: relative;
-  padding-bottom: 1rem;
+  padding-bottom: 1.2rem;
   border-bottom: 1px solid $color-white;
 
   text-decoration: none;

src/css/variables.scss

@@ -22,5 +22,7 @@ $width-m: 28rem;
 $width-l: 48rem;
 $width-xl: 52rem;
 
-$media-s: 700px;
-$media-m: 900px;
+$media-s: 600px;
+$media-m: 900px;
+$media-l: 1200px;
+$media-xl: 1600px;

src/templates/front-page.js

@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
+import { Link } from 'gatsby'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 import EventList from '../components/EventList'
 
+
 export default class IndexPage extends React.Component {
   render() {
     const { data } = this.props
@@ -14,7 +16,10 @@ export default class IndexPage extends React.Component {
     return (
       <Layout>
         <EventList events={events} numDays={7} groupBy="day" />
-        <div className="volunteer">Bli frivillig!</div>
+        <section className="volunteer">
+          <Link to="/bli-aktiv/"><h1 className="section-title">Bli frivillig</h1></Link>
+          <p>Vil du være med å arrangere greier på studentersamfundet? Kom æ</p>
+        </section>
         <PostList posts={posts} title="Aktuelt" />
       </Layout>
     )