Improving network overview. Added DDF logos and tag posters.

assets/components/networks/network.vue

@@ -1,12 +1,12 @@
 <template>
     <div
         v-if="network"
-        class="content network"
+        class="content"
     >
         <FilterBar :fetch-releases="fetchNetwork" />
 
-        <div class="content-inner">
-            <div class="header">
+        <div class="network">
+            <div class="sidebar">
                 <a
                     :href="network.url"
                     target="_blank"
@@ -17,34 +17,30 @@
                         :src="`/img/logos/${network.slug}/network.png`"
                         class="logo"
                     >
-
-                    <Icon
-                        v-if="network.url"
-                        icon="new-tab"
-                        class="icon-href"
-                    />
                 </a>
 
-                <p class="description">{{ network.description }}</p>
+                <p
+                    v-if="network.description"
+                    class="description"
+                >{{ network.description }}</p>
+
+                <template v-if="sites.length">
+                    <ul class="nolist sites">
+                        <li
+                            v-for="site in sites"
+                            :key="`site-${site.id}`"
+                        >
+                            <SiteTile :site="site" />
+                        </li>
+                    </ul>
+                </template>
             </div>
 
-            <template v-if="sites.length">
-                <h3 class="heading">Sites</h3>
-
-                <ul class="nolist sites">
-                    <li
-                        v-for="site in sites"
-                        :key="`site-${site.id}`"
-                    >
-                        <SiteTile :site="site" />
-                    </li>
-                </ul>
-            </template>
-
-            <Releases
-                :releases="releases"
-                :context="network.name"
-            />
+            <div class="content-inner">
+                <Releases
+                    :releases="releases"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -93,44 +89,57 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.header {
+.network {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: top;
-    margin: 0 0 2rem 0;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: stretch;
+    overflow-y: auto;
 }
 
-.title {
-    display: inline-flex;
-    align-items: top;
-    margin: 0 1rem 0 0;
-
-    &:hover .icon {
-        fill: $primary;
-    }
+.sidebar {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: $profile;
+    color: $text-contrast;
+    width: 25rem;
+    overflow: hidden;
 }
 
 .logo {
-    width: 20rem;
+    width: 100%;
     max-height: 8rem;
     object-fit: contain;
-    margin: 0 .5rem 0 0;
+    box-sizing: border-box;
+    padding: 1rem 2rem;
+    border-bottom: solid 1px $highlight-hint;
+    margin: 0;
+    filter: $logo-highlight;
 }
 
 .sites {
     display: grid;
     grid-gap: 1rem;
-    margin: 0 0 2rem 0;
-}
-
-.sites {
-    grid-template-columns: repeat(auto-fit, 15rem);
+    padding: 1rem;
+    margin: 0;
+    grid-template-columns: repeat(2, .5fr);
+    overflow-y: auto;
 }
 
 @media(max-width: $breakpoint) {
+    .network {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        height: 20rem;
+        overflow: hidden;
+    }
+
     .sites {
-        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
+        overflow-y: auto;
     }
 }
 </style>