Improved site and network pages. Fixed various issues.

assets/components/network/network.vue

@@ -3,46 +3,35 @@
         v-if="network"
         class="content network"
     >
-        <div class="header">
-            <span class="intro">
-                <h2 class="title">
-                    {{ network.name }}
-                    <a
-                        v-if="network.url"
-                        :href="network.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        <Icon
-                            icon="new-tab"
-                            class="icon-href"
-                        />
-                    </a>
-                </h2>
-
-                <span class="description">{{ network.description }}</span>
-            </span>
-
-            <a
-                v-if="network.url"
-                :href="network.url"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                <object
-                    :data="`/img/logos/${network.slug}/network.png`"
-                    type="image/png"
-                    class="logo"
-                >{{ network.name }}</object>
-            </a>
-        </div>
-
         <div class="content-inner">
+            <div class="header">
+                <a
+                    v-if="network.url"
+                    :href="network.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="title"
+                >
+                    <object
+                        :data="`/img/logos/${network.slug}/network.png`"
+                        type="image/png"
+                        class="logo"
+                    ><h2>{{ network.name }}</h2></object>
+
+                    <Icon
+                        icon="new-tab"
+                        class="icon-href"
+                    />
+                </a>
+
+                <p class="description">{{ network.description }}</p>
+            </div>
+
             <h3 class="heading">Sites</h3>
 
             <ul class="nolist sites">
                 <li
-                    v-for="site in network.sites"
+                    v-for="site in sites"
                     :key="`site-${site.id}`"
                 >
                     <SiteTile :site="site" />
@@ -71,6 +60,8 @@ async function mounted() {
     [this.network] = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
     this.releases = await this.$store.dispatch('fetchNetworkReleases', this.$route.params.networkSlug);
 
+    this.sites = this.network.sites.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB));
+
     this.pageTitle = this.network.name;
 }
 
@@ -82,6 +73,7 @@ export default {
     data() {
         return {
             network: null,
+            sites: null,
             releases: null,
             pageTitle: null,
         };
@@ -95,31 +87,42 @@ export default {
 
 .header {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    padding: 1rem;
+    align-items: top;
+    margin: 0 0 2rem 0;
 }
 
 .title {
-    display: inline-block;
-    margin: 0 .5rem 0 0;
-}
+    display: inline-flex;
+    align-items: top;
+    margin: 0 1rem 0 0;
 
-.heading {
-    padding: 0;
-    margin: 0 0 1rem 0;
+    &:hover .icon {
+        fill: $primary;
+    }
 }
 
 .logo {
-    height: 3rem;
+    width: 20rem;
+    max-height: 8rem;
+    object-fit: contain;
+    margin: 0 .5rem 0 0;
 }
 
 .sites {
     display: grid;
     grid-gap: 1rem;
-    margin: 0 0 1rem 0;
+    margin: 0 0 2rem 0;
 }
 
 .sites {
     grid-template-columns: repeat(auto-fit, 15rem);
 }
+
+@media(max-width: $breakpoint) {
+    .sites {
+        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    }
+}
 </style>