global: final snapshot and fixes before release

website/scripts/chart/index.js

@@ -403,7 +403,7 @@ export function createChart({ parent, brk, fitContent }) {
       if (!pane) return;
       if (this.isAllHidden(paneIndex)) {
         const chartHeight = ichart.chartElement().clientHeight;
-        pane.setStretchFactor(chartHeight > 0 ? 32 / (chartHeight - 32) : 0);
+        pane.setStretchFactor(chartHeight > 0 ? 48 / (chartHeight - 48) : 0);
       } else {
         pane.setStretchFactor(1);
       }
@@ -1445,7 +1445,7 @@ export function createChart({ parent, brk, fitContent }) {
 
   const lastTd = ichart
     .chartElement()
-    .querySelector("table > tr:last-child > td:nth-child(2)");
+    .querySelector("table > tr:last-child > td:last-child");
 
   const chart = {
     get panes() {
@@ -1474,9 +1474,6 @@ export function createChart({ parent, brk, fitContent }) {
         groups,
         id: "index",
       });
-      const sep = document.createElement("span");
-      sep.textContent = "|";
-      indexField.append(sep);
       if (lastTd) lastTd.append(indexField);
     },
 

website/scripts/utils/dom.js

@@ -308,6 +308,12 @@ export function createSelect({
       arrow.textContent = "↓";
       field.append(arrow);
     }
+
+    field.addEventListener("click", (e) => {
+      if (e.target !== select) {
+        select.showPicker();
+      }
+    });
   }
 
   return field;

website/styles/chart.css

@@ -1,4 +1,5 @@
 .chart {
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -138,6 +139,7 @@
       display: flex;
       flex-shrink: 0;
       gap: 0.375rem;
+      cursor: pointer;
     }
 
     table > tr {
@@ -203,15 +205,18 @@
 
     td:last-child > .field {
       position: absolute;
-      top: 0;
       left: 0;
-      right: 0;
       z-index: 50;
-      display: flex;
+      display: inline-flex;
       font-size: var(--font-size-xs);
+      align-items: center;
+    }
+
+    tr:not(:last-child) > td:last-child > .field {
+      top: 0;
+      right: 0;
       gap: 0.375rem;
       background-color: var(--background-color);
-      align-items: center;
       text-transform: uppercase;
       padding-left: 0.625rem;
       padding-top: 0.35rem;
@@ -232,10 +237,14 @@
       }
     }
 
+    tr:last-child > td:last-child > .field {
+      bottom: 2.125rem;
+    }
+
     button.capture {
       position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
+      top: -0.75rem;
+      right: -0.75rem;
       z-index: 50;
       font-size: var(--font-size-xs);
       line-height: var(--line-height-xs);

website/styles/elements.css

@@ -95,7 +95,6 @@ button {
 }
 
 h1 {
-  text-transform: uppercase;
   font-size: var(--font-size-xl);
   line-height: var(--line-height-xl);
   font-weight: 300;
@@ -242,7 +241,6 @@ summary {
   &::-webkit-details-marker {
     display: none;
   }
-
 }
 
 :is(a, button, summary) {

website/styles/fonts.css

@@ -14,8 +14,34 @@
   font-display: block;
 }
 
+@font-face {
+  font-family: Instrument;
+  src: url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: Instrument;
+  src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
+  font-style: italic;
+  font-display: block;
+}
+
+@font-face {
+  font-family: Satoshi;
+  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
+  font-weight: 100 900;
+  font-display: block;
+}
+
 html {
   font-family:
     "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 }
+
+h1 {
+  font-family:
+    Instrument, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+}

website/styles/panes/chart.css

@@ -44,14 +44,14 @@
     white-space: nowrap;
     overflow-x: auto;
     padding-bottom: 1rem;
-    margin-bottom: -1rem;
+    margin-bottom: -0.75rem;
     padding-left: var(--main-padding);
     margin-left: var(--negative-main-padding);
     padding-right: var(--main-padding);
     margin-right: var(--negative-main-padding);
 
     h1 {
-      font-size: 1.375rem;
+      font-size: 2rem;
       letter-spacing: 0.075rem;
       text-wrap: nowrap;
     }