<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>XPUB Projects</title>
  <link rel="stylesheet" href="style.css" />
<style>
@font-face {
    font-family: inconsolata;
    src: url(fonts/inconsolata.ttf);
}
@font-face {
    font-family: inconsolatabold;
    src: url(fonts/inconsolatabold.ttf);
}
body {
    margin: 3%;
    font-family:inconsolata, sans-serif;
    background: lightgray;
}
a { text-decoration: none; color: black }
a:hover { text-decoration: underline; color: blue; }
#covers {
    display: flex;
    flex-wrap: wrap;
}
.thesis {
    width: 300px;
    margin: 10px;
}
.thesis img {
    width: 100%
}
</style>

</head>
<body>
<div id="covers">
{% for project in projects %}
<div class="thesis"><a href="{{project.thesis}}" title="{{project.student}}"><img src="{{project.cover}}"></a></div>
{%- endfor %}
</div>
</body>
</html>