Add events page

_data/events.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "Queer Code Pride Edition",
+    "location": "Makers Academy 50-52 Commercial St, E1 6LT · London",
+    "description": "This month we have two wonderful speakers to help us celebrate Pride! We'll be providing food before the talks, and there will be time to hang out and relax afterwards with your fellow queer coders.",
+    "datetime": "2019-08-04T18:00:00Z",
+    "url": "https://www.meetup.com/Queer-Code-London/events/262452231/",
+    "hostGroup": "London"
+  },
+  {
+    "name": "Breakfast & Catch-up",
+    "datetime": "2019-07-25T08:00:00Z",
+    "location": "The Warehouse, 211 Old Street, 2nd Floor, London EC1V 9NR",
+    "description": "Socialise and chat over a free-of-charge buffet breakfast. You can arrive and leave any time between 8am and 9:30am, and a hot and cold buffet breakfast will be available throughout the entire time of the event. We will be seated at the far end of the room (look to your left after signing in at reception), near the space where the food is laid out.",
+    "hostGroup": "London",
+    "url": "https://www.meetup.com/Queer-Code-London/events/262381953/"
+  }
+]

_includes/header.html

@@ -46,13 +46,24 @@
 
       <div class="navbar-menu is-active" id="navMenu">
         <div class="navbar-end">
-          <a class="navbar-item" href="/">
+          <a class="navbar-item
+              {% if page.url == "/" %}is-active{% endif %}
+            " href="/">
             Home
           </a>
-          <a class="navbar-item" href="mission">
+          <a class="navbar-item
+              {% if page.url == "/events.html" %}is-active{% endif %}
+            " href="/events">
+           Events
+          </a>
+          <a class="navbar-item
+              {% if page.url == "/mission.html" %}is-active{% endif %}
+            " href="mission">
             Mission
           </a>
-          <a class="navbar-item" href="coc">
+          <a class="navbar-item
+              {% if page.url == "/coc.html" %}is-active{% endif %}
+            " href="coc">
             Code of Conduct
           </a>
           <span class="navbar-item navbar-item--slack">

css/styles.scss

@@ -37,7 +37,7 @@ Bulma code with equivilant custom code.
 
 // elements
 
-// @import "bulma/elements/box";
+@import "bulma/elements/box";
 @import "bulma/elements/button";
 @import "queercode/elements/button";
 @import "bulma/elements/container";

events.html

@@ -0,0 +1,36 @@
+---
+title: Events
+layout: default
+---
+
+<div class="columns is-centered">
+<div class="column is-half">
+<h1 class="title is-1">Events</h1>
+{% for event in site.data.events %}
+  <div class="box content">
+    <p>
+    <strong class="is-size-4">{{ event.name }}</strong><small>,
+      {%- if event.datetime %}
+        {{ event.datetime | date_to_long_string }}
+        {{ event.datetime | date: "%I:%M%P" }}
+      {%- else %}
+       date <abbr title="To be confirmed">TBC</abbr>
+      {%- endif %}, {{event.hostGroup}}
+    </small>
+      <br>
+      {% if event.description %}
+          {{ event.description }}
+          {% if event.url %}
+          <div class="is-pulled-right"><a href="{{event.url}}">Find out more</a></div>
+          {% endif %}
+      {% else %}
+        {% if event.url %}
+          <a href="{{event.url}}">Find out more</a>
+        {% endif %}
+      {% endif %}
+    </p>
+  </div>
+{% endfor %}
+<p></p>
+</div>
+</div>