From 220f8b6910c52682f93eeeb7e55d864e82d76ad2 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sat, 9 Mar 2019 12:17:23 +0100
Subject: [PATCH] add volunteer section, responsive news grid

---
 src/css/base.scss           |  1 +
 src/css/blog.scss           | 24 ++++++++++++++++++++++++
 src/css/events.scss         | 14 +++++++++++---
 src/css/variables.scss      |  6 ++++--
 src/templates/front-page.js |  7 ++++++-
 5 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/css/base.scss b/src/css/base.scss
index baeeb50..6f5fee2 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -19,6 +19,7 @@ body {
 
   font-family: $sans-serif;
   line-height: 1.6;
+  letter-spacing: 0.02rem;
 }
 
 main {
diff --git a/src/css/blog.scss b/src/css/blog.scss
index fdc9123..dd0f0a5 100644
--- a/src/css/blog.scss
+++ b/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 {
diff --git a/src/css/events.scss b/src/css/events.scss
index 27f35ec..b5427d8 100644
--- a/src/css/events.scss
+++ b/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;
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 4c447d7..6891be4 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -22,5 +22,7 @@ $width-m: 28rem;
 $width-l: 48rem;
 $width-xl: 52rem;
 
-$media-s: 700px;
-$media-m: 900px;
\ No newline at end of file
+$media-s: 600px;
+$media-m: 900px;
+$media-l: 1200px;
+$media-xl: 1600px;
\ No newline at end of file
diff --git a/src/templates/front-page.js b/src/templates/front-page.js
index 0e51191..0c31fec 100644
--- a/src/templates/front-page.js
+++ b/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>
     )