#8, #5, #3

casassg · Oct 31, 2017 · d31d571 · d31d571
1 parent 07b4a44
commit d31d571
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -1,26 +1,57 @@
 ---
 ---
 
+@font-face {
+    font-family: Biko;
+    src: url('../fonts/Biko_Regular.otf');
+}
+
+html { height: 100%; width: 100% }
+
 body {
     background-color: #EFEAE4;
-    font-family: "Roboto", Helvetica, sans-serif;
+    background-color: rgba(236, 240, 241,1.0);
+    padding: 15px 0px;
+    font-family: "Biko", Helvetica, sans-serif;
+    font-size: 1.6em;
+    min-height: 100%;
+    width: 100%;
 }
 
 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);
+    /*-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: 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;
-    height: 280px;
+    min-height: 280px;
+    transition: .1s;
+    -webkit-transition: .1s;
+    -moz-transition: .1s;
+    border: 2px solid transparent;
+    .panel-body {
+        padding: 10px;
+    }
 
     .until {
         position: absolute;
         bottom: 30px;
         right: 40px;
         font-style: italic;
     }
+
+    &:hover {
+        transition: .1s;
+        -webkit-transition: .1s;
+        -moz-transition: .1s;
+        border: 2px solid rgba(52, 73, 94,0.6);
+    }
+}
+
+.events .col-sm-4 {
+    margin: 10px;
 }
 
 a.event-url {
@@ -38,13 +69,16 @@ a.event-url {
         object-fit: cover;
         height: 100px;
         width: 100%;
+        &.white {
+            filter: brightness(85%);
+        }
     }
 
     h3 {
         position: absolute;
-        top: 50px;
+        top: 42px;
         z-index: 10;
-        padding-left: 5px;
+        padding: 10px;
 
         &.white{
             color: white;
@@ -60,3 +94,9 @@ a.event-url {
     width: 60px;
 }
 
+.calendar {
+    display: block;
+    width: 300px;
+    font-size: 1.2em;
+}
+
diff --git a/assets/fonts/Biko_Regular.otf b/assets/fonts/Biko_Regular.otf
diff --git a/index.md b/index.md
@@ -15,7 +15,7 @@ description: HackCU community webpage. Check all our workshops and events coming
                     <a {% unless event.url == "undefined" %} href="{{event.url}}" {% endunless %} target="_blank" class="event-url">
                         <div class="panel panel-default ">
                             <div class="panel-heading">
-                                <img class="img-responsive" src="{% if event.image-url %}{{event.image-url}}{% else %}assets/img/flatirons.jpg{%endif%}">
+                                <img class="img-responsive {% unless event.white-text == null %}white{% endunless %}" src="{% if event.image-url %}{{event.image-url}}{% else %}assets/img/flatirons.jpg{%endif%}">
                                 <h3 {% unless event.white-text == null %} class="white"{% endunless %} >{{event.name}}</h3>
                             </div>
                             <div class="panel-body event" data-date="{{ event.date }}">                                
@@ -34,8 +34,8 @@ description: HackCU community webpage. Check all our workshops and events coming
                     </a>
                 </div>
             {% endfor %}
-            <a href="https://calendar.google.com/calendar/r?cid=webcal://hackcu.github.io/community/calendars/events.ics" target="_blank">Add events to Google Calendar</a>
         </div>
+        <a class="btn btn-primary calendar" href="https://calendar.google.com/calendar/r?cid=webcal://hackcu.github.io/community/calendars/events.ics" target="_blank">Add events to Google Calendar</a>
     </div>
 
 </section>