Further network layout improvements.

assets/components/sites/site.vue

@@ -5,52 +5,42 @@
     >
         <FilterBar :fetch-releases="fetchSite" />
 
-        <div class="content-inner">
-            <div class="header">
-                <a
-                    v-if="site.url"
-                    :href="site.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="title"
+        <div class="header">
+            <a
+                v-if="site.url"
+                :href="site.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="title"
+            >
+                <img
+                    :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
+                    :title="site.name"
+                    :alt="site.name"
+                    class="logo"
                 >
-                    <object
-                        :data="`/img/logos/${site.network.slug}/${site.slug}.png`"
-                        :title="site.name"
-                        type="image/png"
-                        class="logo"
-                    ><h2>{{ site.name }}</h2></object>
+            </a>
 
-                    <Icon
-                        icon="new-tab"
-                        class="icon-href"
-                    />
-                </a>
-
-                <span class="link">
-                    <span class="networklogo-container">
-                        Part of
-                        <a
-                            :href="`/network/${site.network.slug}`"
-                            class="networklogo-link"
+            <span class="link">
+                <span class="networklogo-container">
+                    Part of
+                    <a
+                        :href="`/network/${site.network.slug}`"
+                        class="networklogo-link"
+                    >
+                        <img
+                            :src="`/img/logos/${site.network.slug}/network.png`"
+                            :title="site.network.name"
+                            :alt="site.network.name"
+                            class="logo"
                         >
-                            <object
-                                :data="`/img/logos/${site.network.slug}/network.png`"
-                                :title="site.network.name"
-                                type="image/png"
-                                class="networklogo"
-                            >{{ site.network.name }}</object>
-                        </a>
-                    </span>
+                    </a>
                 </span>
-            </div>
+            </span>
+        </div>
 
-            <p class="description">{{ site.description }}</p>
-
-            <Releases
-                :releases="releases"
-                :context="site.name"
-            />
+        <div class="content-inner">
+            <Releases :releases="releases" />
         </div>
     </div>
 </template>
@@ -93,19 +83,16 @@ export default {
 @import 'theme';
 
 .header {
+    background: $profile;
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
+    border-bottom: solid 1px $shadow-weak;
 }
 
 .title {
-    display: inline-flex;
-    align-items: top;
-    margin: 0 1rem 0 0;
-
-    &:hover .icon {
-        fill: $primary;
-    }
+    padding: 1rem;
 }
 
 .heading {
@@ -122,7 +109,7 @@ export default {
 
 .logo {
     width: 20rem;
-    max-height: 8rem;
+    max-height: 6rem;
     object-fit: contain;
     margin: 0 .5rem 1rem 0;
 }
@@ -132,16 +119,6 @@ export default {
     align-items: center;
 }
 
-.networklogo {
-    color: $text;
-    width: 15rem;
-    max-height: 6rem;
-    font-weight: bold;
-    object-fit: contain;
-    object-position: 100% 0;
-    margin: 0 0 0 .5rem;
-}
-
 .sites,
 .scenes {
     display: grid;

assets/components/sites/sites.vue

@@ -36,8 +36,7 @@ export default {
     grid-template-columns: 1fr;
     overflow-y: auto;
 
-    &.compact {
-        display: flex;
+    &.compact:not(.expanded) {
         overflow-x: auto;
 
         .tile {
@@ -45,5 +44,9 @@ export default {
             margin: 0 1rem 0 0;
         }
     }
+
+    &.expanded {
+        grid-template-columns: repeat(2, .5fr);
+    }
 }
 </style>