Moved icons into network directories. Improved network logo handling.

assets/components/network/network.vue

@@ -8,6 +8,7 @@
                 <h2 class="title">
                     {{ network.name }}
                     <a
+                        v-if="network.url"
                         :href="network.url"
                         target="_blank"
                         rel="noopener noreferrer"
@@ -23,14 +24,16 @@
             </span>
 
             <a
+                v-if="network.url"
                 :href="network.url"
                 target="_blank"
                 rel="noopener noreferrer"
             >
-                <img
-                    :src="`/img/networks/${network.slug}.png`"
+                <object
+                    :data="`/img/logos/${network.slug}/network.png`"
+                    type="image/png"
                     class="logo"
-                >
+                >{{ network.name }}</object>
             </a>
         </div>
 

assets/components/release/release.vue

@@ -42,8 +42,6 @@
             >
                 <a
                     :href="`/actor/${actor.slug}`"
-                    target="_blank"
-                    rel="noopener noreferrer"
                     class="actor-link"
                 >{{ actor.name }}</a>
             </li>
@@ -127,8 +125,6 @@
             >
                 <a
                     :href="`/tag/${tag.slug}`"
-                    target="_blank"
-                    rel="noopener noreferrer"
                     class="tag-link"
                 >{{ tag.name }}</a>
             </li>

assets/components/tile/site.vue

@@ -3,13 +3,11 @@
         :href="`/site/${site.slug}`"
         class="tile"
     >
-        <h3 class="title">
-            <object
-                :data="`/img/sites/${site.slug}.png`"
-                type="image/png"
-                class="logo"
-            >{{ site.name }}</object>
-        </h3>
+        <object
+            :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
+            type="image/png"
+            class="logo"
+        >{{ site.name }}</object>
     </a>
 </template>
 
@@ -44,9 +42,15 @@ export default {
 }
 
 .logo {
+    color: $text;
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 4rem;
     object-fit: contain;
+    font-size: 1rem;
+    font-weight: bold;
 }
 
 .title {
@@ -55,6 +59,5 @@ export default {
     display: flex;
     align-items: center;
     margin: 0;
-    font-size: 1rem;
 }
 </style>

public/css/style.css

@@ -242,10 +242,16 @@
   text-decoration: none;
 }
 .logo[data-v-f4958086] {
+  color: #222;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 4rem;
   -o-object-fit: contain;
      object-fit: contain;
+  font-size: 1rem;
+  font-weight: bold;
 }
 .title[data-v-f4958086] {
   color: #222;
@@ -253,7 +259,6 @@
   display: flex;
   align-items: center;
   margin: 0;
-  font-size: 1rem;
 }
 
 /* $primary: #ff886c; */

src/networks.js

@@ -22,6 +22,13 @@ async function curateNetwork(network) {
             url: site.url,
             description: site.description,
             slug: site.slug,
+            network: {
+                id: network.id,
+                name: network.name,
+                url: network.url,
+                description: network.description,
+                slug: network.slug,
+            },
         })),
         studios: studios.map(studio => ({
             id: studio.id,