Merge pull request #117 from ZeusWPI/hydra

Hydra improvements again

content/assets/stylesheets/includes/projects.scss

@@ -7,6 +7,14 @@
   div {
     margin: 10px;
   }
+
+  img {
+    width: 200px;
+  }
+}
+
+.clear {
+  clear: both;
 }
 
 @media (max-width: #{$tablet}) {

content/assets/stylesheets/includes/tiles.scss

@@ -7,6 +7,10 @@ a.box {
 #homepage {
   .box {
     border-radius: 0;
+
+    img {
+      width: 100%;
+    }
   }
 }
 

content/index.erb

@@ -38,7 +38,7 @@
       </div>
       <div class="tile is-parent is-2">
         <a class="tile is-child imgcenter box hydra-tile" href="/projects/#hydra">
-          <%= asset :img, 'hydra-logo.png' %>
+          <%= asset :img, 'hydra-logo.svg' %>
         </a>
       </div>
     </div>

content/projects.erb

@@ -7,7 +7,7 @@ order: 30
   <article id="hydra" class="columns">
     <div class="column is-one-quarter" id="logo-column">
       <div class="hydra-scrot">
-        <img src="/assets/images/hydra.png">
+        <%= asset :img, 'hydra.png' %>
       </div>
     </div>
     <div class="column rows">
@@ -19,18 +19,23 @@ order: 30
       <div class="columns links">
         <div class="has-text-centered">
           <a href="https://itunes.apple.com/be/app/hydra/id602640924">
-            <%= svg 'apple' %>
+            <%= asset :img, 'apple.svg' %>
           </a>
+          <div class="clear"></div>
           <a href="https://github.com/ZeusWPI/hydra-iOS">iOS <span class="icon"><%= fa('github') %></span></a>
         </div>
         <div class="has-text-centered">
           <a href="http://play.google.com/store/apps/details?id=be.ugent.zeus.hydra">
-            <%= svg 'google' %>
+            <%= asset :img, 'google.svg' %>
           </a>
+          <div class="clear"></div>
           <a href="https://github.com/ZeusWPI/hydra-android">Android <span class="icon"><%= fa('github') %></span></a>
         </div>
         <div class="has-text-centered">
-          <a href="http://www.windowsphone.com/s?appId=08d3268e-aad6-48fa-ae83-5ccd1663e73a"><%= svg 'windows' %></a>
+          <a href="http://www.windowsphone.com/s?appId=08d3268e-aad6-48fa-ae83-5ccd1663e73a">
+            <%= asset :img, 'windows.svg' %>
+          </a>
+          <div class="clear"></div>
           <a href="https://github.com/ZeusWPI/hydra-windows">Windows 10 <span class="icon"><%= fa('github') %></span></a>
         </div>
       </div>

layouts/partials/_project.erb

@@ -1,6 +1,6 @@
 <div id="<%= project.identifier.without_ext.split('/')[-1] %>" class="container project content">
   <article class="columns is-mobile">
-    <div class="column is-one-quarter" id="logo-column">
+    <div class="column is-one-quarter">
       <div class="logo" style="background-color: <%= project[:logo_color]%>">
         <div class="logo-initial has-text-centered"><%= project[:logo_letter]%></div>
       </div>

lib/helpers/assets.rb

@@ -1,7 +1,7 @@
 module AssetHelper
   def asset(type, identifier)
     {
-      img: "<img src='/assets/images/#{identifier}'/>",
+      img: "<img src='/assets/images/#{identifier}' alt='#{identifier}' />",
       js: "<script src='/assets/scripts/#{identifier}.js'></script>",
       css: "<link rel='stylesheet' type='text/css' href='/assets/stylesheets/#{identifier}.css'>"
     }[type]

lib/helpers/projects.rb

@@ -3,10 +3,4 @@ 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