Refined network layout

assets/components/networks/network.vue

@@ -152,18 +152,18 @@ export default {
 }
 
 .sidebar {
+    background: $profile;
     height: 100%;
     width: 18rem;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    border-right: solid 1px $shadow-hint;
     color: $text-contrast;
     overflow: hidden;
 }
 
 .sidebar .title {
-    border-bottom: solid 1px $shadow-hint;
+    border-bottom: solid 1px $highlight-hint;
 }
 
 .logo {
@@ -189,10 +189,14 @@ export default {
 
 .sites.compact {
     display: none;
+    background: $profile;
+    grid-row: 1;
 }
 
 .expand {
     display: none;
+    color: $text-contrast;
+    background: $profile;
     padding: .5rem;
     text-align: center;
     cursor: pointer;

assets/components/sites/sites.vue

@@ -1,5 +1,18 @@
 <template>
     <ul class="nolist sites">
+        <a
+            v-if="network"
+            :href="network.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="tile"
+        >
+            <img
+                :src="`/img/logos/${network.slug}/network.png`"
+                class="logo"
+            >
+        </a>
+
         <li
             v-for="site in sites"
             :key="`site-${site.id}`"
@@ -17,6 +30,10 @@ export default {
         SiteTile,
     },
     props: {
+        network: {
+            type: Object,
+            default: null,
+        },
         sites: {
             type: Array,
             default: () => [],
@@ -49,4 +66,8 @@ export default {
         grid-template-columns: repeat(2, .5fr);
     }
 }
+
+.logo {
+    width: 15rem;
+}
 </style>

assets/components/tile/network.vue

@@ -4,11 +4,11 @@
         :title="network.name"
         class="tile"
     >
-        <object
+        <img
-            :data="`/img/logos/${network.slug}/network.png`"
+            :src="`/img/logos/${network.slug}/network.png`"
-            type="image/png"
+            :alt="network.name"
             class="logo"
-        >{{ network.name }}</object>
+        >
     </a>
 </template>
 

public/css/style.css

@@ -636,6 +636,9 @@
 .sites.expanded[data-v-7bebaa3e] {
     grid-template-columns: repeat(2, 0.5fr);
 }
+.logo[data-v-7bebaa3e] {
+  width: 15rem;
+}
 
 /* $primary: #ff886c; */
 @media (max-width: 1200px) {
@@ -664,6 +667,7 @@
   padding: 1rem;
 }
 .sidebar[data-v-e2e12602] {
+  background: #222;
   height: 100%;
   width: 18rem;
   display: -webkit-box;
@@ -672,12 +676,11 @@
   -webkit-box-direction: normal;
           flex-direction: column;
   flex-shrink: 0;
-  border-right: solid 1px rgba(0, 0, 0, 0.1);
   color: #fff;
   overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
-  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
 }
 .logo[data-v-e2e12602] {
   width: 100%;
@@ -705,9 +708,13 @@
 }
 .sites.compact[data-v-e2e12602] {
   display: none;
+  background: #222;
+  grid-row: 1;
 }
 .expand[data-v-e2e12602] {
   display: none;
+  color: #fff;
+  background: #222;
   padding: .5rem;
   text-align: center;
   cursor: pointer;