added eo-events to loop-index

loop-index.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * The loop that displays events on the index page.
+ *
+ * @package WordPress
+ * @subpackage UNHYPED
+ */
+
+$events = eo_get_events();
+
+if( $events ) :
+  $return= '<ul class="eo-events">';
+  foreach ($events as $event):
+    //Check if all day, set format accordingly
+    if($event->event_allday) :
+      $format = get_option('date_format');
+    else :
+      $format = get_option('date_format').'  '.get_option('time_format');
+    endif;
+
+    $return .= '<li id="eo-event-'.$event->ID.'" class="eo-event"><a title="'.$event->post_title.'" href="'.get_permalink($event->ID).'"><figure class="eo-event-thumbnail">'.get_the_post_thumbnail($event->ID).'</figure><span class="eo-event-title">'.$event->post_title.'</span></a> on '.eo_format_date($event->StartDate.' '.$event->StartTime, $format).'</li>';
+  endforeach;
+
+  $return.='</ul>';
+  echo $return;
+endif;
+
+echo '<!--';
+print_r($events);
+echo '-->';
+
+?>

sass/modules/_eo-event.scss

@@ -0,0 +1,13 @@
+
+.eo-events {
+  @include unstyled-list;
+}
+
+.eo-event {
+  .eo-event-thumbnail {
+    img {
+      height: auto;
+      max-width: 100%;
+    }
+  }
+}

sass/partials/_base.scss

@@ -10,6 +10,7 @@ $xlarge-font-size                 : 1.625em;    // ~26px
 $xxlarge-font-size                : 2.125em;    // ~34px
 
 $bg-color                         : #eee;
+$line-color                       : #ccc;
 $text-color                       : #444;
 $link-color                       : #f03;
 

sass/partials/_media.scss

@@ -5,3 +5,12 @@
 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
 }
 
+
+/**
+ * Widescreen display
+ */
+@media all and ( min-width: 1248px ) {
+  #container {
+    width: 1218px;
+  }
+}

sass/partials/_page.scss

@@ -1,4 +1,7 @@
 
+$debug: false;
+
+
 body {
   background-color: $bg-color;
   color: $text-color;
@@ -13,13 +16,42 @@ a {
 #container {
   @include box-sizing( border-box );
   @include clearfix;
-  margin: $base-vmargin auto;
+  margin: 0 auto;
   padding: $base-vmargin $base-hmargin;
   width: 978px;
 }
 
 #header {
   @include clearfix;
-  margin-bottom: 2 * $base-hmargin;
+  border-bottom: 1px solid $line-color;
+  margin-bottom: $base-hmargin;
+  padding-bottom: $base-hmargin;
+  .site-title {
+    @include replace-linked-text( 'unhyped-logo.png', false, true );
+    float: left;
+    margin-right: $base-hmargin;
+    padding-top: .25em;
+  }
+  .site-description {
+    font-size: $small-font-size;
+    float: left;
+    width: 20em;
+  }
+}
+
+// Debug colors
+@if ( $debug ) {
+  #container {
+    background-color: rgba( gray, .1 );
+  }
+  #header {
+    background-color: rgba( purple, .1 );
+  }
+  #access {
+    background-color: rgba( red, .1 );
+  }
+  #main {
+    background-color: rgba( green, .1 );
+  }
 }
 

sass/style.scss

@@ -26,5 +26,8 @@ Template:     synack-wpbp
 // Page
 @import "partials/page";
 
+// Modules
+@import "modules/eo-event";
+
 // Media queries
 @import "partials/media";