Make contact page fancier

content/about/contact.erb

@@ -1,7 +1,7 @@
 ---
 narrow_page: true
 ---
-
+<% @icon_size = '2x' %>
 <%= render '/partials/_about_sub_navbar.*', selected: 'contact' %>
 <h1 class="title is-1 has-text-centered">Contact</h1>
 
@@ -11,7 +11,49 @@ narrow_page: true
     Zeus WPI is located in the basement of the S9 building on Campus Sterre, by it's members often named “de kelder”.
   </p>
 
-  <p>Reach us:</p>
+  <%# TODO: Put in a loop for all entries %>
+  <ul id='contact-icons' class='columns'>
+
+    <li class='column contact-circle-option'>
+      <a href="_" class='contact-circle-wrapper'>
+        <div class='contact-circle is-centered'>
+          <div class='contact-circle-pulse grow'></div>
+          <%= fa :envelope, size: @icon_size, class: 'grow-large' %>
+        </div>
+      </a>
+      <h4 class="contact-description">EMAIL</h3>
+      <p class="has-text-centered">
+        <a href="_" class="contact-text-link is-link">Mail us</a>
+      </p>
+    </li>
+
+    <li class='column contact-circle-option'>
+      <a href="_" class='contact-circle-wrapper'>
+        <div class='contact-circle is-centered'>
+          <div class='contact-circle-pulse grow'></div>
+          <%= fa :facebook, size: @icon_size, class: 'grow-large' %>
+        </div>
+      </a>
+      <h4 class="contact-description">FACEBOOK</h3>
+      <p class="has-text-centered">
+        <a href="_" class="contact-text-link is-link">Like us</a>
+      </p>
+    </li>
+
+   <li class='column contact-circle-option'>
+      <a href="_" class='contact-circle-wrapper'>
+        <div class='contact-circle is-centered'>
+          <div class='contact-circle-pulse grow'></div>
+          <%= fa :twitter, size: @icon_size, class: 'grow-large' %>
+        </div>
+      </a>
+      <h4 class="contact-description">TWITTER</h3>
+      <p class="has-text-centered">
+        <a href="_" class="contact-text-link is-link">Follow us</a>
+      </p>
+    </li>
+
+  </ul>
 
   <ul>
     <li>

content/assets/stylesheets/includes/about.scss

@@ -0,0 +1,69 @@
+#contact-icons {
+    .contact-circle-option {
+        display: block;
+
+        .contact-circle-wrapper {
+            display: block;
+            position: relative;
+            width: 60%;
+            padding-bottom: 60%;
+            height: 0;
+            margin: 0 auto;
+            
+            .contact-circle-pulse {
+                position: absolute;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 1px solid $tertiary;
+                margin: 0 auto;
+            }
+
+            .contact-circle {
+                position: absolute;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                background-color: $tertiary;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin: 0 auto;
+                color: $highlighted-text-colour;
+            }
+        }
+
+        .contact-circle-wrapper:hover, .contact-circle-wrapper:focus {
+            
+            .grow { 
+                transition: all .2s ease-in-out;
+                -moz-transform: scale(1.2);
+                -webkit-transform: scale(1.2);
+                transform: scale(1.2);
+            }
+
+            
+        }
+
+        .contact-description {
+            display: block;
+            text-align: center;
+            margin-top: 20px;
+            color: $primary;
+        }
+
+        .contact-text-link {
+            color: $text;
+            border-bottom: 1px solid $secondary;
+            margin-top: 7px;
+            font-size: 1.5em;
+        }
+
+        .contact-text-link:hover {
+            color: $secondary;
+        }
+    }
+
+}

content/assets/stylesheets/includes/tiles.scss

@@ -24,7 +24,7 @@ a.box {
   filter: grayscale(30%);
 
   .event-content {
-    color: #4a4a4a;
+    color: $text;
     height: 100%;
     width: 100%;
     background: rgba($tertiary, 0.2);

content/assets/stylesheets/main.scss

@@ -34,3 +34,4 @@ body.site {
 @import "includes/projects";
 @import "includes/navbar";
 @import "includes/search";
+@import "includes/about"