back to the futura 🚀 and grid adjustments

src/css/base.scss

@@ -5,7 +5,7 @@
 }
 
 html {
-	font-size: calc(13px + 6 * ((100vw - 320px) / 1200));
+	font-size: calc(16px + 6 * ((100vw - 320px) / 1200));
   height: 100%;
   background: $color-background;
 }
@@ -16,26 +16,6 @@ body {
   padding: 0;
   background: $color-background;
   color: $color-text;
-/*
-  border-left: 1rem solid $color-black;
-  border-right: 1rem solid $color-black;
-  &:after {
-    content: " ";
-    display: block;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background: $color-black;
-    height: 1rem;
-  }*/
-
-  @media (max-width: $media-s) {
-    border: none;
-    &:after {
-      display: none;
-    }
-  }
 
   font-family: $sans-serif;
   line-height: 1.6;

src/css/blog.scss

@@ -1,6 +1,6 @@
 .blog {
-  background: $color-black;
-  color: $color-white;
+  background: $color-yellow;
+  color: $color-black;
   padding-bottom: 1rem;
 }
 
@@ -11,27 +11,27 @@
 }
 
 .post {
-  width: $width-xs;
-  margin: 0 1rem 1.3rem 0;
+  width: 31.333333%;
+  margin: 0 1% 1rem 1%;
   position: relative;
   text-decoration: none;
 
-  background: $color-yellow;
-  color: $color-black;
+  background: $color-black;
+  color: $color-white;
   box-shadow: 
-    0 0 0 0.3rem $color-black,
-    0 0 0 0.35rem $color-black;
+    0 0 0 0.3rem $color-yellow,
+    0 0 0 0.35rem $color-yellow;
   transition: box-shadow .1s ease-in-out;
 
   &:hover {
-    color: $color-black;
+    color: $color-white;
     box-shadow: 
-      0 0 0 0.3rem $color-black,
-      0 0 0 0.35rem $color-yellow;
+      0 0 0 0.3rem $color-yellow,
+      0 0 0 0.35rem $color-black;
   }
 
   &-text {
-    padding: 0.4rem 1rem 1.4rem;
+    padding: 1.4rem 1.6rem 2rem;
 
     p {
       margin-bottom: 0;

src/css/events.scss

@@ -3,26 +3,67 @@
   color: $color-white;
 }
 
+.event-group-header {
+  color: $color-orange;
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: 1.3rem;
+  line-height: 1.2;
+  letter-spacing: 0.05em;
+  margin: 0 0 1rem;
+}
+
 .event-grouped-by-day {
-  width: $width-m;
-  max-width: 100%;
+  display: inline-block;
+  width: 31.333333%;
+  margin: 0 1% 1rem 1%;
+
+  .event-types, .event-date {
+    display: none;
+  }
+}
+
+.event-grouped-by-month {
+  width: 100%;
+  display: flex;
   margin: 0 auto 4rem;
+
+  .event-group-header {
+    font-size: 1.6rem;
+    width: 20%;
+  }
+
+  .event-list {
+    width: 80%;
+  }
+
+  .event {
+    width: 50%;
+  }
+
+  .event-title {
+    font-size: 1.6rem;
+  }
+
+  .event-date {
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
 }
 
 .event-list {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: left;
 }
 
 .event {
-  width: $width-s;
-  max-width: 100%;
-  margin: 0 2rem 1.2rem;
+  width: 100%;
+  margin: 0 0 1.2rem 0;
   position: relative;
-
-  padding-top: 2rem;
-  border-top: 1px solid $color-white;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid $color-white;
 
   text-decoration: none;
 
@@ -101,8 +142,6 @@
 }
 
 .event-types {
-  position: absolute;
-  top: 0.2rem;
   ul {
     list-style: none;
     margin: 0;
@@ -124,7 +163,7 @@
     line-height: 1;
     text-transform: uppercase;
     font-weight: 600;
-    letter-spacing: 0.05rem;
+    letter-spacing: 0.05em;
     font-size: $font-xs;
     
   }
@@ -191,7 +230,7 @@
 
   .event-date {
     text-transform: uppercase;
-    letter-spacing: 0.1rem;
+    letter-spacing: 0.1em;
   }
 
   .ticket-url {

src/css/fonts.scss

@@ -1,3 +1,4 @@
+@import url("https://use.typekit.net/oze0djq.css");
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,900,900i');
 
-$sans-serif: "Avenir Next", "Avenir", "Montserrat", helvetica, arial, sans-serif;
+$sans-serif: "futura-pt", "Montserrat", helvetica, arial, sans-serif;

src/css/footer.scss

@@ -39,6 +39,8 @@
 
 .hours {
   font-size: 2rem;
+  background: $color-red;
+  width: 100%;
 }
 
 .meta {

src/templates/event-program.js

@@ -11,7 +11,7 @@ export default class EventProgram extends React.Component {
 
     return (
       <Layout>
-        <EventList events={events} title="Program" groupBy="month" />
+        <EventList events={events} title="Dette skjer" groupBy="month" />
       </Layout>
     )
   }

src/templates/front-page.js

@@ -14,6 +14,7 @@ export default class IndexPage extends React.Component {
     return (
       <Layout>
         <EventList events={events} numDays={7} groupBy="day" />
+        <div className="volunteer">Bli frivillig!</div>
         <PostList posts={posts} title="Aktuelt" />
       </Layout>
     )