Created event_layout.html - layout for event view in events page.

Removed comments from events_array_generator.html.
Basic layout for events page with loops in place now.
Style classes for events page added.

Author: Tomasz-Kluczkowski

_includes/event_layout.html

@@ -0,0 +1,8 @@
+<div class="events-page__event-container">
+    <div class="row">
+        <div class="col-12">
+            <img class="events-page__event-img" src="{{ site.basurl }}/{{ include.post.image }}">
+            <h2 class="events-page__event-title">{{ include.post.title }}</h2>
+        </div>
+    </div>
+</div>

_includes/events_array_generator.html

@@ -27,12 +27,10 @@
 {% for post in site.posts %}
     {% assign postStartDate = post.date | date: "%s" %}
     {% if future_events %}
-<!--Add only future post-->
         {% if postStartDate >= curDate %}
             {% assign posts = posts | push: post %}
             {% assign post_count = post_count | plus: 1 %}
         {% endif %}
-<!--Add only past post-->
     {% else %}
         {% if postStartDate < curDate %}
             {% assign posts = posts | push: post %}

_pages/03_events.html

@@ -28,25 +28,25 @@ <h2 class="events-page__page-subtitle">See what's coming up and what we did rece
         </div>
     </div>
 
-    <div class="container">
+    <div class="events-page__outer-container container-fluid">
         <div class="row">
             <div class="col-12">
-                <h2 class="events-page__upcoming-title">Upcoming Events</h2>
+                <h2 class="events-page__upcoming-section-title">Upcoming Events</h2>
                 {% include events_array_generator.html future_events = true %}
                 {% for post in posts %}
-                    <p>{{ post.title }}</p>
+                    {% include event_layout.html post = post %}
                 {% endfor %}
             </div>
         </div>
     </div>
 
-    <div class="container">
+    <div class="events-page__outer-container container-fluid">
         <div class="row">
             <div class="col-12">
-                <h2 class="events-page__recent-title">Recent Events</h2>
+                <h2 class="events-page__recent-section-title">Recent Events</h2>
                 {% include events_array_generator.html %}
                 {% for post in posts %}
-                    <p>{{ post.title }}</p>
+                    {% include event_layout.html post = post %}
                 {% endfor %}
             </div>
         </div>

_sass/base.scss

@@ -55,3 +55,5 @@ $footer-title: #F0F8FF;
 $footer-background: #072948;
 
 $form-label-text: #FAEBD7;
+
+$event-background: rgba(7, 41, 72, 0.95);

_sass/events.scss

@@ -14,10 +14,36 @@
   @extend .page-subtitle
 }
 
-.events-page__upcoming-title {
+.events-page__upcoming-section-title {
   @extend .section-title;
 }
 
-.events-page__recent-title {
+.events-page__recent-section-title {
   @extend .section-title;
-}
+}
+
+.events-page__outer-container {
+  max-width: 80vw;
+}
+
+.events-page__event-container {
+  background: $event-background;
+  min-height: 30vh;
+  margin-top: 2.5%;
+  margin-bottom: 2.5%;
+  border-radius: 5px;
+}
+
+.events-page__event-img {
+  float: left;
+  max-width: 30%;
+  padding: 1%;
+
+}
+
+.events-page__event-title {
+  @extend .title-light;
+  font-size: 1.5em;
+  padding: 1%;
+
+}