<html>
<head>
<style type="text/css">
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.language {
}
.deviceName {
padding-top: 20px;
font-size: 30px;
}
.screenshot {
cursor: pointer;
border: 1px #EEE solid;
}
td {
text-align: center;
}
</style>
</head>
<body>
<% divide_size_by = 5.0 %>
<% max_width = 180 %>
<% @data.each do |language, content| %>
<h1 class="language"><%= language %></h1>
<hr />
<table>
<% content.each do |device_name, screens| %>
<th colspan="<%= screens.count %>">
<h2 class="deviceName">
<%= device_name %>
</h2>
</th>
<tr>
<% screens.each do |screen_path| %>
<td>
<% screen_size = FastImage.size(screen_path) %>
<a href="<%= screen_path %>" target="_blank">
<img class="screenshot"
src="<%= screen_path %>",
style="width: <%= [(screen_size[0] / divide_size_by).round, max_width].min %>px;" />
</a>
</td>
<% end %>
</tr>
<% end %>
</table>
<% end %>
</body>
</head>