From 419e098282425b7c834c2aa1fa57ba2e2d3bc52c Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Thu, 9 Jan 2020 02:40:02 +0100
Subject: [PATCH] Added expand/collapse to compact network sites.

---
 assets/components/networks/network.vue | 81 +++++++++++++++++++++-----
 assets/components/sites/sites.vue      | 19 +-----
 assets/img/arrow-down.svg              |  5 ++
 assets/img/arrow-down15.svg            |  5 ++
 assets/img/arrow-down16.svg            |  5 ++
 assets/img/arrow-down3.svg             |  5 ++
 assets/img/arrow-down5.svg             |  5 ++
 assets/img/arrow-left.svg              |  5 ++
 assets/img/arrow-left15.svg            |  5 ++
 assets/img/arrow-left16.svg            |  5 ++
 assets/img/arrow-left3.svg             |  5 ++
 assets/img/arrow-left5.svg             |  5 ++
 assets/img/arrow-right.svg             |  5 ++
 assets/img/arrow-right15.svg           |  5 ++
 assets/img/arrow-right16.svg           |  5 ++
 assets/img/arrow-right3.svg            |  5 ++
 assets/img/arrow-right5.svg            |  5 ++
 assets/img/arrow-up.svg                |  5 ++
 assets/img/arrow-up15.svg              |  5 ++
 assets/img/arrow-up16.svg              |  5 ++
 assets/img/arrow-up3.svg               |  5 ++
 assets/img/arrow-up5.svg               |  5 ++
 assets/img/circle-down2.svg            |  6 ++
 assets/img/circle-left2.svg            |  6 ++
 assets/img/circle-right2.svg           |  6 ++
 assets/img/circle-up2.svg              |  6 ++
 public/css/style.css                   | 61 ++++++++++++++-----
 27 files changed, 238 insertions(+), 47 deletions(-)
 create mode 100644 assets/img/arrow-down.svg
 create mode 100644 assets/img/arrow-down15.svg
 create mode 100644 assets/img/arrow-down16.svg
 create mode 100644 assets/img/arrow-down3.svg
 create mode 100644 assets/img/arrow-down5.svg
 create mode 100644 assets/img/arrow-left.svg
 create mode 100644 assets/img/arrow-left15.svg
 create mode 100644 assets/img/arrow-left16.svg
 create mode 100644 assets/img/arrow-left3.svg
 create mode 100644 assets/img/arrow-left5.svg
 create mode 100644 assets/img/arrow-right.svg
 create mode 100644 assets/img/arrow-right15.svg
 create mode 100644 assets/img/arrow-right16.svg
 create mode 100644 assets/img/arrow-right3.svg
 create mode 100644 assets/img/arrow-right5.svg
 create mode 100644 assets/img/arrow-up.svg
 create mode 100644 assets/img/arrow-up15.svg
 create mode 100644 assets/img/arrow-up16.svg
 create mode 100644 assets/img/arrow-up3.svg
 create mode 100644 assets/img/arrow-up5.svg
 create mode 100644 assets/img/circle-down2.svg
 create mode 100644 assets/img/circle-left2.svg
 create mode 100644 assets/img/circle-right2.svg
 create mode 100644 assets/img/circle-up2.svg

diff --git a/assets/components/networks/network.vue b/assets/components/networks/network.vue
index db0496c1..09c943dd 100644
--- a/assets/components/networks/network.vue
+++ b/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 {
-        display: block;
+    .expand-sites {
+        display: flex;
     }
 
     .network {
diff --git a/assets/components/sites/sites.vue b/assets/components/sites/sites.vue
index 6d335090..5d60ff6d 100644
--- a/assets/components/sites/sites.vue
+++ b/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>
diff --git a/assets/img/arrow-down.svg b/assets/img/arrow-down.svg
new file mode 100644
index 00000000..6a74f804
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-down15.svg b/assets/img/arrow-down15.svg
new file mode 100644
index 00000000..b07a9fbc
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-down16.svg b/assets/img/arrow-down16.svg
new file mode 100644
index 00000000..26974799
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-down3.svg b/assets/img/arrow-down3.svg
new file mode 100644
index 00000000..f52809e9
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-down5.svg b/assets/img/arrow-down5.svg
new file mode 100644
index 00000000..404fc6ff
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-left.svg b/assets/img/arrow-left.svg
new file mode 100644
index 00000000..6b54573c
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-left15.svg b/assets/img/arrow-left15.svg
new file mode 100644
index 00000000..74c0b81c
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-left16.svg b/assets/img/arrow-left16.svg
new file mode 100644
index 00000000..27b87bca
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-left3.svg b/assets/img/arrow-left3.svg
new file mode 100644
index 00000000..132a552b
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-left5.svg b/assets/img/arrow-left5.svg
new file mode 100644
index 00000000..400e3f70
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-right.svg b/assets/img/arrow-right.svg
new file mode 100644
index 00000000..f855ab39
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-right15.svg b/assets/img/arrow-right15.svg
new file mode 100644
index 00000000..093b1388
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-right16.svg b/assets/img/arrow-right16.svg
new file mode 100644
index 00000000..3b0ed7e5
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-right3.svg b/assets/img/arrow-right3.svg
new file mode 100644
index 00000000..5ae1635a
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-right5.svg b/assets/img/arrow-right5.svg
new file mode 100644
index 00000000..e519fd6e
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-up.svg b/assets/img/arrow-up.svg
new file mode 100644
index 00000000..5d6ea727
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-up15.svg b/assets/img/arrow-up15.svg
new file mode 100644
index 00000000..b9125cbe
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-up16.svg b/assets/img/arrow-up16.svg
new file mode 100644
index 00000000..0837c771
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-up3.svg b/assets/img/arrow-up3.svg
new file mode 100644
index 00000000..c0ca340c
--- /dev/null
+++ b/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>
diff --git a/assets/img/arrow-up5.svg b/assets/img/arrow-up5.svg
new file mode 100644
index 00000000..02f5fb37
--- /dev/null
+++ b/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>
diff --git a/assets/img/circle-down2.svg b/assets/img/circle-down2.svg
new file mode 100644
index 00000000..ba8e5a46
--- /dev/null
+++ b/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>
diff --git a/assets/img/circle-left2.svg b/assets/img/circle-left2.svg
new file mode 100644
index 00000000..e9fbeda3
--- /dev/null
+++ b/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>
diff --git a/assets/img/circle-right2.svg b/assets/img/circle-right2.svg
new file mode 100644
index 00000000..7d320d88
--- /dev/null
+++ b/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>
diff --git a/assets/img/circle-up2.svg b/assets/img/circle-up2.svg
new file mode 100644
index 00000000..0a58bb95
--- /dev/null
+++ b/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>
diff --git a/public/css/style.css b/public/css/style.css
index 368f8e93..e0ff7c25 100644
--- a/public/css/style.css
+++ b/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] {
-    display: block;
+.expand-sites[data-v-e2e12602] {
+    display: -webkit-box;
+    display: flex;
 }
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;