From bd4bf0912bebf3f15336221736770f30ec079f03 Mon Sep 17 00:00:00 2001
From: Niko Strijbol <strijbol.niko@gmail.com>
Date: Sat, 29 Oct 2016 21:49:58 +0200
Subject: [PATCH] Inline svg to fix IE & Edge

---
 .gitignore                                    |  1 +
 .../assets/stylesheets/includes/projects.scss | 19 +++++++-------
 content/projects.erb                          | 25 +++++++++++--------
 lib/helpers/projects.rb                       |  6 +++++
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/.gitignore b/.gitignore
index 82e6258..acf03ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ crash.log*
 .sass-cache/
 
 node_modules/
+*.iml
diff --git a/content/assets/stylesheets/includes/projects.scss b/content/assets/stylesheets/includes/projects.scss
index b3ebf2a..bc45664 100644
--- a/content/assets/stylesheets/includes/projects.scss
+++ b/content/assets/stylesheets/includes/projects.scss
@@ -3,6 +3,16 @@
   align-self: flex-end;
   align-items: flex-end;
   padding-right: 20px;
+
+  div {
+    margin: 10px;
+  }
+}
+
+@media (max-width: #{$tablet}) {
+  .links {
+    align-self: center;
+  }
 }
 
 .rows {
@@ -10,15 +20,6 @@
   flex-direction: column;
 }
 
-.links > .column {
-  max-width: 200px;
-  align-items: center;
-}
-
-.links .column a img {
-  width: 100%;
-}
-
 .project {
   background-color: $body-background;
   margin-top: 30px;
diff --git a/content/projects.erb b/content/projects.erb
index d4274fd..92c9e10 100644
--- a/content/projects.erb
+++ b/content/projects.erb
@@ -17,17 +17,21 @@ order: 30
         For an overview of the features, visit the project's <a href="http://student.ugent.be/hydra/">website</a>.
       </p>
       <div class="columns links">
-        <div class="column has-text-centered">
-          <a href="https://itunes.apple.com/be/app/hydra/id602640924"><img src="/assets/images/apple.svg"></a>
-          <a href="https://github.com/ZeusWPI/hydra-iOS">iOS <span class="icon"><i class="fa fa-github"></i></span></a>
+        <div class="has-text-centered">
+          <a href="https://itunes.apple.com/be/app/hydra/id602640924">
+            <%= svg 'apple' %>
+          </a>
+          <a href="https://github.com/ZeusWPI/hydra-iOS">iOS <span class="icon"><%= fa('github') %></span></a>
         </div>
-        <div class="column has-text-centered">
-          <a href="http://play.google.com/store/apps/details?id=be.ugent.zeus.hydra"><img src="/assets/images/google.svg"></a>
-          <a href="https://github.com/ZeusWPI/hydra-android">Android <span class="icon"><i class="fa fa-github"></i></span></a>
+        <div class="has-text-centered">
+          <a href="http://play.google.com/store/apps/details?id=be.ugent.zeus.hydra">
+            <%= svg 'google' %>
+          </a>
+          <a href="https://github.com/ZeusWPI/hydra-android">Android <span class="icon"><%= fa('github') %></span></a>
         </div>
-        <div class="column has-text-centered">
-          <a href="http://www.windowsphone.com/s?appId=08d3268e-aad6-48fa-ae83-5ccd1663e73a"><img src="/assets/images/windows.svg"></a>
-          <a href="https://github.com/ZeusWPI/hydra-windows">Windows 10 <span class="icon"><i class="fa fa-github"></i></span></a>
+        <div class="has-text-centered">
+          <a href="http://www.windowsphone.com/s?appId=08d3268e-aad6-48fa-ae83-5ccd1663e73a"><%= svg 'windows' %></a>
+          <a href="https://github.com/ZeusWPI/hydra-windows">Windows 10 <span class="icon"><%= fa('github') %></span></a>
         </div>
       </div>
     </div>
@@ -37,5 +41,4 @@ order: 30
 
 <% all_projects.each do |project| %>
   <%= render '/partials/_project.erb', project: project%>
-<% end %>
-</div>
+<% end %>
\ No newline at end of file
diff --git a/lib/helpers/projects.rb b/lib/helpers/projects.rb
index cbebd53..e743ec6 100644
--- a/lib/helpers/projects.rb
+++ b/lib/helpers/projects.rb
@@ -3,4 +3,10 @@ module ProjectsHelper
   def all_projects
     @items.find_all('/projects/*')
   end
+  # Inline a svg file.
+  def svg(name)
+    File.open("content/assets/images/#{name}.svg", "rb") do |file|
+      "<div>" + file.read + "</div>"
+    end
+  end
 end