diff --git a/website_next/header/index.js b/website_next/header/index.js index dbaffcc9f..7bea60ab9 100644 --- a/website_next/header/index.js +++ b/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"); diff --git a/website_next/learn/charts/format.js b/website_next/learn/charts/format.js index faca022db..b3d9f6380 100644 --- a/website_next/learn/charts/format.js +++ b/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, }); diff --git a/website_next/learn/charts/legend/index.js b/website_next/learn/charts/legend/index.js index 0867acf59..36ae09aeb 100644 --- a/website_next/learn/charts/legend/index.js +++ b/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"); diff --git a/website_next/learn/charts/legend/style.css b/website_next/learn/charts/legend/style.css index 8968cfb6d..45c86b3a7 100644 --- a/website_next/learn/charts/legend/style.css +++ b/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 { - padding-bottom: 0.5rem; + figcaption { + h4 { + color: var(--white); + font-family: var(--font-serif); + font-size: 2rem; + text-transform: none; + } + + menu { + padding-bottom: 0.5rem; + } } } diff --git a/website_next/learn/charts/scrubber/index.js b/website_next/learn/charts/scrubber/index.js index 1967e08a5..852accb18 100644 --- a/website_next/learn/charts/scrubber/index.js +++ b/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; diff --git a/website_next/learn/charts/style.css b/website_next/learn/charts/style.css index b76570fbc..6bd74c8e0 100644 --- a/website_next/learn/charts/style.css +++ b/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; diff --git a/website_next/learn/style.css b/website_next/learn/style.css index ebf8c5ba1..cd4a7bed1 100644 --- a/website_next/learn/style.css +++ b/website_next/learn/style.css @@ -86,98 +86,95 @@ main.learn { counter-increment: detail; scroll-margin-top: var(--offset); } - } - h1, - h2, - h3 { - line-height: 1; + section[id] { + > h1, + > h2, + > h3 { + position: sticky; + top: var(--offset); + line-height: 1; + background: var(--black); - a { - position: relative; - display: inline-block; - color: var(--white); - text-decoration: none; + a { + position: relative; + display: inline-block; + color: var(--white); + text-decoration: none; - &::before { - position: absolute; - top: 50%; - right: 100%; - translate: 0 -50%; - opacity: 0; - user-select: none; - text-decoration: none; + &::before { + position: absolute; + top: 50%; + right: 100%; + translate: 0 -50%; + opacity: 0; + user-select: 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 { - opacity: 0.5; + > 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) ". "; + } } - &:hover { - text-decoration: underline; - text-decoration-thickness: 1px; - text-underline-offset: 0.125em; + > 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) ". "; + } } - &:active { - color: var(--orange); + > 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); } } } - - 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); - } }