From e5068bbbf303aa60f405a6648d6e918672baafea Mon Sep 17 00:00:00 2001
From: nym21 <expat-epochs0i@icloud.com>
Date: Sun, 7 Jun 2026 23:11:18 +0200
Subject: [PATCH] website: redesign part 24

---
 website_next/learn/charts/index.js    | 90 ++++++++-------------------
 website_next/learn/contents/style.css |  9 +--
 website_next/learn/style.css          |  1 -
 3 files changed, 30 insertions(+), 70 deletions(-)

diff --git a/website_next/learn/charts/index.js b/website_next/learn/charts/index.js
index 232ad7c77..b28d0f5dc 100644
--- a/website_next/learn/charts/index.js
+++ b/website_next/learn/charts/index.js
@@ -25,36 +25,6 @@ import {
 } from "./views.js";
 import { FALLBACK_VIEWBOX_HEIGHT, VIEWBOX_WIDTH } from "./viewbox.js";
 
-/**
- * @template {string} T
- * @param {Object} args
- * @param {T} args.currentValue
- * @param {(currentValue: T, onChange: (value: T) => void) => HTMLFieldSetElement} args.createControl
- * @param {(chartKey: string, value: T) => void} args.save
- * @param {string} args.chartKey
- * @param {HTMLElement} args.figure
- * @param {string} args.dataKey
- * @param {(value: T) => void} args.setValue
- * @param {() => void} args.render
- */
-function createChartSettingControl({
-  currentValue,
-  createControl,
-  save,
-  chartKey,
-  figure,
-  dataKey,
-  setValue,
-  render,
-}) {
-  return createControl(currentValue, (value) => {
-    setValue(value);
-    save(chartKey, value);
-    figure.dataset[dataKey] = value;
-    render();
-  });
-}
-
 /** @param {Chart} chart */
 export function createChart(chart) {
   const figure = document.createElement("figure");
@@ -99,48 +69,38 @@ export function createChart(chart) {
     getOrder: () => currentOrder,
     getTimeframe: () => currentTimeframe,
   });
-  const viewControl = createChartSettingControl({
-    currentValue: currentView,
-    createControl: createViewControl,
-    save: saveView,
-    chartKey,
-    figure,
-    dataKey: "view",
-    setValue: (view) => {
-      currentView = view;
-    },
-    render: renderer.renderCurrent,
+
+  /**
+   * @template {string} T
+   * @param {string} dataKey
+   * @param {(chartKey: string, value: T) => void} save
+   * @param {T} value
+   */
+  function saveChartSetting(dataKey, save, value) {
+    save(chartKey, value);
+    figure.dataset[dataKey] = value;
+  }
+
+  const viewControl = createViewControl(currentView, (view) => {
+    currentView = view;
+    saveChartSetting("view", saveView, view);
+    renderer.renderCurrent();
   });
-  const scaleControl = createChartSettingControl({
-    currentValue: currentScale,
-    createControl: createScaleControl,
-    save: saveScale,
-    chartKey,
-    figure,
-    dataKey: "scale",
-    setValue: (scale) => {
-      currentScale = scale;
-    },
-    render: renderer.renderCurrent,
+  const scaleControl = createScaleControl(currentScale, (scale) => {
+    currentScale = scale;
+    saveChartSetting("scale", saveScale, scale);
+    renderer.renderCurrent();
   });
-  const orderControl = createChartSettingControl({
-    currentValue: currentOrder,
-    createControl: createOrderControl,
-    save: saveOrder,
-    chartKey,
-    figure,
-    dataKey: "order",
-    setValue: (order) => {
-      currentOrder = order;
-    },
-    render: renderer.renderCurrent,
+  const orderControl = createOrderControl(currentOrder, (order) => {
+    currentOrder = order;
+    saveChartSetting("order", saveOrder, order);
+    renderer.renderCurrent();
   });
   const timeframeControl = createTimeframeControl(
     currentTimeframe,
     (timeframe) => {
       currentTimeframe = timeframe;
-      saveTimeframe(chartKey, timeframe);
-      figure.dataset.timeframe = timeframe;
+      saveChartSetting("timeframe", saveTimeframe, timeframe);
       void renderer.loadCurrent();
     },
   );
diff --git a/website_next/learn/contents/style.css b/website_next/learn/contents/style.css
index 696c5f95b..ef1e5126b 100644
--- a/website_next/learn/contents/style.css
+++ b/website_next/learn/contents/style.css
@@ -5,15 +5,16 @@ main.learn {
     counter-reset: content-theme;
     position: sticky;
     top: 0;
-    padding-block: var(--nav-offset) var(--offset);
     max-height: 100dvh;
+    margin-left: -1rem;
+    padding-block: var(--nav-offset) var(--offset);
+    padding-left: 0.5rem;
     overflow: auto;
+    overscroll-behavior: contain;
+    color: var(--gray);
     font-size: var(--font-size-xs);
     line-height: var(--line-height-xs);
     text-transform: uppercase;
-    color: var(--gray);
-    padding-left: 0.5rem;
-    margin-left: -0.5rem;
 
     ol {
       list-style: none;
diff --git a/website_next/learn/style.css b/website_next/learn/style.css
index e802dbdc5..ebf8c5ba1 100644
--- a/website_next/learn/style.css
+++ b/website_next/learn/style.css
@@ -14,7 +14,6 @@ main.learn {
 
   display: grid;
   grid-template-columns: 14rem minmax(0, 1fr);
-  gap: 4rem;
   padding: 0 var(--page-x);
   scroll-padding-top: var(--offset);