wt/json
1
0 Fork 0
mirror of https://github.com/nlohmann/json.git synced 2026-11-01 13:10:38 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
7c8f750f0540a5d85f1b36a9743dc92ee3c614a2
json/docs/mkdocs/docs/css/fig-pointer.css
T
Niels Lohmann a47170346a docs: new design for the documentation site (#5934) 
* docs: new design for the documentation site

Apply the brand to the Material for MkDocs site: Inter and JetBrains Mono
served by the site (upright and real italic), brand colours, blue header band
with the syntax pattern, wordmark in the header, new home page (hero, cards,
animated feature tour), 404 page, polish for tabs, search, footer, focus
rings, tables and code blocks, and theme features (code copy, previous/next
footer, TOC follow, search suggestions).

Draw the number railroad diagram, the parser callback events and the iterator
illustrations as inline SVGs that follow the light and dark scheme. The
generator scripts are in docs/mkdocs/scripts/figures; the feature slideshow
(json-light.svg, json-dark.svg, replacing json.gif on the home page) is built
by docs/mkdocs/scripts/slideshow. Decision nodes in five flowcharts become
hexagons, which need far less room.

Signed-off-by: Niels Lohmann <mail@nlohmann.me>

* docs: add figures, table captions and a macro chooser

- 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>

* docs: macro chooser generates adl_serializer for non-default-constructible types

Signed-off-by: Niels Lohmann <mail@nlohmann.me>

* docs: cross-link concept pages and API pages in See also sections

Add See also links in both directions between the concept pages (features,
home, integration) and the API pages, write API links in code font, give every
entry a comment after a dash, and show the callback event figure on the parser
callbacks page.

Signed-off-by: Niels Lohmann <mail@nlohmann.me>

* docs: address review comments on the new design

- Home: add a "Latest release" button
- Sponsors: update the list and group it by tier
- Features: list all feature pages on the index page
- Releases: add highlights per release, link the 4.0 roadmap, add the first commit to the timeline
- Exceptions: prefix all example messages with the exception name
- API: no code font for format names in the See also links of the to_/from_ pages
- Merge Patch: show the document before, the patch, and the result
- Replace "--" with typographic dashes, mark external links with an icon, center Mermaid diagrams

Signed-off-by: Niels Lohmann <mail@nlohmann.me>

---------

Signed-off-by: Niels Lohmann <mail@nlohmann.me>
2026-10-27 07:41:42 +01:00

460 lines
17 KiB
CSS
Raw Blame History

/* figures: pointer (features/json_pointer.md, json_patch.md, merge_patch.md; widgets in js/fig-pointer.js) */
/* value types: the colours of the code highlighting (brand.css), so a string looks the same everywhere */
.nj-pointer-walk, .nj-pointer-fl, .nj-patch {
--nj-pointer-s: var(--nj-hl-string);
--nj-pointer-n: var(--nj-hl-number);
--nj-pointer-b: var(--nj-hl-function);
--nj-pointer-line: color-mix(in srgb, var(--md-default-fg-color) 28%, var(--md-default-bg-color));
--nj-pointer-ok: #23793a;
--nj-pointer-ok-soft: #e6f4ea;
}
[data-md-color-scheme="slate"] :is(.nj-pointer-walk, .nj-pointer-fl, .nj-patch) {
--nj-pointer-ok: #7ed491;
--nj-pointer-ok-soft: #14301d;
}
/* ---------- pointer walker ---------- */
.md-typeset .nj-pointer-walk {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem 1.6rem;
margin: 1.5rem 0;
padding: 1rem 1.1rem;
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
font-size: .75rem;
}
@media screen and (min-width: 45em) {
.md-typeset .nj-pointer-walk--js {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.md-typeset .nj-pointer-walk--js .nj-pointer-panel { order: 2; }
}
.md-typeset .nj-pointer-static {
margin: 0;
color: var(--md-default-fg-color--light);
}
.md-typeset .nj-pointer-walk code {
font-size: .95em;
}
/* tree: elbow lines drawn by each item (::before up to its row, ::after down to the next sibling) */
.md-typeset .nj-pointer-walk ul.nj-pointer-tree,
.md-typeset .nj-pointer-walk .nj-pointer-tree ul {
margin: 0;
padding: 0;
list-style: none;
}
.md-typeset .nj-pointer-walk .nj-pointer-tree ul {
padding-left: 1.5rem;
}
.md-typeset .nj-pointer-walk .nj-pointer-tree li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
--nj-pointer-mid: .95rem;
}
.md-typeset .nj-pointer-walk .nj-pointer-tree li::before,
.md-typeset .nj-pointer-walk .nj-pointer-tree li::after {
content: none;
}
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li::before {
content: "";
position: absolute;
top: 0;
left: -1rem;
width: .8rem;
height: var(--nj-pointer-mid);
border: 0 solid var(--nj-pointer-line);
border-width: 0 0 2px 2px;
border-bottom-left-radius: 4px;
background: none;
}
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -1rem;
border-left: 2px solid var(--nj-pointer-line);
}
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li.is-on::before {
z-index: 1;
border-color: var(--md-typeset-a-color);
}
.md-typeset .nj-pointer-walk .nj-pointer-tree ul > li.is-pass::after {
z-index: 1;
border-left-color: var(--md-typeset-a-color);
}
.md-typeset .nj-pointer-walk .nj-pointer-n {
display: inline-block;
margin: .15rem 0;
padding: .2rem .5rem;
border: 1px solid transparent;
border-radius: 6px;
background: none;
color: var(--md-default-fg-color);
font: inherit;
font-family: var(--md-code-font-family), monospace;
font-size: .95em;
line-height: 1.5;
text-align: left;
}
.md-typeset .nj-pointer-walk button.nj-pointer-n {
cursor: pointer;
}
.md-typeset .nj-pointer-walk button.nj-pointer-n:hover {
border-color: var(--md-default-fg-color--lightest);
}
.md-typeset .nj-pointer-walk :is(button):focus-visible {
outline: 2px solid var(--md-typeset-a-color);
outline-offset: 2px;
}
.nj-pointer-k { color: var(--nj-hl-key); }
.nj-pointer-t {
color: var(--md-default-fg-color--light);
font-family: var(--md-text-font-family), sans-serif;
font-size: .88em;
font-style: italic;
}
.nj-pointer-v--s { color: var(--nj-pointer-s); }
.nj-pointer-v--n { color: var(--nj-pointer-n); }
.nj-pointer-v--b { color: var(--nj-pointer-b); }
.md-typeset .nj-pointer-walk li.is-on > .nj-pointer-n {
border-color: color-mix(in srgb, var(--md-typeset-a-color) 45%, transparent);
}
.md-typeset .nj-pointer-walk li.is-target > .nj-pointer-n {
border-color: var(--md-typeset-a-color);
background-color: var(--nj-blue-soft);
box-shadow: 0 0 0 1px var(--md-typeset-a-color);
}
/* the value a container pointer identifies includes its subtree */
.md-typeset .nj-pointer-walk li.is-target li > .nj-pointer-n {
background-color: var(--nj-blue-soft);
}
.md-typeset .nj-pointer-walk li.is-miss > .nj-pointer-n {
border-color: var(--nj-red);
border-style: dashed;
}
/* panel: pointer bar, result, example pointers */
.nj-pointer-lbl {
margin: 0 0 .35rem;
color: var(--md-default-fg-color--light);
font-size: .62rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.nj-pointer-lbl span {
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.nj-pointer-bar {
display: flex;
flex-wrap: wrap;
margin-bottom: .6rem;
}
.md-typeset .nj-pointer-seg {
margin: 0 -1px 0 0;
padding: .3rem .55rem;
border: 1px solid var(--md-typeset-a-color);
background-color: var(--md-default-bg-color);
color: var(--md-typeset-a-color);
cursor: pointer;
font: inherit;
}
.md-typeset .nj-pointer-seg:first-child { border-radius: 6px 0 0 6px; }
.md-typeset .nj-pointer-seg:last-child { border-radius: 0 6px 6px 0; }
.md-typeset .nj-pointer-seg:only-child { border-radius: 6px; }
.md-typeset .nj-pointer-seg code { color: inherit; font-size: 1em; }
.md-typeset .nj-pointer-seg--root code { color: var(--md-default-fg-color--light); }
.md-typeset .nj-pointer-seg.is-after {
border-color: var(--md-default-fg-color--lighter);
color: var(--md-default-fg-color--light);
border-style: dashed;
}
.md-typeset .nj-pointer-seg[aria-pressed="true"] {
position: relative;
background-color: var(--md-typeset-a-color);
color: var(--md-default-bg-color);
}
.md-typeset .nj-pointer-seg--root[aria-pressed="true"] code { color: inherit; }
.nj-pointer-out {
min-height: 3.2em;
margin-bottom: .9rem;
padding: .5rem .7rem;
border-left: 3px solid var(--md-typeset-a-color);
border-radius: 0 6px 6px 0;
background-color: var(--md-code-bg-color);
line-height: 1.6;
overflow-wrap: anywhere;
}
.md-typeset .nj-pointer-out .nj-pointer-val { color: var(--md-typeset-a-color); font-weight: 600; }
.nj-pointer-out .nj-pointer-note { color: var(--md-default-fg-color--light); }
.nj-pointer-out .nj-pointer-err { color: var(--nj-red); font-weight: 600; }
.nj-pointer-presets {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.md-typeset .nj-pointer-chip {
padding: .2rem .5rem;
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
cursor: pointer;
font: inherit;
}
.md-typeset .nj-pointer-chip:hover { border-color: var(--md-typeset-a-color); }
.md-typeset .nj-pointer-chip[aria-pressed="true"] {
border-color: var(--md-typeset-a-color);
background-color: var(--nj-blue-soft);
color: var(--md-typeset-a-color);
}
.md-typeset .nj-pointer-chip code { color: inherit; font-size: 1em; }
@media (pointer: coarse), screen and (max-width: 44.984375em) {
.md-typeset :is(.nj-pointer-seg, .nj-pointer-chip, .nj-patch-btn) { min-height: 44px; min-width: 44px; }
.md-typeset .nj-pointer-walk button.nj-pointer-n { min-height: 40px; }
}
/* ---------- flatten / unflatten figure (scripts/figures/json_pointer_flatten.py) ---------- */
.md-typeset svg.nj-pointer-fl { min-width: 28rem; max-width: 44rem; }
.nj-pointer-fl .nj-pointer-fl-edge { fill: none; stroke: var(--fg-line); stroke-width: 1.5; }
.nj-pointer-fl .nj-pointer-fl-link { fill: none; stroke-width: 1.5; stroke-opacity: .75; }
.nj-pointer-fl .nj-pointer-fl-link.nj-pointer-fl--s, .nj-pointer-fl .nj-pointer-fl-dot.nj-pointer-fl--s { stroke: var(--nj-pointer-s); }
.nj-pointer-fl .nj-pointer-fl-link.nj-pointer-fl--n, .nj-pointer-fl .nj-pointer-fl-dot.nj-pointer-fl--n { stroke: var(--nj-pointer-n); }
.nj-pointer-fl .nj-pointer-fl-link.nj-pointer-fl--b, .nj-pointer-fl .nj-pointer-fl-dot.nj-pointer-fl--b { stroke: var(--nj-pointer-b); }
.nj-pointer-fl .nj-pointer-fl-dot { fill: var(--md-default-bg-color); stroke-width: 2; }
.nj-pointer-fl tspan.nj-pointer-fl--s { fill: var(--nj-pointer-s); }
.nj-pointer-fl tspan.nj-pointer-fl--n { fill: var(--nj-pointer-n); }
.nj-pointer-fl tspan.nj-pointer-fl--b { fill: var(--nj-pointer-b); }
.nj-pointer-fl .nj-pointer-fl-k, .nj-pointer-fl .nj-pointer-fl-inner, .nj-pointer-fl .nj-pointer-fl-key { fill: var(--nj-hl-key); }
.nj-pointer-fl .nj-pointer-fl-op {
fill: var(--md-typeset-a-color);
font-family: var(--md-code-font-family), monospace;
font-size: 15px;
font-weight: 600;
text-anchor: middle;
}
/* ---------- JSON Patch stepper ---------- */
.md-typeset .nj-patch--js .md-typeset__scrollwrap,
.md-typeset .nj-patch--js > .md-typeset__table,
.md-typeset .nj-patch--js > table {
display: none;
}
.md-typeset .nj-patch-stage {
margin: 1.5rem 0;
padding: 1rem 1.1rem;
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
font-size: .75rem;
}
.nj-patch-cols {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem 1.4rem;
}
@media screen and (min-width: 50em) {
.nj-patch-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.nj-patch-h {
margin: 0 0 .35rem;
color: var(--md-default-fg-color--light);
font-size: .62rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.nj-patch-doc {
--nj-patch-lh: 1.9rem;
--nj-patch-pad: .5rem;
position: relative;
padding: var(--nj-patch-pad) .6rem var(--nj-patch-pad) 2rem;
border: 1px solid var(--md-default-fg-color--lightest);
border-radius: 6px;
background-color: var(--md-code-bg-color);
font-family: var(--md-code-font-family), monospace;
font-size: .95em;
}
.nj-patch-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 .6rem;
min-height: var(--nj-patch-lh);
margin: 0 -.3rem;
padding: 0 .3rem;
border-radius: 4px;
white-space: pre;
}
.nj-patch-code { white-space: pre; }
.nj-patch-k { color: var(--nj-hl-key); }
.nj-patch-s { color: var(--nj-pointer-s); }
.nj-patch-note {
padding: 0 .4rem;
border-radius: 4px;
font-family: var(--md-text-font-family), sans-serif;
font-size: .82em;
font-weight: 600;
white-space: nowrap;
}
.nj-patch-line--add { background-color: var(--nj-pointer-ok-soft); box-shadow: inset 3px 0 0 var(--nj-pointer-ok); }
.nj-patch-line--add .nj-patch-note { color: var(--nj-pointer-ok); }
.nj-patch-line--del { background-color: var(--nj-red-soft); box-shadow: inset 3px 0 0 var(--nj-red); }
.nj-patch-line--del .nj-patch-code { text-decoration: line-through; text-decoration-color: var(--nj-red); text-decoration-thickness: 2px; opacity: .75; }
.nj-patch-line--del .nj-patch-note { color: var(--nj-red); }
.nj-patch-line--mod .nj-patch-note { color: var(--nj-pointer-ok); }
.nj-patch-line--test { background-color: var(--nj-blue-soft); box-shadow: inset 3px 0 0 var(--md-typeset-a-color); }
.nj-patch-line--test .nj-patch-note { color: var(--md-typeset-a-color); }
.nj-patch-ins { padding: .05rem .15rem; border-radius: 3px; background-color: var(--nj-pointer-ok-soft); box-shadow: 0 0 0 1.5px var(--nj-pointer-ok); }
.nj-patch-src { padding: .05rem .15rem; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--md-typeset-a-color); }
/* move/copy connector in the left gutter: a bracket from the source line to the target line */
.nj-patch-arc {
position: absolute;
left: .55rem;
width: .8rem;
border: 2px solid var(--md-typeset-a-color);
border-right: 0;
border-radius: 6px 0 0 6px;
}
.nj-patch-arc::after {
content: "";
position: absolute;
right: -2px;
border: 5px solid transparent;
border-left: 7px solid var(--md-typeset-a-color);
}
.nj-patch-arc--down::after { bottom: -6px; }
.nj-patch-arc--up::after { top: -6px; }
.md-typeset .nj-patch-ops {
margin: 0;
padding: 0;
list-style: none;
counter-reset: nj-patch;
}
.md-typeset .nj-patch-ops > li {
position: relative;
margin: 0 0 .3rem;
padding: .35rem .5rem .35rem 2rem;
border: 1px solid transparent;
border-radius: 6px;
counter-increment: nj-patch;
line-height: 1.5;
}
.md-typeset .nj-patch-ops > li::before {
content: counter(nj-patch);
position: absolute;
top: .35rem;
left: .6rem;
color: var(--md-default-fg-color--lighter);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.md-typeset .nj-patch-ops code { font-size: .9em; overflow-wrap: anywhere; }
.md-typeset .nj-patch-ops > li.is-done { opacity: .6; }
.md-typeset .nj-patch-ops > li.is-cur {
border-color: var(--md-typeset-a-color);
background-color: var(--nj-blue-soft);
}
.md-typeset .nj-patch-ops > li.is-cur::before { color: var(--md-typeset-a-color); }
.nj-patch-op { color: var(--nj-hl-keyword); font-weight: 600; }
.nj-patch-path { color: var(--nj-pointer-s); }
.md-typeset .nj-patch-ops > li.is-cur .nj-patch-path {
padding: 0 .15rem;
border-radius: 3px;
background-color: var(--md-typeset-a-color);
color: var(--md-default-bg-color);
}
.nj-patch-ctrl {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem;
margin-top: .9rem;
}
.md-typeset .nj-patch-btn {
padding: .3rem .9rem;
border: 1px solid var(--md-default-fg-color--lighter);
border-radius: 6px;
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
cursor: pointer;
font: inherit;
font-weight: 600;
}
.md-typeset .nj-patch-btn--primary {
border-color: var(--md-typeset-a-color);
background-color: var(--md-typeset-a-color);
color: var(--md-default-bg-color);
}
.md-typeset .nj-patch-btn:disabled { opacity: .45; cursor: default; }
.md-typeset .nj-patch-btn:focus-visible { outline: 2px solid var(--md-typeset-a-color); outline-offset: 2px; }
.nj-patch-count {
margin-left: auto;
color: var(--md-default-fg-color--light);
font-variant-numeric: tabular-nums;
}
.md-typeset .nj-patch-status {
min-height: 3.2em;
margin: .6rem 0 0;
color: var(--md-default-fg-color--light);
}
@media (prefers-reduced-motion: no-preference) {
.nj-patch-doc--anim :is(.nj-patch-line--add, .nj-patch-line--del, .nj-patch-line--test, .nj-patch-ins, .nj-patch-arc) {
animation: nj-patch-in 450ms ease-out;
}
}
@keyframes nj-patch-in {
from { opacity: 0; transform: translateX(-.4rem); }
to { opacity: 1; transform: none; }
}
/* ---------- merge patch table ---------- */
.nj-pointer-mpt {
--nj-pointer-mp-set: var(--nj-hl-keyword);
--nj-pointer-mp-add: #23793a;
--nj-pointer-mp-del: var(--nj-red);
--nj-pointer-mp-rec: var(--nj-hl-function);
--nj-pointer-mp-arr: var(--nj-hl-number);
--nj-pointer-mp-keep: var(--md-default-fg-color--light);
}
[data-md-color-scheme="slate"] .nj-pointer-mpt { --nj-pointer-mp-add: #7ed491; }
.md-typeset .nj-pointer-mpt td { vertical-align: top; }
.md-typeset .nj-pointer-mpt td:first-child { white-space: nowrap; }
.nj-pointer-mp {
display: inline-block;
padding: .05rem .5rem;
border: 1px solid currentColor;
border-radius: 999px;
background-color: color-mix(in srgb, currentColor 10%, var(--md-default-bg-color));
font-size: .92em;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
.nj-pointer-mp--set { color: var(--nj-pointer-mp-set); }
.nj-pointer-mp--add { color: var(--nj-pointer-mp-add); }
.nj-pointer-mp--del { color: var(--nj-pointer-mp-del); }
.nj-pointer-mp--rec { color: var(--nj-pointer-mp-rec); }
.nj-pointer-mp--arr { color: var(--nj-pointer-mp-arr); }
.nj-pointer-mp--keep { color: var(--nj-pointer-mp-keep); }
.nj-pointer-mp-none { color: var(--md-default-fg-color--light); font-style: italic; }
.md-typeset .nj-pointer-mpt table:not([class]) td code { white-space: normal; }
.md-typeset .nj-pointer-mpt table:not([class]) td:nth-child(-n+2) code { white-space: nowrap; }
/* the result cell takes a tint of the rule's colour */
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--set) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-set) 8%, transparent); }
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--add) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-add) 8%, transparent); }
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--del) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-del) 8%, transparent); }
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--rec) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-rec) 8%, transparent); }
.md-typeset .nj-pointer-mpt tr:has(.nj-pointer-mp--arr) td:last-child { background-color: color-mix(in srgb, var(--nj-pointer-mp-arr) 8%, transparent); }
Reference in new issue View Git Blame Copy Permalink