Added release page with photo viewer. Added photo count to database. Improved styling.

assets/components/home/home.vue

@@ -33,10 +33,17 @@
                         class="scene-link"
                     >
                         <img
-                            :src="`/${release.site.id}/${release.id}/0.jpg`"
-                            :alt="release.id"
+                            v-if="release.photos > 0"
+                            :src="`/${release.site.id}/${release.id}/1.jpg`"
+                            :alt="release.title"
                             class="scene-thumbnail"
                         >
+
+                        <div
+                            v-else
+                            :title="release.title"
+                            class="scene-thumbnail"
+                        >No thumbnail available</div>
                     </a>
                 </span>
 
@@ -112,7 +119,7 @@ export default {
 
 .scenes {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     grid-gap: 1rem;
 }
 
@@ -134,10 +141,15 @@ export default {
 .scene-thumbnail {
     width: 100%;
     height: 200px;
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    object-fit: cover;
     background-position: center;
     background-size: cover;
-    object-fit: cover;
+    background-color: $shadow-hint;
+    color: $shadow;
+    text-shadow: 1px 1px 0 $highlight;
 }
 
 .scene-row {
@@ -168,6 +180,7 @@ export default {
 
 .scene-site {
     border-radius: 0 0 .25rem 0;
+    font-weight: bold;
 }
 
 .scene-date {
@@ -219,7 +232,7 @@ export default {
 }
 
 .scene-actor:not(:last-of-type)::after,
-.scene-tag:not(:last-of-type):after {
+.scene-tag:not(:last-child):after {
     content: ",";
 }