mirror of
https://github.com/nlohmann/json.git
synced 2026-10-27 00:08:55 +00:00
Niels Lohmann
444dba381f
- Figures with numbered captions: SAX stepper, json_view layout and edit stepper, exception map, JSON pointer and patch walkers, QA pipeline, scaling and binary size charts, roadmap lanes, release timeline, integration decision tree and namespace builder - Table captions (nj-table-caption) on 9 pages - Compile times: modules and PCH charts, filesystem section, re-measured Figure 1, links between features/modules.md and compile_times.md - Interactive macro chooser for features/arbitrary_types.md - Link check: exclude URLs that answer the plugin with 400/401/419 or are dead (customers.md) Signed-off-by: Niels Lohmann <mail@nlohmann.me>
143 lines
7.2 KiB
CSS
143 lines
7.2 KiB
CSS
/* figures: charts (docs/images/compile_times.svg, binary_sizes_*.svg, ordered_json_scaling.svg from
|
|
scripts/figures/charts.py) and the number literal explorer on features/types/number_handling.md */
|
|
|
|
/* series colours: categorical slots validated for CVD separation on the light and the slate surface */
|
|
.nj-charts, .nj-charts-key {
|
|
--nj-charts-c1: #2a78d6;
|
|
--nj-charts-c2: #eb6834;
|
|
--nj-charts-c3: #1baf7a;
|
|
--nj-charts-c4: #eda100;
|
|
--nj-charts-c5: #e87ba4;
|
|
--nj-charts-c6: #008300;
|
|
--nj-charts-ink2: var(--md-default-fg-color--light);
|
|
--nj-charts-grid: color-mix(in srgb, currentColor 12%, var(--md-default-bg-color));
|
|
--nj-charts-base: color-mix(in srgb, currentColor 35%, var(--md-default-bg-color));
|
|
}
|
|
[data-md-color-scheme="slate"] :is(.nj-charts, .nj-charts-key) {
|
|
--nj-charts-c1: #3987e5;
|
|
--nj-charts-c2: #d95926;
|
|
--nj-charts-c3: #199e70;
|
|
--nj-charts-c4: #c98500;
|
|
--nj-charts-c5: #d55181;
|
|
--nj-charts-c6: #008300;
|
|
}
|
|
/* concepts: two compilers, two object types */
|
|
.nj-charts { --nj-charts-clang-c: var(--nj-charts-c1); --nj-charts-gcc-c: var(--nj-charts-c2);
|
|
--nj-charts-json-c: var(--nj-charts-c1); --nj-charts-ojson-c: var(--nj-charts-c2); }
|
|
|
|
.md-typeset svg.nj-charts--compile, .md-typeset svg.nj-charts--scaling { max-width: 26rem; }
|
|
.md-typeset svg.nj-charts--sizes { max-width: 26rem; }
|
|
|
|
.nj-charts text { fill: currentColor; font-size: 13px; }
|
|
.nj-charts .nj-charts-leg { font-size: 13.5px; }
|
|
.nj-charts .nj-charts-rowlabel { font-size: 13.5px; font-weight: 500; }
|
|
.nj-charts .nj-charts-code { font-family: var(--md-code-font-family), monospace; font-size: 12.5px; }
|
|
.nj-charts .nj-charts-sub { fill: var(--nj-charts-ink2); font-weight: 400; }
|
|
.nj-charts .nj-charts-fmt { text-anchor: end; font-weight: 400; }
|
|
.nj-charts .nj-charts-best { font-weight: 700; }
|
|
.nj-charts .nj-charts-panel { font-family: var(--md-code-font-family), monospace; font-size: 14px; font-weight: 600; }
|
|
.nj-charts .nj-charts-tick { fill: var(--nj-charts-ink2); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
|
|
.nj-charts .nj-charts-tick--l { text-anchor: start; }
|
|
.nj-charts .nj-charts-tick--r { text-anchor: end; }
|
|
.nj-charts .nj-charts-val { font-size: 12px; font-variant-numeric: tabular-nums;
|
|
paint-order: stroke; stroke: var(--md-default-bg-color); stroke-width: 4px; stroke-linejoin: round; }
|
|
.nj-charts .nj-charts-factor { fill: var(--nj-charts-ink2); font-size: 12px; font-weight: 600; text-anchor: middle; }
|
|
.nj-charts .nj-charts-note { fill: var(--nj-charts-ink2); font-size: 12px; }
|
|
|
|
.nj-charts .nj-charts-grid { stroke: var(--nj-charts-grid); stroke-width: 1; }
|
|
.nj-charts .nj-charts-zero, .nj-charts .nj-charts-axis { stroke: var(--nj-charts-base); stroke-width: 1.5; }
|
|
.nj-charts .nj-charts-ref { stroke: currentColor; stroke-width: 1.5; }
|
|
|
|
.nj-charts .nj-charts-c1 { fill: var(--nj-charts-c1); }
|
|
.nj-charts .nj-charts-c2 { fill: var(--nj-charts-c2); }
|
|
.nj-charts .nj-charts-c3 { fill: var(--nj-charts-c3); }
|
|
.nj-charts .nj-charts-c4 { fill: var(--nj-charts-c4); }
|
|
.nj-charts .nj-charts-c5 { fill: var(--nj-charts-c5); }
|
|
.nj-charts .nj-charts-c6 { fill: var(--nj-charts-c6); }
|
|
.nj-charts .nj-charts-dim { fill-opacity: .45; }
|
|
.nj-charts .nj-charts-clang { fill: var(--nj-charts-clang-c); }
|
|
.nj-charts .nj-charts-gcc { fill: var(--nj-charts-gcc-c); }
|
|
.nj-charts polyline.nj-charts-json, .nj-charts line.nj-charts-json { stroke: var(--nj-charts-json-c); stroke-width: 2; fill: none; }
|
|
.nj-charts polyline.nj-charts-ojson, .nj-charts line.nj-charts-ojson { stroke: var(--nj-charts-ojson-c); stroke-width: 2; fill: none; }
|
|
.nj-charts .nj-charts-json-dot { fill: var(--nj-charts-json-c); stroke: var(--md-default-bg-color); stroke-width: 2; }
|
|
.nj-charts .nj-charts-ojson-dot { fill: var(--nj-charts-ojson-c); stroke: var(--md-default-bg-color); stroke-width: 2; }
|
|
|
|
/* single wide charts: larger text on phones, where the SVG is scaled down */
|
|
@media screen and (max-width: 44.9375em) {
|
|
svg.nj-charts.nj-charts--compile text, svg.nj-charts.nj-charts--scaling text { font-size: 15px; }
|
|
svg.nj-charts.nj-charts--compile .nj-charts-code { font-size: 14px; }
|
|
svg.nj-charts:is(.nj-charts--compile, .nj-charts--scaling) :is(.nj-charts-tick, .nj-charts-val, .nj-charts-factor, .nj-charts-note) { font-size: 14px; }
|
|
}
|
|
|
|
/* small multiples: two panels per row, one on narrow screens */
|
|
.md-typeset .nj-charts-grid-wrap {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
gap: 1rem 2rem;
|
|
margin: 1.5rem 0 .5rem;
|
|
}
|
|
.md-typeset .nj-charts-grid-wrap > .nj-fig-wrap { margin: 0; }
|
|
|
|
/* number literal explorer */
|
|
.md-typeset .nj-charts-num-ui {
|
|
margin: 1rem 0 .75rem;
|
|
padding: .8rem;
|
|
border: 1px solid var(--md-default-fg-color--lightest);
|
|
border-radius: 8px;
|
|
}
|
|
.md-typeset .nj-charts-num-ui label { display: block; font-weight: 600; font-size: .75rem; margin-bottom: .3rem; }
|
|
.md-typeset .nj-charts-num-input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
min-height: 44px;
|
|
padding: .4rem .6rem;
|
|
font-family: var(--md-code-font-family), monospace;
|
|
font-size: .8rem;
|
|
color: var(--md-default-fg-color);
|
|
background: var(--md-code-bg-color);
|
|
border: 1px solid var(--md-default-fg-color--lighter);
|
|
border-radius: 6px;
|
|
}
|
|
.md-typeset .nj-charts-num-input:focus-visible, .md-typeset .nj-charts-num-chip:focus-visible {
|
|
outline: 2px solid var(--md-typeset-a-color);
|
|
outline-offset: 2px;
|
|
}
|
|
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips:not([hidden]) { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; padding: 0; list-style: none; }
|
|
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li { margin: 0; padding: 0; list-style: none; }
|
|
.md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li::before, .md-typeset .nj-charts-num-ui ul.nj-charts-num-chips > li::marker { content: none; }
|
|
.md-typeset .nj-charts-num-chip {
|
|
min-height: 44px;
|
|
max-width: 100%;
|
|
padding: .25rem .6rem;
|
|
overflow-wrap: anywhere;
|
|
font-family: var(--md-code-font-family), monospace;
|
|
font-size: .7rem;
|
|
color: var(--md-typeset-a-color);
|
|
background: color-mix(in srgb, var(--md-typeset-a-color) 8%, var(--md-default-bg-color));
|
|
border: 1px solid color-mix(in srgb, var(--md-typeset-a-color) 35%, var(--md-default-bg-color));
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.md-typeset .nj-charts-num-chip[aria-pressed="true"] {
|
|
color: var(--md-default-bg-color);
|
|
background: var(--md-typeset-a-color);
|
|
border-color: var(--md-typeset-a-color);
|
|
}
|
|
.md-typeset .nj-charts-num-out {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: .2rem .8rem;
|
|
margin: 0;
|
|
font-size: .75rem;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.md-typeset .nj-charts-num-out dt { color: var(--md-default-fg-color--light); margin: 0; }
|
|
.md-typeset .nj-charts-num-out dd { margin: 0; }
|
|
.md-typeset .nj-charts-num-miss { font-size: .75rem; color: var(--md-default-fg-color--light); margin: 0; }
|
|
.md-typeset .nj-charts-num tr.nj-charts-num-hit td { background: var(--md-accent-fg-color--transparent); }
|
|
|
|
/* direct line labels replace the legend */
|
|
.nj-charts .nj-charts-name-json { fill: var(--nj-charts-json-c); font-weight: 600; }
|
|
.nj-charts .nj-charts-name-ojson { fill: var(--nj-charts-ojson-c); font-weight: 600; }
|