From 51a4798a0ec71711dc88cbed1e708ff60f57c26c Mon Sep 17 00:00:00 2001
From: Jeff Lucca <lucca@github.com>
Date: Tue, 12 Feb 2019 18:13:53 -0700
Subject: [PATCH 1/5] Add upcoming page

---
 _sections/upcoming.html | 147 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 _sections/upcoming.html

diff --git a/_sections/upcoming.html b/_sections/upcoming.html
new file mode 100644
index 0000000..9fd4c60
--- /dev/null
+++ b/_sections/upcoming.html
@@ -0,0 +1,147 @@
+---
+layout: base
+title: Upcoming
+description: Displays current and upcoming events, announcements
+---
+{%raw %}
+<div class="row center" id="app">
+	<div class="card accent-color white-text">
+		<div class="card-content">
+			<table class="highlight responsive-table">
+				<thead>
+					<tr>
+                                                <td>Time</td>
+						<td>Start</td>
+						<td>End</td>
+						<td>Description</td>
+						<td>Location</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for="event in day1"
+                                            v-if="schedule.timeleft(event.StartXML, event.EndXML) != 'Over'">
+                                                <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+						<td>{{event.Start}}</td>
+						<td>{{event.End}}</td>
+						<td>{{event.Description}}</td>
+						<td>{{event.Location}}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+	<div class="card accent-color white-text">
+		<div class="card-content">
+			<table class="highlight responsive-table">
+				<thead>
+					<tr>
+                                                <td>Time</td>
+						<td>Start</td>
+						<td>End</td>
+						<td>Description</td>
+						<td>Location</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr v-for="event in day2"
+                                            v-if="schedule.timeleft(event.StartXML, event.EndXML) != 'Over'">
+                                                <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+						<td>{{event.Start}}</td>
+						<td>{{event.End}}</td>
+						<td>{{event.Description}}</td>
+						<td>{{event.Location}}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>
+{%endraw %}
+<script>
+var schedule = new Vue({
+  el: '#app',
+  data: {
+    day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+        ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+        ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    now: Math.trunc((new Date()).getTime() / 1000)
+  },
+  mounted() {
+      window.setInterval(() => {
+          this.now = Math.trunc((new Date()).getTime() / 1000);
+      },1000);
+  },
+  methods: {
+      seconds: function(remaining){
+          return Math.trunc(remaining) % 60;
+      },
+      minutes: function(remaining) {
+          return Math.trunc((remaining) / 60) % 60;
+      },
+      hours: function(remaining) {
+          return Math.trunc((remaining) / 60 / 60);
+      },
+      twodigits: function(value) {
+          if (value < 0) {
+              return '00';
+          }
+          if (value.toString().length <= 1) {
+                  return `0${value}`;
+          }
+          return value;
+      },
+      timeleft: function(startTime, endTime) {
+          if (endTime === undefined || this.now > Math.trunc(Date.parse(endTime) / 1000)){
+              return "Over";
+          }
+          else if (this.now > Math.trunc(Date.parse(startTime) / 1000)){
+              return "Now";
+          }
+          remaining = Math.trunc(Date.parse(startTime) / 1000) - this.now;
+          seconds = this.twodigits(this.seconds(remaining));
+          minutes = this.twodigits(this.minutes(remaining));
+          hours = this.twodigits(this.hours(remaining));
+          return hours + ":" + minutes + ":" + seconds;
+      },
+  }
+})
+
+function formatDate(formatTime, day) {
+    if (formatTime == ""){
+        return undefined;
+    }
+    eventTime = formatTime.split(/:| /)
+    if (eventTime[2] == "PM" && eventTime[0] != "12"){
+        eventTime[0] = String(parseInt(eventTime[0]) + 12);
+    }
+    else if (eventTime[0] == "12" && eventTime[2] == "AM") { // converts 12 AM to 00
+        eventTime[0] = "00";
+    }
+    if (eventTime[0].length == 1) { // guarantees 2-digit hour
+        eventTime[0] = "0" + eventTime[0];
+    }
+    return day + "T" + eventTime[0] + ":" + eventTime[1] + ":00-0700";
+}
+
+function refresh() {
+    $.get('https://api.hackcu.org/sheets/events.json').success(function(data){
+        schedule.day1 = data.day1;
+        for (x in schedule.day1){
+            // Date Format: YYYY-MM-DD
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-12");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-12");
+        }
+        schedule.day2 = data.day2;
+        for (x in schedule.day2){
+            // Date Format: YYYY-MM-DD
+            schedule.day2[x].StartXML = formatDate(schedule.day2[x].Start, "2019-02-24");
+            schedule.day2[x].EndXML = formatDate(schedule.day2[x].End, "2019-02-24");
+        }
+    });
+}
+
+refresh();
+setInterval(refresh, 2*60000);
+
+</script>

