update tiles

.gitignore

@@ -1,2 +1,3 @@
 _site/
-.DS_Store
+.DS_Store
+.sass-cache

_config.yml

@@ -3,6 +3,7 @@ name: HackersCU Events
 author: HackersCU
 twitter: hackcu
 fb: hackcu
+domain: events.hackcu.org
 
 sass:
     sass_dir: assets/_sass

_data/events.yml

@@ -1,15 +1,14 @@
 - name: Introduction to Git/GitHub
   white-text: True
-  line: Learn how to use Git from its basics. Pizza and GitHub swag will be provided
+  line: Learn how to use Git from its basics. Pizza and GitHub swag provided.
   date: 2017-10-25 5:30 PM 
   end-date: 2017-10-25 7:30 PM 
-  location: Wolf Law 230
+  location: Wolf Law 206
   url: https://www.facebook.com/events/147776512500472/
 
 - name: Local Hack Day
   white-text: True
-  image-url: assets/img/localhackday.png
-  line: It's local hack day
+  line: 12 hour hack day. Bringing together the local hacker community to celebrate building awesome technology.
   date: 2017-12-2 8:00 AM 
   end-date: 2017-12-2 9:15 PM 
   location: Idea Forge

assets/_sass/_mixins.scss

@@ -0,0 +1,72 @@
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow;
+     -moz-box-shadow: $shadow;
+          box-shadow: $shadow;
+}
+
+@mixin box-sizing($sizing...) {
+  -webkit-box-sizing: $sizing;
+     -moz-box-sizing: $sizing;
+          box-sizing: $sizing;
+}
+
+@mixin border-radius($radius...) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+          border-radius: $radius;
+}
+
+@mixin border-top-left-radius($radius...) {
+  -webkit-border-top-left-radius: $radius;
+     -moz-border-radius-topleft:  $radius;
+          border-top-left-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius...) {
+  -webkit-border-top-right-radius: $radius;
+     -moz-border-radius-topright:  $radius;
+          border-top-right-radius: $radius;
+}
+
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+     -moz-transition: $transition;
+       -o-transition: $transition;
+          transition: $transition;
+}
+
+@mixin user-select($select...) {
+  -webkit-user-select: $select;    /* Chrome all / Safari all */
+     -moz-user-select: $select;    /* Firefox all */
+      -ms-user-select: $select;    /* IE 10+ */
+       -o-user-select: $select;
+          user-select: $select;
+}
+@mixin translateX($px) {
+  -webkit-transform: translateX($px);
+  -ms-transform: translateX($px);
+  transform: translateX($px);
+}
+
+@mixin btn($color, $border-color, $cursor: pointer, $opacity: 1, $hover-fx: true) {
+  cursor: $cursor;
+  opacity: $opacity;
+  background-color: $color;
+  @include box-shadow(0 1px 0 $border-color);
+  &:hover {
+    @if ($hover-fx) {
+      background-color: lighten($color, 5%);
+    } @else {
+      background-color: $color;
+    }
+  }
+}
+
+@mixin nodrag() {
+  user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}

assets/css/main.scss

@@ -1,6 +1,8 @@
 ---
 ---
 
+@import "mixins";
+
 @font-face {
     font-family: Biko;
     src: url('../fonts/Biko_Regular.otf');
@@ -19,36 +21,44 @@ body {
 }
 
 div.panel {
-    /*-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
-    box-shadow: 1px 1px 3px 1px rgba(0,0,0,.08);
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-    min-height: 280px;
-    transition: .1s;
-    -webkit-transition: .1s;
-    -moz-transition: .1s;
-    border: 2px solid transparent;
+    @include box-shadow(1px 5px 8px 1px rgba(0,0,0,.08));
+    @include border-radius(0);
+    height: 230px;
+    position: relative;
+    top: 0;
+    @include transition(all .1s linear);
+    border: 0;
     .panel-body {
         padding: 10px;
+        height: 90px;
+        overflow: fade;
+
+        p {
+            overflow: fade;
+            text-align: justify;
+        }
     }
 
-    .until {
-        position: absolute;
-        bottom: 30px;
-        right: 40px;
+    .bottom {
         font-style: italic;
+        position: absolute;
+        width: 100%;
+        text-align: right;
+        margin-left: -20px;
+        bottom: 10px;
     }
 
+
+
     &:hover {
-        transition: .1s;
-        -webkit-transition: .1s;
-        -moz-transition: .1s;
-        border: 2px solid rgba(52, 73, 94,0.6);
+        position: relative;
+        top: 4px;
+        box-shadow: 1px 1px 3px 1px rgba(0,0,0,.08);
+
     }
 
+
+
     &.past {
         color: rgba(0,0,0,.3);
         .panel-heading {
@@ -67,6 +77,10 @@ a.event-url {
     &:hover {
         text-decoration: none;
     }
+
+    &:active{
+        text-decoration: none;
+    }
 }
 
 .panel-heading {
@@ -78,14 +92,15 @@ a.event-url {
         height: 100px;
         width: 100%;
         &.white {
-            filter: brightness(85%);
+            filter: brightness(75%);
         }
     }
 
     h3 {
         position: absolute;
-        top: 42px;
+        top: 0px;
         z-index: 10;
+        text-transform: uppercase;
         padding: 10px;
 
         &.white{

index.md

@@ -19,23 +19,15 @@ description: HackCU community webpage. Check all our workshops and events coming
                                 <h3 {% unless event.white-text == null %} class="white"{% endunless %} >{{event.name}}</h3>
                             </div>
                             <div class="panel-body event" data-date="{{ event.date }}">                                
-                                <p></p>
-                                <dl class="dl-horizontal">
-                                  <dt>What?</dt>
-                                  <dd>{{event.line}}</dd>
-                                  <dt>When?</dt>
-                                  <dd>{{event.date | date_to_long_string }}</dd>
-                                  <dt>Where?</dt>
-                                  <dd>{{event.location}}</dd>
-                                </dl>
-                                <small class="until"></small>
+                                <p>{{event.line}}</p>
+                                <small class="bottom">{{event.date |  date: "%-d %B %Y" }} at {{event.location}}</small>
                             </div>
                         </div>
                     </a>
                 </div>
             {% endfor %}
         </div>
-        <a class="btn btn-primary calendar" href="https://calendar.google.com/calendar/r?cid=webcal://events.hackcu.org/calendars/events.ics" target="_blank">Add events to Google Calendar</a>
+        <a class="btn btn-primary calendar" href="https://calendar.google.com/calendar/r?cid=webcal://{{site.domain}}/calendars/events.ics" target="_blank">Add events to Google Calendar</a>
     </div>
 
 </section>