Redesigned homepage.

assets/components/tile/release.vue

@@ -3,13 +3,16 @@
         <span class="banner">
             <span class="details">
                 <a
-                    :href="`/site/${release.site.slug}`"
+                    v-tooltip.bottom="`Part of ${release.network.name}`"
                     :title="`Part of ${release.network.name}`"
+                    :href="`/site/${release.site.slug}`"
                     class="site site-link"
                 >{{ release.site.name }}</a>
 
                 <a
                     v-if="release.date"
+                    v-tooltip.bottom="`View scene on ${release.site.name}`"
+                    :title="`View scene on ${release.site.name}`"
                     :href="release.url"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -78,23 +81,21 @@
                 </ul>
             </span>
 
-            <span
+            <ul
                 :title="release.tags.map(tag => tag.name).join(', ')"
-                class="row"
+                class="tags nolist"
             >
-                <ul class="tags nolist">
-                    <li
-                        v-for="tag in release.tags"
-                        :key="`tag-${tag.slug}`"
-                        class="tag"
-                    >
-                        <a
-                            :href="`/tag/${tag.slug}`"
-                            class="tag-link"
-                        >{{ tag.name }}</a>
-                    </li>
-                </ul>
-            </span>
+                <li
+                    v-for="tag in release.tags"
+                    :key="`tag-${tag.slug}`"
+                    class="tag"
+                >
+                    <a
+                        :href="`/tag/${tag.slug}`"
+                        class="tag-link"
+                    >{{ tag.name }}</a>
+                </li>
+            </ul>
         </div>
     </div>
 </template>
@@ -114,6 +115,7 @@ export default {
 @import 'theme';
 
 .tile {
+    background: $background;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -149,7 +151,7 @@ export default {
     align-items: center;
     box-sizing: border-box;
     padding: 0 .5rem;
-    margin: 0 0 .25rem 0;
+    margin: 0 0 .5rem 0;
 }
 
 .details {
@@ -179,6 +181,8 @@ export default {
 }
 
 .info {
+    display: flex;
+    flex-direction: column;
     flex-grow: 1;
 }
 
@@ -210,32 +214,26 @@ export default {
 }
 
 .tags {
-    word-wrap: break-word;
-    overflow: hidden;
     max-height: 2.5rem;
+    padding: .25rem .5rem 1rem .5rem;
     line-height: 1.25rem;
-}
-
-.actor,
-.tag {
-    margin: 0 .25rem 0 0;
+    word-wrap: break-word;
+    overflow-y: hidden;
 }
 
 .actor {
-    font-size: .9rem;
+    margin: 0 .25rem 0 0;
 }
 
 .tag {
-    font-size: .75rem;
+    margin: 0 .25rem .5rem 0;
 }
 
-.actor:not(:last-of-type)::after,
-.tag:not(:last-child):after {
+.actor:not(:last-of-type)::after {
     content: ",";
 }
 
-.actor-link,
-.tag-link {
+.actor-link {
     text-decoration: none;
 
     &:hover {
@@ -248,6 +246,16 @@ export default {
 }
 
 .tag-link {
-    color: $shadow-strong;
+    color: $shadow;
+    padding: .25rem;
+    border-radius: .25rem;
+    box-shadow: 0 0 2px $shadow-weak;
+    font-size: .75rem;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+        color: $primary;
+    }
 }
 </style>