From ff00edd66660310295afadf89b386ab431e44e33 Mon Sep 17 00:00:00 2001
From: Jeff Lucca <itachi3650@gmail.com>
Date: Tue, 12 Feb 2019 18:16:23 -0700
Subject: [PATCH 2/5] testo

---
 _sections/upcoming.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_sections/upcoming.html b/_sections/upcoming.html
index 9fd4c60..e3b2c01 100644
--- a/_sections/upcoming.html
+++ b/_sections/upcoming.html
@@ -62,9 +62,9 @@
   el: '#app',
   data: {
     day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
-        ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
     day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
-        ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
     now: Math.trunc((new Date()).getTime() / 1000)
   },
   mounted() {

From aeabdd619d55d4317e1c37b4d7564e7cbfa86112 Mon Sep 17 00:00:00 2001
From: Jeff Lucca <itachi3650@gmail.com>
Date: Tue, 12 Feb 2019 18:24:55 -0700
Subject: [PATCH 3/5] set date back to normal

---
 _sections/upcoming.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_sections/upcoming.html b/_sections/upcoming.html
index e3b2c01..24b7abe 100644
--- a/_sections/upcoming.html
+++ b/_sections/upcoming.html
@@ -129,8 +129,8 @@
         schedule.day1 = data.day1;
         for (x in schedule.day1){
             // Date Format: YYYY-MM-DD
-            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-12");
-            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-12");
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-24");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-24");
         }
         schedule.day2 = data.day2;
         for (x in schedule.day2){

From 2560b4884b3a998e740a74f1fc2d2e7cc647f6ad Mon Sep 17 00:00:00 2001
From: Jeff Lucca <itachi3650@gmail.com>
Date: Wed, 13 Feb 2019 03:22:15 -0700
Subject: [PATCH 4/5] Redesign upcoming page

---
 _sections/upcomingold.html | 145 +++++++++++++++++++++++++++++++++++++
 assets/css/upcoming.scss   | 134 ++++++++++++++++++++++++++++++++++
 2 files changed, 279 insertions(+)
 create mode 100644 _sections/upcomingold.html
 create mode 100644 assets/css/upcoming.scss

diff --git a/_sections/upcomingold.html b/_sections/upcomingold.html
new file mode 100644
index 0000000..4465a84
--- /dev/null
+++ b/_sections/upcomingold.html
@@ -0,0 +1,145 @@
+---
+layout: base
+title: Upcoming
+description: Displays current and upcoming events, announcements
+---
+{%raw %}
+<div class="row center" id="app">
+	<div class="card accent-color white-text">
+        <div class="card-content">
+                <table class="highlight responsive-table">
+                        <thead>
+                                <tr>
+                                        <td>Start</td>
+                                        <td>End</td>
+                                        <td>Event</td>
+                                        <td>Location</td>
+                                </tr>
+                        </thead>
+                        <tbody class="currevent">
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td style="font-weight:bold">{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+                <table class="nextevent highlight responsive-table dog">
+                        <tbody>
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+        </div>
+        </div>
+</div>
+{%endraw %}
+<script>
+var schedule = new Vue({
+  el: '#app',
+  data: {
+    day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    now: Math.trunc((new Date()).getTime() / 1000)
+  },
+  mounted() {
+      window.setInterval(() => {
+          this.now = Math.trunc((new Date()).getTime() / 1000);
+      },1000);
+  },
+  methods: {
+      seconds: function(remaining){
+          return Math.trunc(remaining) % 60;
+      },
+      minutes: function(remaining) {
+          return Math.trunc((remaining) / 60) % 60;
+      },
+      hours: function(remaining) {
+          return Math.trunc((remaining) / 60 / 60);
+      },
+      twodigits: function(value) {
+          if (value < 0) {
+              return '00';
+          }
+          if (value.toString().length <= 1) {
+                  return `0${value}`;
+          }
+          return value;
+      },
+      timeleft: function(startTime, endTime) {
+          if (endTime === undefined || this.now > Math.trunc(Date.parse(endTime) / 1000)){
+              return "Over";
+          }
+          else if (this.now > Math.trunc(Date.parse(startTime) / 1000)){
+              return "Now";
+          }
+          remaining = Math.trunc(Date.parse(startTime) / 1000) - this.now;
+          seconds = this.twodigits(this.seconds(remaining));
+          minutes = this.twodigits(this.minutes(remaining));
+          hours = this.twodigits(this.hours(remaining));
+          return hours + ":" + minutes + ":" + seconds;
+      },
+  }
+})
+
+function formatDate(formatTime, day) {
+    if (formatTime == ""){
+        return undefined;
+    }
+    eventTime = formatTime.split(/:| /)
+    if (eventTime[2] == "PM" && eventTime[0] != "12"){
+        eventTime[0] = String(parseInt(eventTime[0]) + 12);
+    }
+    else if (eventTime[0] == "12" && eventTime[2] == "AM") { // converts 12 AM to 00
+        eventTime[0] = "00";
+    }
+    if (eventTime[0].length == 1) { // guarantees 2-digit hour
+        eventTime[0] = "0" + eventTime[0];
+    }
+    return day + "T" + eventTime[0] + ":" + eventTime[1] + ":00-0700";
+}
+
+function refresh() {
+    $.get('https://api.hackcu.org/sheets/events.json').success(function(data){
+        schedule.day1 = data.day1;
+        for (x in schedule.day1){
+            // Date Format: YYYY-MM-DD
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-13");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-13");
+        }
+        schedule.day2 = data.day2;
+        for (x in schedule.day2){
+            // Date Format: YYYY-MM-DD
+            schedule.day2[x].StartXML = formatDate(schedule.day2[x].Start, "2019-02-24");
+            schedule.day2[x].EndXML = formatDate(schedule.day2[x].End, "2019-02-24");
+        }
+    });
+}
+
+refresh();
+setInterval(refresh, 2*60000);
+
+</script>
diff --git a/assets/css/upcoming.scss b/assets/css/upcoming.scss
new file mode 100644
index 0000000..cbf1e44
--- /dev/null
+++ b/assets/css/upcoming.scss
@@ -0,0 +1,134 @@
+---
+---
+@charset "utf-8";
+@import "../_sass/mixins";
+
+$main-color: #fff;
+$footer-text: #fff;
+$accent-color: {{site.color}};
+$secondary-color: {{site.secondary_color}};
+
+/* The actual timeline (the vertical ruler) */
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    height: 100%;
+    margin: 0 auto;
+
+    /* The actual timeline (the vertical ruler) */
+    &::after {
+        content: '';
+        position: absolute;
+        width: 6px;
+        background-color: $accent-color;
+        top: 0;
+        bottom: 0;
+        left: 0%;
+        margin-left: -3px;
+        @include box-shadow(inset 0px 11px 8px -5px #fff, inset 0px -11px 8px -5px #fff); 
+    }
+}
+
+/* Container around content */
+.item {
+    padding: 10px 30px;
+    position: relative;
+    background-color: inherit;
+    /* Add arrows pointing left */
+    &::before {
+        content: " ";
+        height: 0;
+        position: absolute;
+        top: 22px;
+        width: 0;
+        z-index: 1;
+        left: 20px;
+        border: medium solid $accent-color;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent $accent-color transparent transparent;
+    }
+}
+
+/* The actual content */
+.inner-item {
+    padding: 10px 20px;
+    position: relative;
+    border:  medium solid $accent-color;
+    @include box-shadow(10px 10px 18px -12px rgba(0,0,0,0.75)); 
+    display: flex;
+
+    .hours {
+        display: flex;
+        flex-direction: column;
+    }
+
+
+
+
+    
+    .start {
+        color: $secondary-color;
+        padding-top:5px;
+    }
+
+    .end {
+        padding-right:20px;
+    }
+}
+
+.bigcard {
+    h4, h3 {
+        margin:0;
+        line-height: 1em;
+        white-space: pre-line;
+        padding-right:20px;
+    }
+
+    h4 {
+        white-space: nowrap;
+        text-align: right;
+    }
+    
+    h3 {
+        padding-top: 20px;
+    }
+}
+
+.smallcard{
+    h5, h4 {
+        margin:0;
+        line-height: 1em;
+        white-space: pre-line;
+        padding-right:20px;
+    }
+
+    h5 {
+        white-space: nowrap;
+        text-align: right;
+    }
+    
+    h4 {
+        padding-top: 12px;
+    }
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+/* Place the timelime to the left */
+    .timeline::after {
+        left: 0px;
+    }
+
+    .inner-item {
+        flex-direction: column;
+
+        .hours {
+            flex-direction: row;
+            padding-bottom: 10px;
+        }
+
+        p {
+            text-align: left;
+        }
+    }
+} 

From 73e175b11cecbd4bc7006d97c62dceefb88fab4f Mon Sep 17 00:00:00 2001
From: Jeff Lucca <itachi3650@gmail.com>
Date: Wed, 13 Feb 2019 03:24:09 -0700
Subject: [PATCH 5/5] commit fix

---
 _sections/_upcomingold.html | 145 ++++++++++++++++++++++++++++++++++++
 _sections/upcoming.html     |  72 +++++-------------
 2 files changed, 164 insertions(+), 53 deletions(-)
 create mode 100644 _sections/_upcomingold.html

diff --git a/_sections/_upcomingold.html b/_sections/_upcomingold.html
new file mode 100644
index 0000000..4465a84
--- /dev/null
+++ b/_sections/_upcomingold.html
@@ -0,0 +1,145 @@
+---
+layout: base
+title: Upcoming
+description: Displays current and upcoming events, announcements
+---
+{%raw %}
+<div class="row center" id="app">
+	<div class="card accent-color white-text">
+        <div class="card-content">
+                <table class="highlight responsive-table">
+                        <thead>
+                                <tr>
+                                        <td>Start</td>
+                                        <td>End</td>
+                                        <td>Event</td>
+                                        <td>Location</td>
+                                </tr>
+                        </thead>
+                        <tbody class="currevent">
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td style="font-weight:bold">{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+                <table class="nextevent highlight responsive-table dog">
+                        <tbody>
+                                <tr v-for="event in day1"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                                <tr v-for="event in day2"
+                                    v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+                                        <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
+                                        <td>{{event.End}}</td>
+                                        <td>{{event.Description}}</td>
+                                        <td>{{event.Location}}</td>
+                                </tr>
+                        </tbody>
+                </table>
+        </div>
+        </div>
+</div>
+{%endraw %}
+<script>
+var schedule = new Vue({
+  el: '#app',
+  data: {
+    day1: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    day2: [{"Location":"","End":"12:30 AM","Description":"Closing ceremony","Start":"12:00 AM"
+      ,"StartXML":"2019-01-01T00:00:00-0700", "EndXML":"2019-01-01T00:30:00-0700"},],
+    now: Math.trunc((new Date()).getTime() / 1000)
+  },
+  mounted() {
+      window.setInterval(() => {
+          this.now = Math.trunc((new Date()).getTime() / 1000);
+      },1000);
+  },
+  methods: {
+      seconds: function(remaining){
+          return Math.trunc(remaining) % 60;
+      },
+      minutes: function(remaining) {
+          return Math.trunc((remaining) / 60) % 60;
+      },
+      hours: function(remaining) {
+          return Math.trunc((remaining) / 60 / 60);
+      },
+      twodigits: function(value) {
+          if (value < 0) {
+              return '00';
+          }
+          if (value.toString().length <= 1) {
+                  return `0${value}`;
+          }
+          return value;
+      },
+      timeleft: function(startTime, endTime) {
+          if (endTime === undefined || this.now > Math.trunc(Date.parse(endTime) / 1000)){
+              return "Over";
+          }
+          else if (this.now > Math.trunc(Date.parse(startTime) / 1000)){
+              return "Now";
+          }
+          remaining = Math.trunc(Date.parse(startTime) / 1000) - this.now;
+          seconds = this.twodigits(this.seconds(remaining));
+          minutes = this.twodigits(this.minutes(remaining));
+          hours = this.twodigits(this.hours(remaining));
+          return hours + ":" + minutes + ":" + seconds;
+      },
+  }
+})
+
+function formatDate(formatTime, day) {
+    if (formatTime == ""){
+        return undefined;
+    }
+    eventTime = formatTime.split(/:| /)
+    if (eventTime[2] == "PM" && eventTime[0] != "12"){
+        eventTime[0] = String(parseInt(eventTime[0]) + 12);
+    }
+    else if (eventTime[0] == "12" && eventTime[2] == "AM") { // converts 12 AM to 00
+        eventTime[0] = "00";
+    }
+    if (eventTime[0].length == 1) { // guarantees 2-digit hour
+        eventTime[0] = "0" + eventTime[0];
+    }
+    return day + "T" + eventTime[0] + ":" + eventTime[1] + ":00-0700";
+}
+
+function refresh() {
+    $.get('https://api.hackcu.org/sheets/events.json').success(function(data){
+        schedule.day1 = data.day1;
+        for (x in schedule.day1){
+            // Date Format: YYYY-MM-DD
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-13");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-13");
+        }
+        schedule.day2 = data.day2;
+        for (x in schedule.day2){
+            // Date Format: YYYY-MM-DD
+            schedule.day2[x].StartXML = formatDate(schedule.day2[x].Start, "2019-02-24");
+            schedule.day2[x].EndXML = formatDate(schedule.day2[x].End, "2019-02-24");
+        }
+    });
+}
+
+refresh();
+setInterval(refresh, 2*60000);
+
+</script>
diff --git a/_sections/upcoming.html b/_sections/upcoming.html
index 24b7abe..398a26d 100644
--- a/_sections/upcoming.html
+++ b/_sections/upcoming.html
@@ -3,60 +3,26 @@
 title: Upcoming
 description: Displays current and upcoming events, announcements
 ---
+<link rel="stylesheet" href="/assets/css/upcoming.css?_={{ site.time |  date: '%s' }}">
 {%raw %}
-<div class="row center" id="app">
-	<div class="card accent-color white-text">
-		<div class="card-content">
-			<table class="highlight responsive-table">
-				<thead>
-					<tr>
-                                                <td>Time</td>
-						<td>Start</td>
-						<td>End</td>
-						<td>Description</td>
-						<td>Location</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="event in day1"
-                                            v-if="schedule.timeleft(event.StartXML, event.EndXML) != 'Over'">
-                                                <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
-						<td>{{event.Start}}</td>
-						<td>{{event.End}}</td>
-						<td>{{event.Description}}</td>
-						<td>{{event.Location}}</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-	</div>
-	<div class="card accent-color white-text">
-		<div class="card-content">
-			<table class="highlight responsive-table">
-				<thead>
-					<tr>
-                                                <td>Time</td>
-						<td>Start</td>
-						<td>End</td>
-						<td>Description</td>
-						<td>Location</td>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="event in day2"
-                                            v-if="schedule.timeleft(event.StartXML, event.EndXML) != 'Over'">
-                                                <td>{{schedule.timeleft(event.StartXML, event.EndXML)}}</td>
-						<td>{{event.Start}}</td>
-						<td>{{event.End}}</td>
-						<td>{{event.Description}}</td>
-						<td>{{event.Location}}</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-	</div>
+<div id="app">
+    <div class="timeline">
+        <div class="item" v-for="event in day1" v-if="schedule.timeleft(event.StartXML, event.EndXML) == 'Now'">
+            <div class="inner-item bigcard">
+                <div class="hours"><h4 class="start">{{schedule.timeleft(event.StartXML, event.EndXML)}}</h4><h4 class="end"><small><small>to </small>{{ event.End }}</small></h4></div>
+                <h3>{{ event.Description }} <small v-if="event.Location != ''">at {{event.Location}}</small></h3>
+            </div>
+        </div>
+        <div class="item" style="width:80%" v-for="event in day1" v-if="schedule.timeleft(event.StartXML, event.EndXML).length > 4">
+            <div class="inner-item smallcard">
+                <div class="hours"><h5 class="start">{{schedule.timeleft(event.StartXML, event.EndXML)}}</h5><h5 class="end"><small><small>to </small>{{ event.End }}</small></h5></div>
+                <h4>{{ event.Description }} <small v-if="event.Location != ''">at {{event.Location}}</small></h4>
+            </div>
+        </div>
+    </div>
 </div>
 {%endraw %}
+
 <script>
 var schedule = new Vue({
   el: '#app',
@@ -129,8 +95,8 @@
         schedule.day1 = data.day1;
         for (x in schedule.day1){
             // Date Format: YYYY-MM-DD
-            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-24");
-            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-24");
+            schedule.day1[x].StartXML = formatDate(schedule.day1[x].Start, "2019-02-13");
+            schedule.day1[x].EndXML = formatDate(schedule.day1[x].End, "2019-02-13");
         }
         schedule.day2 = data.day2;
         for (x in schedule.day2){