Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-06-10 06:53:33 -07:00
Code Issues Packages Projects Releases Wiki Activity

website: redesign part 23

Browse Source
This commit is contained in:
nym21
2026-06-08 16:08:52 +02:00
parent e5068bbbf3
commit 6786be296d
7 changed files with 118 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website_next/header/index.js
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+19 -2
View File
@@ -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;
}
}
}
website_next/learn/charts/scrubber/index.js
+11 -1
View File
@@ -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
+6
View File
@@ -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
+79 -82
View File
@@ -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);
}
}