Added Kelly Madison profile scraper.

assets/components/actors/actor.vue

@@ -47,7 +47,7 @@
                         <span
                             v-if="actor.birthdate"
                             class="birthdate"
-                        >{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ age }}</span></span>
+                        >{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ actor.age }}</span></span>
                     </li>
 
                     <li
@@ -239,18 +239,12 @@
 </template>
 
 <script>
-import dayjs from 'dayjs';
-
 import { cmToFeetInches, kgToLbs } from '../../../src/utils/convert';
 
 import Photos from './photos.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
-function age() {
-    return dayjs(new Date()).diff(this.actor.birthdate, 'years');
-}
-
 async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchActorReleases', this.$route.params.actorSlug);
 }
@@ -293,7 +287,6 @@ export default {
         };
     },
     computed: {
-        age,
         imperialHeight,
         imperialWeight,
     },

assets/components/release/release.vue

@@ -293,7 +293,7 @@ export default {
 
 .logo {
     display: inline-block;
-    filter: drop-shadow(0 0 1px $shadow);
+    filter: $logo-outline;
 }
 
 .logo-site {
@@ -301,7 +301,6 @@ export default {
     max-width: 15rem;
     object-fit: contain;
     object-position: 100% 50%;
-    filter: drop-shadow(0 0 1px $shadow);
 }
 
 .logo-network {

assets/components/tile/actor.vue

@@ -22,6 +22,23 @@
                 v-else
                 class="avatar"
             >No photo</span>
+
+            <span
+                v-if="actor.age || actor.origin"
+                class="details"
+            >
+                <span class="age">{{ actor.age }}</span>
+                <span
+                    v-if="actor.origin"
+                    class="country"
+                >
+                    {{ actor.origin.country.alpha2 }}
+                    <img
+                        class="flag"
+                        :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
+                    >
+                </span>
+            </span>
         </a>
     </div>
 </template>
@@ -45,6 +62,7 @@ export default {
     background: $background;
     display: inline-block;
     margin: 0 .5rem .5rem 0;
+    position: relative;
     box-shadow: 0 0 3px $shadow-weak;
 }
 
@@ -78,4 +96,18 @@ export default {
     object-fit: cover;
     object-position: 50% 0;
 }
+
+.details {
+    background: $shadow;
+    color: $text-contrast;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: .5rem;
+    position: absolute;
+    bottom: 0;
+    font-size: .8rem;
+    font-weight: bold;
+}
 </style>

assets/components/tile/network.vue

@@ -33,7 +33,6 @@ export default {
     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;
@@ -53,7 +52,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
-    filter: drop-shadow(0 0 1px $shadow);
+    filter: $logo-outline;
 }
 
 .title {

assets/components/tile/site.vue

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

assets/css/_theme.scss

@@ -23,6 +23,8 @@ $highlight-strong: rgba(255, 255, 255, .7);
 $highlight-weak: rgba(255, 255, 255, .2);
 $highlight-hint: rgba(255, 255, 255, .075);
 
+$logo-outline: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
+
 $profile: #222;
 
 $link: #cc4466;