Added tag page. Added default 'anal' tag to Vixen scraper for Tushy and Tushy Raw.

assets/components/actor/actor.vue

@@ -113,14 +113,4 @@ export default {
         content: ':';
     }
 }
-
-.scenes {
-    display: grid;
-    grid-gap: 1rem;
-    margin: 0 0 1rem 0;
-}
-
-.scenes {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
 </style>

assets/components/header/header.vue

@@ -15,7 +15,7 @@
 .header {
     color: $text-contrast;
     background: $primary;
-    padding: 1rem;
+    padding: .5rem 1rem;
 }
 
 .logo-link {

assets/components/home/home.vue

@@ -144,10 +144,4 @@ export default {
 .filter {
     display: inline-block;
 }
-
-.scenes {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    grid-gap: 1rem;
-}
 </style>

assets/components/network/network.vue

@@ -113,18 +113,13 @@ export default {
     height: 3rem;
 }
 
-.sites,
-.scenes {
+.sites {
     display: grid;
     grid-gap: 1rem;
     margin: 0 0 1rem 0;
 }
 
-.scenes {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
-
 .sites {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, 15rem);
 }
 </style>

assets/components/site/site.vue

@@ -147,11 +147,7 @@ export default {
     margin: 0 0 1rem 0;
 }
 
-.scenes {
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-}
-
 .sites {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, 15rem);
 }
 </style>

assets/components/tag/tag.vue

@@ -0,0 +1,83 @@
+<template>
+    <div
+        v-if="tag"
+        class="content tag"
+    >
+        <div class="header">
+            <span>
+                <h2 class="title">{{ tag.name }}</h2>
+
+                <span class="description">{{ tag.description }}</span>
+            </span>
+        </div>
+
+        <div class="content-inner">
+            <h3 class="heading">Latest releases</h3>
+
+            <ul class="nolist scenes">
+                <li
+                    v-for="release in releases"
+                    :key="`release-${release.id}`"
+                >
+                    <ReleaseTile :release="release" />
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import ReleaseTile from '../tile/release.vue';
+
+async function mounted() {
+    [this.tag] = await this.$store.dispatch('fetchTags', this.$route.params.tagSlug);
+    this.releases = await this.$store.dispatch('fetchTagReleases', this.$route.params.tagSlug);
+
+    this.pageTitle = this.tag.name;
+}
+
+export default {
+    components: {
+        ReleaseTile,
+    },
+    data() {
+        return {
+            tag: null,
+            releases: null,
+            pageTitle: null,
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+}
+
+.title {
+    display: inline-block;
+    margin: 0 .5rem 0 0;
+    text-transform: capitalize;
+}
+
+.heading {
+    padding: 0;
+    margin: 0 0 1rem 0;
+}
+
+.bio-heading {
+    display: inline-block;
+    font-weight: bold;
+    margin: .5rem 0 0 0;
+
+    &::after {
+        content: ':';
+    }
+}
+</style>

assets/components/tile/release.vue

@@ -131,8 +131,11 @@ export default {
 
 .thumbnail {
     width: 100%;
+    height: 12rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     object-fit: cover;
-    object-position: 50% 0;
     background-position: center;
     background-size: cover;
     background-color: $shadow-hint;

assets/components/tile/site.vue

@@ -30,7 +30,7 @@ export default {
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
-    padding: 1rem;
+    padding: .5rem 1rem;
     border-radius: .25rem;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
     height: 100%;