ops: dossiers-ngi cascade bar dates, center/mobile, soft refresh; serve /cascade

sites/dossiers.ngi.hacktivism.ch/_cascade/bar.css

@@ -2,8 +2,13 @@
   position: sticky;
   top: 0;
   z-index: 10;
-  margin: -1.5rem -1.5rem 1rem;
-  padding: 0.55rem 1.5rem 0.65rem;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100vw;
+  max-width: 100vw;
+  margin: -1.25rem calc(50% - 50vw) 1rem;
+  padding: 0.55rem 0.75rem 0.65rem;
   background: #10141a;
   border-bottom: 1px solid #243040;
   color: #c8d0d8;
@@ -11,9 +16,16 @@
   font-size: 12px;
   line-height: 1.45;
 }
+.cascade-tree {
+  width: 100%;
+  max-width: 45em;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
 .cascade-tree-lines {
   white-space: pre;
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 a.cascade-tree-row {
   display: block;
@@ -34,9 +46,13 @@ a.cascade-tree-row.is-active {
 a.cascade-tree-row.is-active:hover {
   text-decoration: none;
 }
-.cascade-bar code { color: inherit; font-size: inherit; }
+.cascade-bar code {
+  color: inherit;
+  font-size: inherit;
+}
 .cascade-bar .tip {
   color: #8a96a3;
+  white-space: pre-wrap;
 }
 .cascade-bar .cascade-default {
   color: #6a9080;
@@ -46,6 +62,17 @@ a.cascade-tree-row.is-active:hover {
   color: #6a7888;
   font-size: 11px;
 }
-.cascade-bar .tip {
-  white-space: pre-wrap;
+
+@media (max-width: 40em) {
+  .cascade-bar {
+    margin-top: -1rem;
+    padding: 0.45rem 0.5rem 0.55rem;
+    font-size: 11px;
+  }
+  .cascade-tree {
+    max-width: 100%;
+  }
+  .cascade-timing {
+    font-size: 10px;
+  }
 }