website: redesign part 23

website_next/header/index.js

@@ -7,7 +7,7 @@ export function createHeader() {
   const cube = document.createElement("span");
 
   home.href = "/";
-  home.ariaLabel = "bitview home";
+  home.setAttribute("aria-label", "bitview home");
   cube.append(createCube());
   home.append(cube, "bitview");
 

website_next/learn/charts/format.js

@@ -5,7 +5,7 @@ const suffixes = ["M", "B", "T", "P", "E", "Z", "Y"];
  * @param {number} digits
  */
 function formatNumber(value, digits) {
-  return value.toLocaleString("en-us", {
+  return value.toLocaleString("en-US", {
     maximumFractionDigits: digits,
     minimumFractionDigits: digits,
   });

website_next/learn/charts/legend/index.js

@@ -5,7 +5,7 @@
 export function createLegend(chart) {
   const legend = document.createElement("figcaption");
   const header = document.createElement("header");
-  const title = document.createElement("span");
+  const title = document.createElement("h4");
   const separator = document.createElement("span");
   const unit = document.createElement("span");
   const time = document.createElement("time");

website_next/learn/charts/legend/style.css

@@ -10,6 +10,14 @@ main.learn {
         gap: 1rem;
       }
 
+      h4 {
+        margin: 0;
+        font-family: var(--font-mono);
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+
       time {
         color: var(--off-color);
       }
@@ -102,8 +110,17 @@ main.learn {
     }
 
     &:fullscreen {
-      figcaption menu {
+      figcaption {
-        padding-bottom: 0.5rem;
+        h4 {
+          color: var(--white);
+          font-family: var(--font-serif);
+          font-size: 2rem;
+          text-transform: none;
+        }
+
+        menu {
+          padding-bottom: 0.5rem;
+        }
       }
     }
 

website_next/learn/charts/scrubber/index.js

@@ -12,6 +12,15 @@ const dateFormat = new Intl.DateTimeFormat("en-US", {
   year: "numeric",
 });
 
+const markerRadiusPx = 4;
+
+/** @param {SVGSVGElement} svg */
+function getMarkerRadiusInViewBox(svg) {
+  const width = svg.getBoundingClientRect().width;
+
+  return width ? (markerRadiusPx * VIEWBOX_WIDTH) / width : markerRadiusPx;
+}
+
 /**
  * @param {ScrubberSeries} series
  * @param {number} ratio
@@ -114,13 +123,14 @@ export function createScrubber(svg, readout, highlight) {
     series = nextSeries;
     height = nextHeight;
     stepCount = Math.max(...series.map(({ points }) => points.length - 1));
+    const radius = getMarkerRadiusInViewBox(svg);
     markers = series.map(({ color }, index) => {
       const marker = createSvgElement("circle");
 
       marker.dataset.series = index.toString();
       marker.dataset.scrubber = "marker";
       marker.style.setProperty("--color", color);
-      marker.setAttribute("r", "3");
+      marker.setAttribute("r", radius.toString());
       highlight.addNode(marker, index);
 
       return marker;

website_next/learn/charts/style.css

@@ -52,6 +52,12 @@ main.learn {
       padding: 1rem;
       background: var(--black);
 
+      > div[data-chart="plot"] {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+      }
+
       svg {
         flex: 1;
         height: auto;

website_next/learn/style.css

@@ -86,98 +86,95 @@ main.learn {
       counter-increment: detail;
       scroll-margin-top: var(--offset);
     }
-  }
 
-  h1,
+    section[id] {
-  h2,
+      > h1,
-  h3 {
+      > h2,
-    line-height: 1;
+      > h3 {
+        position: sticky;
+        top: var(--offset);
+        line-height: 1;
+        background: var(--black);
 
-    a {
+        a {
-      position: relative;
+          position: relative;
-      display: inline-block;
+          display: inline-block;
-      color: var(--white);
+          color: var(--white);
-      text-decoration: none;
+          text-decoration: none;
 
-      &::before {
+          &::before {
-        position: absolute;
+            position: absolute;
-        top: 50%;
+            top: 50%;
-        right: 100%;
+            right: 100%;
-        translate: 0 -50%;
+            translate: 0 -50%;
-        opacity: 0;
+            opacity: 0;
-        user-select: none;
+            user-select: none;
-        text-decoration: none;
+            text-decoration: none;
+          }
+
+          &:hover::before {
+            opacity: 0.5;
+          }
+
+          &:hover {
+            text-decoration: underline;
+            text-decoration-thickness: 1px;
+            text-underline-offset: 0.125em;
+          }
+
+          &:active {
+            color: var(--orange);
+          }
+        }
       }
 
-      &:hover::before {
+      > h1 {
-        opacity: 0.5;
+        z-index: 3;
+        padding-bottom: var(--heading-padding-bottom);
+        border-bottom: 1px solid var(--gray);
+        font-size: 3rem;
+
+        a::before {
+          content: counter(theme, upper-roman) ". ";
+        }
       }
 
-      &:hover {
+      > h2 {
-        text-decoration: underline;
+        z-index: 2;
-        text-decoration-thickness: 1px;
+        padding-top: var(--topic-padding-top);
-        text-underline-offset: 0.125em;
+        padding-bottom: var(--heading-padding-bottom);
+        border-bottom: 1px dashed var(--gray);
+        font-size: var(--topic-font-size);
+
+        a::before {
+          content: counter(topic) ". ";
+        }
       }
 
-      &:active {
+      > h3 {
-        color: var(--orange);
+        z-index: 1;
+        padding-top: var(--detail-padding-top);
+        padding-bottom: var(--detail-padding-bottom);
+        border-bottom: 1px dotted var(--gray);
+        font-size: var(--detail-font-size);
+
+        a::before {
+          content: counter(detail, lower-alpha) ". ";
+        }
+      }
+
+      > p {
+        margin-top: 1rem;
+        color: var(--dark-white);
+        font-size: var(--font-size-sm);
+        line-height: var(--line-height-sm);
+      }
+
+      > figure {
+        margin-top: 2rem;
+        color: var(--gray);
+        font-size: var(--font-size-xs);
       }
     }
   }
-
-  h1,
-  h2,
-  h3 {
-    position: sticky;
-    top: var(--offset);
-    background: var(--black);
-  }
-
-  h1 {
-    z-index: 3;
-    padding-bottom: var(--heading-padding-bottom);
-    border-bottom: 1px solid var(--gray);
-    font-size: 3rem;
-
-    a::before {
-      content: counter(theme, upper-roman) ". ";
-    }
-  }
-
-  h2 {
-    z-index: 2;
-    padding-top: var(--topic-padding-top);
-    padding-bottom: var(--heading-padding-bottom);
-    border-bottom: 1px dashed var(--gray);
-    font-size: var(--topic-font-size);
-
-    a::before {
-      content: counter(topic) ". ";
-    }
-  }
-
-  h3 {
-    z-index: 1;
-    padding-top: var(--detail-padding-top);
-    padding-bottom: var(--detail-padding-bottom);
-    border-bottom: 1px dotted var(--gray);
-    font-size: var(--detail-font-size);
-
-    a::before {
-      content: counter(detail, lower-alpha) ". ";
-    }
-  }
-
-  p {
-    margin-top: 1rem;
-    color: var(--dark-white);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-sm);
-  }
-
-  figure {
-    margin-top: 2rem;
-    color: var(--gray);
-    font-size: var(--font-size-xs);
-  }
 }