Added expand/collapse to compact network sites.

assets/components/networks/network.vue

@@ -56,6 +56,12 @@
             </div>
 
             <div class="content-inner">
+                <span
+                    v-show="expanded"
+                    class="expand collapse-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Sites
                     v-if="sites.length"
                     :sites="sites"
@@ -63,6 +69,18 @@
                     :class="{ expanded }"
                 />
 
+                <span
+                    v-show="!expanded"
+                    class="expand expand-sites noselect"
+                    @click="expanded = true"
+                ><Icon icon="arrow-down3" /></span>
+
+                <span
+                    v-show="expanded"
+                    class="expand expand-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Releases :releases="releases" />
             </div>
         </div>
@@ -189,23 +207,60 @@ export default {
     }
 }
 
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem 0 0 0;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        margin: 0 .5rem;
+    }
+}
+
+.expand-sites {
+    color: $shadow;
+    display: none;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        color: $shadow-strong;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.collapse-sites {
+    background: $profile;
+    color: $highlight;
+
+    .icon {
+        fill: $highlight;
+    }
+
+    &:hover {
+        color: $text-contrast;
+
+        .icon {
+            fill: $text-contrast;
+        }
+    }
+}
+
 .sites.compact {
     display: none;
     background: $profile;
     grid-row: 1;
 }
 
-.expand {
-    display: none;
-    color: $text-contrast;
-    background: $profile;
-    padding: .5rem;
-    text-align: center;
-    cursor: pointer;
-    font-size: .9rem;
-    font-weight: bold;
-}
-
 @media(max-width: $breakpoint3) {
     .header,
     .header.hideable {
@@ -220,8 +275,8 @@ export default {
         }
     }
 
-    .expand {
+    .expand-sites {
-        display: block;
+        display: flex;
     }
 
     .network {

assets/components/sites/sites.vue

@@ -1,19 +1,6 @@
 <template>
     <div class="sites">
         <ul class="nolist tiles">
-            <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}`"
@@ -67,7 +54,7 @@ export default {
 
     &.expanded {
         .tiles {
-            grid-template-columns: repeat(2, .5fr);
+            grid-template-columns: repeat(auto-fit, minmax(15rem, .5fr));
         }
     }
 }
@@ -81,8 +68,4 @@ export default {
     grid-template-columns: 1fr;
     overflow-y: auto;
 }
-
-.logo {
-    width: 15rem;
-}
 </style>

assets/img/arrow-down.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-down</title>
+<path d="M16 5.5l-3-3-5 5-5-5-3 3 8 8z"></path>
+</svg>

assets/img/arrow-down15.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-down15</title>
+<path d="M0 4l8 8 8-8-8 4z"></path>
+</svg>

assets/img/arrow-down16.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-down16</title>
+<path d="M5 0h6v1h-6zM5 2h6v1h-6zM5 4h6v1h-6zM8 16l7-7h-4v-3h-6v3h-4z"></path>
+</svg>

assets/img/arrow-down3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-down3</title>
+<path d="M16 5.5l-1.5-1.5-6.5 6.5-6.5-6.5-1.5 1.5 8 8 8-8z"></path>
+</svg>

assets/img/arrow-down5.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-down5</title>
+<path d="M3.5 6l4.5 4.5 4.5-4.5h-9z"></path>
+</svg>

assets/img/arrow-left.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-left</title>
+<path d="M10.5 16l3-3-5-5 5-5-3-3-8 8z"></path>
+</svg>

assets/img/arrow-left15.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-left15</title>
+<path d="M12 0l-8 8 8 8-4-8z"></path>
+</svg>

assets/img/arrow-left16.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-left16</title>
+<path d="M15 5h1v6h-1zM13 5h1v6h-1zM11 5h1v6h-1zM0 8l7-7v4h3v6h-3v4z"></path>
+</svg>

assets/img/arrow-left3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-left3</title>
+<path d="M10.5 16l1.5-1.5-6.5-6.5 6.5-6.5-1.5-1.5-8 8 8 8z"></path>
+</svg>

assets/img/arrow-left5.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-left5</title>
+<path d="M10 3.5l-4.5 4.5 4.5 4.5v-9z"></path>
+</svg>

assets/img/arrow-right.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-right</title>
+<path d="M5.5 0l-3 3 5 5-5 5 3 3 8-8z"></path>
+</svg>

assets/img/arrow-right15.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-right15</title>
+<path d="M4 16l8-8-8-8 4 8z"></path>
+</svg>

assets/img/arrow-right16.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-right16</title>
+<path d="M0 5h1v6h-1zM2 5h1v6h-1zM4 5h1v6h-1zM16 8l-7-7v4h-3v6h3v4z"></path>
+</svg>

assets/img/arrow-right3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-right3</title>
+<path d="M5.5 0l-1.5 1.5 6.5 6.5-6.5 6.5 1.5 1.5 8-8-8-8z"></path>
+</svg>

assets/img/arrow-right5.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-right5</title>
+<path d="M6 12.5l4.5-4.5-4.5-4.5v9z"></path>
+</svg>

assets/img/arrow-up.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-up</title>
+<path d="M0 10.5l3 3 5-5 5 5 3-3-8-8z"></path>
+</svg>

assets/img/arrow-up15.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-up15</title>
+<path d="M16 12l-8-8-8 8 8-4z"></path>
+</svg>

assets/img/arrow-up16.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-up16</title>
+<path d="M5 15h6v1h-6zM5 13h6v1h-6zM5 11h6v1h-6zM8 0l7 7h-4v3h-6v-3h-4z"></path>
+</svg>

assets/img/arrow-up3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-up3</title>
+<path d="M0 10.5l1.5 1.5 6.5-6.5 6.5 6.5 1.5-1.5-8-8-8 8z"></path>
+</svg>

assets/img/arrow-up5.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>arrow-up5</title>
+<path d="M12.5 10l-4.5-4.5-4.5 4.5h9z"></path>
+</svg>

assets/img/circle-down2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>circle-down2</title>
+<path d="M16 8c0-4.418-3.582-8-8-8s-8 3.582-8 8 3.582 8 8 8 8-3.582 8-8zM1.5 8c0-3.59 2.91-6.5 6.5-6.5s6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5z"></path>
+<path d="M4.957 5.543l-1.414 1.414 4.457 4.457 4.457-4.457-1.414-1.414-3.043 3.043z"></path>
+</svg>

assets/img/circle-left2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>circle-left2</title>
+<path d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zM8 1.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5z"></path>
+<path d="M10.457 4.957l-1.414-1.414-4.457 4.457 4.457 4.457 1.414-1.414-3.043-3.043z"></path>
+</svg>

assets/img/circle-right2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>circle-right2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"></path>
+<path d="M5.543 11.043l1.414 1.414 4.457-4.457-4.457-4.457-1.414 1.414 3.043 3.043z"></path>
+</svg>

assets/img/circle-up2.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>circle-up2</title>
+<path d="M0 8c0 4.418 3.582 8 8 8s8-3.582 8-8-3.582-8-8-8-8 3.582-8 8zM14.5 8c0 3.59-2.91 6.5-6.5 6.5s-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5z"></path>
+<path d="M11.043 10.457l1.414-1.414-4.457-4.457-4.457 4.457 1.414 1.414 3.043-3.043z"></path>
+</svg>

public/css/style.css

@@ -665,7 +665,7 @@
       margin: 0 1rem 0 0;
 }
 .sites.expanded .tiles[data-v-7bebaa3e] {
-    grid-template-columns: repeat(2, 0.5fr);
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 0.5fr));
 }
 .tiles[data-v-7bebaa3e] {
   display: grid;
@@ -677,9 +677,6 @@
   grid-template-columns: 1fr;
   overflow-y: auto;
 }
-.logo[data-v-7bebaa3e] {
-  width: 15rem;
-}
 
 /* $primary: #ff886c; */
 /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
@@ -755,21 +752,52 @@
     height: 100%;
     padding: .5rem;
 }
+.expand[data-v-e2e12602] {
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+          align-items: center;
+  padding: .5rem 0 0 0;
+  font-weight: bold;
+  font-size: .9rem;
+  cursor: pointer;
+}
+.expand .icon[data-v-e2e12602] {
+    margin: 0 .5rem;
+}
+.expand-sites[data-v-e2e12602] {
+  color: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+.expand-sites .icon[data-v-e2e12602] {
+    fill: rgba(0, 0, 0, 0.5);
+}
+.expand-sites[data-v-e2e12602]:hover {
+    color: rgba(0, 0, 0, 0.7);
+}
+.expand-sites:hover .icon[data-v-e2e12602] {
+      fill: rgba(0, 0, 0, 0.7);
+}
+.collapse-sites[data-v-e2e12602] {
+  background: #222;
+  color: rgba(255, 255, 255, 0.5);
+}
+.collapse-sites .icon[data-v-e2e12602] {
+    fill: rgba(255, 255, 255, 0.5);
+}
+.collapse-sites[data-v-e2e12602]:hover {
+    color: #fff;
+}
+.collapse-sites:hover .icon[data-v-e2e12602] {
+      fill: #fff;
+}
 .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;
-  font-size: .9rem;
-  font-weight: bold;
-}
 @media (max-width: 1200px) {
 .header[data-v-e2e12602],
   .header.hideable[data-v-e2e12602] {
@@ -783,8 +811,9 @@
 .sites.compact.expanded[data-v-e2e12602] {
       display: grid;
 }
-.expand[data-v-e2e12602] {
+.expand-sites[data-v-e2e12602] {
-    display: block;
+    display: -webkit-box;
+    display: flex;
 }
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;