Added basic actor and network overview. Added DDF Network actor scraper. Various bug fixes and layout improvements.

assets/components/tile/actor.vue

@@ -7,11 +7,14 @@
             :href="`/actor/${actor.slug}`"
             class="link"
         >
-            <span class="name">{{ actor.name }}</span>
+            <span
+                v-tooltip.top="actor.name"
+                class="name"
+            >{{ actor.name }}</span>
 
             <img
                 v-if="actor.avatar"
-                :src="`/media/${actor.avatar}`"
+                :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
                 class="avatar"
             >
 
@@ -38,6 +41,7 @@ export default {
 @import 'theme';
 
 .actor {
+    width: 10rem;
     background: $background;
     display: inline-block;
     margin: 0 .5rem .5rem 0;
@@ -57,6 +61,9 @@ export default {
 .name {
     display: block;
     padding: .5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-weight: bold;
 }
 
@@ -64,10 +71,11 @@ export default {
     color: $shadow-weak;
     background: $shadow-hint;
     height: 12rem;
-    width: 10rem;
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     object-fit: cover;
+    object-position: 50% 0;
 }
 </style>

assets/components/tile/network.vue

@@ -0,0 +1,66 @@
+<template>
+    <a
+        :href="`/network/${network.slug}`"
+        :title="network.name"
+        class="tile"
+    >
+        <object
+            :data="`/img/logos/${network.slug}/network.png`"
+            type="image/png"
+            class="logo"
+        >{{ network.name }}</object>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        network: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    background: $background;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: .5rem 1rem;
+    border-radius: .25rem;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    height: 100%;
+    text-align: center;
+}
+
+.link {
+    text-decoration: none;
+}
+
+.logo {
+    width: 100%;
+    height: 5rem;
+    color: $text;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    object-fit: contain;
+    font-size: 1rem;
+    font-weight: bold;
+    filter: drop-shadow(0 0 1px $shadow);
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+</style>

assets/components/tile/site.vue

@@ -53,6 +53,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
+    filter: drop-shadow(0 0 1px $shadow);
 }
 
 .title {