Restored old release tile layout.

assets/components/tile/release.vue

@@ -1,10 +1,10 @@
 <template>
     <div
         :id="`${release.type}-${release.id}`"
+        :class="{ [release.type]: true }"
         class="tile"
     >
-        <div class="scene">
-            <div class="poster">
+        <span class="poster">
             <span class="details">
                 <router-link
                     v-if="release.site && release.site.independent"
@@ -44,7 +44,7 @@
                     v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
                     :title="release.url && `View scene on ${release.site.name}`"
                     :href="release.url"
-                        :class="{ upcoming: isUpcoming, new: release.isNew }"
+                    :class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="date"
@@ -95,7 +95,7 @@
                     class="thumbnail"
                 >No thumbnail available</div>
             </a>
-            </div>
+        </span>
 
         <div class="info">
             <a
@@ -148,7 +148,6 @@
             </ul>
         </div>
     </div>
-    </div>
 </template>
 
 <script>
@@ -166,15 +165,6 @@ export default {
             type: String,
             default: null,
         },
-        index: {
-            type: Number,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            isUpcoming: this.isAfter(this.release.date, new Date()),
-        };
     },
     computed: {
         sfw,
@@ -186,38 +176,23 @@ export default {
 @import 'theme';
 
 .tile {
-    width: 100%;
-    position: relative;
-    background: var(--background);
-    box-shadow: 0 0 3px var(--shadow-weak);
-
-    &::before {
-        content: '';
-        display: inline-block;
-        padding: 45%;
-    }
-}
-
-.scene {
-    width: 100%;
-    height: 100%;
+    background: $background;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
+    padding: 0 0 .5rem 0;
     overflow: hidden;
+    box-shadow: 0 0 3px $shadow-weak;
+    height: 100%;
 }
 
 .poster {
-    flex-grow: 1;
-    height: 0;
     position: relative;
+    margin: 0 0 .5rem 0;
 }
 
 .covers {
-    background: var(--profile);
+    background: $profile;
     display: flex;
 
     .cover {
@@ -227,15 +202,16 @@ export default {
 
 .thumbnail {
     width: 100%;
-    height: 100%;
+    height: 14rem;
     display: flex;
     justify-content: center;
     align-items: center;
     object-fit: cover;
     background-position: center;
     background-size: cover;
-    background-color: var(--darken-hint);
-    color: var(--shadow);
+    background-color: $shadow-hint;
+    color: $shadow;
+    text-shadow: 1px 1px 0 $highlight;
 }
 
 .row {
@@ -262,10 +238,10 @@ export default {
 
 .site,
 .date {
-    color: var(--text-light);
+    color: $text-contrast;
     display: flex;
     align-items: center;
-    background: var(--darken);
+    background: $shadow;
     position: relative;
     font-size: .8rem;
     padding: .25rem;
@@ -275,7 +251,7 @@ export default {
 .date {
     &.upcoming:before {
         content: '';
-        background: var(--primary);
+        background: $primary;
         width: .5rem;
         display: inline-block;
         position: absolute;
@@ -295,14 +271,14 @@ export default {
 
 .site-link {
     display: flex;
-    color: var(--text-light);
+    color: $text-contrast;
     text-decoration: none;
 }
 
 .info {
     display: flex;
     flex-direction: column;
-    padding: .5rem 0;
+    flex-grow: 1;
 }
 
 .link {
@@ -311,7 +287,7 @@ export default {
 
 .title {
     margin: 0 .25rem .25rem 0;
-    color: var(--text);
+    color: $text;
     max-height: 2.75rem;
     font-size: 1rem;
     line-height: 1.5;
@@ -359,26 +335,26 @@ export default {
     text-decoration: none;
 
     &:hover {
-        color: var(--primary);
+        color: $primary;
     }
 }
 
 .actor-link {
-    color: var(--link);
+    color: $link;
 }
 
 .tag-link {
-    color: var(--shadow);
+    color: $shadow;
     display: inline-block;
     padding: .25rem;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
     line-height: 1;
-    border: solid 1px var(--shadow-hint);
+    border: solid 1px $shadow-hint;
 
     &:hover {
-        color: var(--primary);
+        color: $primary;
     }
 }
 </style>