Style list items

frontend/src/components/ListItem.vue

@@ -1,8 +1,10 @@
 <template>
   <RouterLink :to="action">
     <div class="list-item">
-      <h2>{{ title }}</h2>
       <img v-bind:src="thumbnail"/>
+      <div class="image-overlay">
+        <span>{{ title }}</span>
+      </div>
     </div>
   </RouterLink>
 </template>
@@ -20,7 +22,35 @@ export default {
 
 <style scoped>
 .list-item {
-  padding: 8px;
+  margin: 8px;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.list-item img {
+  max-height: 512px;
+  max-width: 512px;
+  border-radius: 8px;
+  vertical-align: top;
+}
+
+.image-overlay {
+  position: absolute;
+  bottom: 0px;
+  background-color: #eee;
+  width: 100%;
+  font-size: 1.5em;
+  line-height: 3em;
+  height: 3em;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.image-overlay span {
+  margin: 4px;
 }
 
 a {