Inline svg to fix IE & Edge

This commit is contained in:
Niko Strijbol 2016-10-29 21:49:58 +02:00
parent d0e762f598
commit bd4bf0912b
4 changed files with 31 additions and 20 deletions

1
.gitignore vendored
View file

@ -15,3 +15,4 @@ crash.log*
.sass-cache/
node_modules/
*.iml

View file

@ -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;

View file

@ -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 %>

View file

@ -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