Improving network overview. Added DDF logos and tag posters.

public/css/style.css

@@ -632,44 +632,63 @@
 }
 
 /* $primary: #ff886c; */
-.header[data-v-e2e12602] {
+.network[data-v-e2e12602] {
   display: -webkit-box;
   display: flex;
-  flex-wrap: wrap;
-  -webkit-box-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: top;
-          align-items: top;
-  margin: 0 0 2rem 0;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+          flex-direction: row;
+  -webkit-box-flex: 1;
+          flex-grow: 1;
+  -webkit-box-pack: stretch;
+          justify-content: stretch;
+  overflow-y: auto;
 }
-.title[data-v-e2e12602] {
-  display: -webkit-inline-box;
-  display: inline-flex;
-  -webkit-box-align: top;
-          align-items: top;
-  margin: 0 1rem 0 0;
-}
-.title:hover .icon[data-v-e2e12602] {
-    fill: #ff6c88;
+.sidebar[data-v-e2e12602] {
+  height: 100%;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  background: #222;
+  color: #fff;
+  width: 25rem;
+  overflow: hidden;
 }
 .logo[data-v-e2e12602] {
-  width: 20rem;
+  width: 100%;
   max-height: 8rem;
   -o-object-fit: contain;
      object-fit: contain;
-  margin: 0 .5rem 0 0;
+  box-sizing: border-box;
+  padding: 1rem 2rem;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+  margin: 0;
+  -webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
+          filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
 }
 .sites[data-v-e2e12602] {
   display: grid;
   grid-gap: 1rem;
-  margin: 0 0 2rem 0;
-}
-.sites[data-v-e2e12602] {
-  grid-template-columns: repeat(auto-fit, 15rem);
+  padding: 1rem;
+  margin: 0;
+  grid-template-columns: repeat(2, 0.5fr);
+  overflow-y: auto;
 }
 @media (max-width: 720px) {
+.network[data-v-e2e12602] {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+}
+.sidebar[data-v-e2e12602] {
+    height: 20rem;
+    overflow: hidden;
+}
 .sites[data-v-e2e12602] {
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 0.5fr));
+    overflow-y: auto;
 }
 }