/* Light is the default palette. The header picker pins an explicit choice as data-theme on (persisted in localStorage); with no attribute, prefers-color-scheme decides -- the "system" setting. */ :root { --accent: #f37626; --ink: #1c1c1c; /* text grays clear WCAG AAA (7:1) on both the page background and the white cards */ --soft: #444444; --muted: #525252; --bg: #f4f4f4; --card: #ffffff; --line: #e2e2e2; --code-bg: #f6f6f6; --mark: #fbd6bc; --error-bg: #fef2f2; --error-line: #fecaca; --error-ink: #dc2626; --error-soft: #b91c1c; /* The link colour the picker offers (see link-picker.html). Every choice states a light value and a dark one; the palette in force picks between them, so a choice itself carries no scheme rules. currentColor is what the default and the "ink" choice share, and the whole of the latter: the word keeps the ink it inherits and the rule follows in that same ink, the plainest link there is; the default ("ink-accent") is that link with an accent rule on hover and nothing else. The accent colours no choice's text -- at 2.83:1 on the white card and 2.58:1 on the page it sits under the 3:1 a non-text indicator wants, so it marks headings and chrome instead. */ --link-l: currentColor; --link-rule-l: currentColor; --link-d: currentColor; --link-rule-d: currentColor; --link: var(--link-l); --link-rule: var(--link-rule-l); /* syntax colours for highlighted code: Primer's prettylights light set (see the token rules) */ --syn-keyword: #cf222e; --syn-string: #0a3069; --syn-comment: #6e7781; --syn-number: #0550ae; --syn-name: #6639ba; --syn-builtin: #953800; /* which of the two masthead logos is the one on show (see .site-logo): a palette value like the colours, so the pair needs no scheme rule of its own */ --logo-light: block; --logo-dark: none; color-scheme: light; } :root[data-theme="dark"] { /* text grays clear WCAG AAA (7:1) on both the page background and the dark cards */ --ink: #e8e6e3; --soft: #c9c6c2; --muted: #aeaaa4; --bg: #131313; --card: #1e1e1e; --line: #333333; --code-bg: #2a2a2a; --mark: #7a4114; --error-bg: #2a1a1a; --error-line: #5c2828; --error-ink: #f87171; --error-soft: #ef4444; /* the dark half of each link choice */ --link: var(--link-d); --link-rule: var(--link-rule-d); --syn-keyword: #ff7b72; --syn-string: #a5d6ff; --syn-comment: #8b949e; --syn-number: #79c0ff; --syn-name: #d2a8ff; --syn-builtin: #ffa657; /* the masthead logo drawn for this palette (see .site-logo) */ --logo-light: none; --logo-dark: block; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* text grays clear WCAG AAA (7:1) on both the page background and the dark cards */ --ink: #e8e6e3; --soft: #c9c6c2; --muted: #aeaaa4; --bg: #131313; --card: #1e1e1e; --line: #333333; --code-bg: #2a2a2a; --mark: #7a4114; --error-bg: #2a1a1a; --error-line: #5c2828; --error-ink: #f87171; --error-soft: #ef4444; /* the dark half of each link choice */ --link: var(--link-d); --link-rule: var(--link-rule-d); --syn-keyword: #ff7b72; --syn-string: #a5d6ff; --syn-comment: #8b949e; --syn-number: #79c0ff; --syn-name: #d2a8ff; --syn-builtin: #ffa657; /* the masthead logo drawn for this palette (see .site-logo) */ --logo-light: none; --logo-dark: block; color-scheme: dark; } } * { box-sizing: border-box; } /* The typography choices the header's font picker offers (pinned as data-font on , persisted like the theme choice): Source Serif, the superfamily Medium set the publication in and the default here with no attribute pinned, the jupyter.org Helvetica stack the site launched with, the reader's own platform UI font, Inter, Atkinson Hyperlegible Next as a standalone sans picked for its own look, Source Sans and the IBM Plex superfamily, offered as both a sans and a serif face, and Merriweather, a serif offered with its own sans over the headings. --body-font is what the page is set in and --mono what its code is, so a choice swaps both by redefining them; the rules downstream name the roles, never the families. Headings and chrome stay on --body-font under every choice, so they read sans regardless: a superfamily's sans choice (Source Sans, IBM Plex Sans) points --body-font at its own sans face, so the whole page, article included, runs in it; its serif sibling (the default Source Serif, IBM Plex Serif) leaves --body-font on that same sans face and points only the article's running text (further down) at the serif instead. --mono follows to whichever face the choice ships one under: the superfamilies' own mono, Atkinson Hyperlegible Mono, or, for System UI and any choice with no mono face of its own (Helvetica, Inter, Merriweather), the platform's default --system-mono stack. */ :root { --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --system-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --system-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --inter: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Source Sans 3 and Source Serif 4 are the current generation of Adobe's superfamily: the same text designs, redrawn as variable faces, extending and replacing Source Sans Pro and Source Serif Pro. Each keeps its Pro predecessor behind it in the stack for a reader who has the older family installed locally but not the new one. The mono is not renamed -- Source Code Pro is itself the current face. */ --source-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Source Serif 4 carries an optical-size axis besides (opsz 8-60), one the browser drives itself: font-optical-sizing is auto by default, so serif text is drawn for the size it is set at -- wider, more openly spaced and a touch sturdier as it shrinks, narrower and more tightly set as it grows. The article's running text at 1.25rem lands on the axis default of 20, so it gets what a static face would have given it; the axis earns its place on the sizes around it (a table's .9em) and on any reading size the column might take later. Source Sans 3 has no counterpart axis to match it with: Adobe drew optical masters for the serif only. */ --source-serif: "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", Times, serif; --source-code: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Atkinson Hyperlegible Next is the Braille Institute's redrawing of the original: the same legibility-first design -- letterforms pulled apart so the pairs a low-vision reader confuses (I l 1, O 0, b d) cannot be mistaken for each other -- now cut as a variable face over a 200-800 weight axis rather than the original's static regular and bold, with a matching mono on the same axis. The original stays behind it for a reader who has that installed locally but not the new one, the way Source Sans keeps its Pro predecessor. */ --atkinson: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Helvetica Neue", Helvetica, Arial, sans-serif; --atkinson-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ibm-plex-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --ibm-plex-serif: "IBM Plex Serif", Georgia, Cambria, "Times New Roman", Times, serif; --ibm-plex-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Merriweather and Merriweather Sans are a serif drawn for screen reading and the sans drawn to sit beside it -- a pair rather than one family's two faces, so they are offered as the one choice the pairing was for: the serif under the article, its sans over the headings and chrome. Both are variable now, and the serif carries the same optical-size axis Source Serif does (opsz 18-144), which the browser drives itself; its width axis is left at the default, so only the weight is asked for besides. Neither face has a mono sibling, so code takes the platform's stack. */ --merriweather: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif; --merriweather-sans: "Merriweather Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* the default: Source Serif's own sans/mono pair, with the serif face set on .post alone, further down */ --body-font: var(--source-sans); --mono: var(--source-code); } :root[data-font="sans"] { --body-font: var(--sans); --mono: var(--system-mono); } :root[data-font="system-ui"] { --body-font: var(--system-ui); --mono: var(--system-mono); } :root[data-font="inter"] { --body-font: var(--inter); --mono: var(--system-mono); } :root[data-font="source-sans"] { --body-font: var(--source-sans); --mono: var(--source-code); } :root[data-font="atkinson"] { --body-font: var(--atkinson); --mono: var(--atkinson-mono); } :root[data-font="ibm-plex-sans"] { --body-font: var(--ibm-plex-sans); --mono: var(--ibm-plex-mono); } :root[data-font="ibm-plex-serif"] { --body-font: var(--ibm-plex-sans); --mono: var(--ibm-plex-mono); } :root[data-font="merriweather"] { --body-font: var(--merriweather-sans); --mono: var(--system-mono); } /* Every choice is set at the same apparent size, so the picker compares faces rather than sizes. font-size sets the em box, not the letters, and the candidates fill that box very differently: at one font-size Merriweather's lowercase is 0.555em tall against Source Serif's 0.475, so it reads a size and a half larger with no size having changed. font-size-adjust names the x-height the text is to be set at as a fraction of font-size and the browser scales the face to hit it; apparent size follows the x-height, running prose being nearly all lowercase. The default is the reference, role by role, so it is the one choice nothing moves under: .486 is Source Sans 3's own x-height and Source Code Pro's alike (the pair is drawn to one), so the chrome and the code of the default render exactly as they did, and the .475 on .post further down is Source Serif 4's. What shifts is only the used font-size a face is drawn at -- the computed font-size stays put, so line-height, every em length and every rem length are the values they always were. Leading therefore holds at 32px in the column under every choice while the letters hold at one x-height, and it is that pairing which decides a column's texture: resizing each face by hand would have moved the two together and settled nothing. Line length still moves with a face's set width, which is a proportion of the face rather than its size. It is stated here rather than on :root because the font shorthand on the next line would reset it: font-size-adjust is one of the longhands font sets, so a bare `font:` puts it back to none for everything below. Declaring it after the shorthand, in the same rule, is what makes it stick. A face with an optical-size axis lands a hair off the target -- measured in Chromium, Merriweather at 9.53px against the 9.50 asked for -- because the axis moves the x-height as the size the browser picked changes, and the browser does not iterate. Where the property is unsupported it is ignored and each face is drawn at its own x-height, as before. */ body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.65 var(--body-font); font-size-adjust: .486; } .wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } /* A link is a word and its rule, both in whichever colour the choice in force names; the rule keeps the browser's own weight and position unless the choice tunes them. */ a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--link-rule); } /* Links that are components rather than words -- the site title and nav, card covers and titles, tag pills, chips, page numbers, the archive list -- carry no rule at rest; hovering shows the same rule. They keep the ink they inherit under every link choice too: a card title or a nav item is a piece of the page, not a link among words. */ .site-title, .site-header nav a, .card-cover, .card-title a, .tag, .share-link, .chip, ul.pagination .page-link, .archives a { text-decoration-line: none; color: currentColor; } a:hover { text-decoration-line: underline; } /* "ink-accent" is the default, and it is the plain ink link with one thing added: the rule turns the accent under the pointer. At rest it is the ink link above, letter for letter and rule for rule, so the page reads the same; the orange appears only on hover, where it names the link the pointer is on rather than marking links in the running text. The accent's 2.83:1 rules it out as link text but not as a rule under one: a hover rule carries no letterforms and no meaning of its own -- the link is already a link, underlined, in ink that clears AAA -- so it is a non-text indicator on top of one that stands without it, and the same orange the rest of the chrome hovers in. It holds in both palettes: --accent is one value across the two, and the rule's position stays the browser's. Being the default, it is the state with no attribute; "ink" is the choice that drops the hover accent, and needs no rules of its own to do it. The hovered rule's weight is the heavier of 2px and the rule the link already carries (--rule-w): 2px is a floor, so the hairline under a byline or a page number thickens into an indicator, and it is only a floor, so a rule already heavier than that is not thinned on hover. The rest thickness here is the browser's own, which no CSS value can name inside a max(), so --rule-w states what the browser draws: Chromium rounds em/10 down to whole pixels (1px up to 19px text, 2px from 20px, 3px from 30px -- measured), and the engines that take the font's own underline metric draw thinner than that, so .1em is at or above what any of them puts under a word at rest. Being the ceiling of a rounded-down value, it can land a pixel over the rest rule on large text -- measured in Chromium, a link goes 1px -> 2px at 13px text, 2px -> 2px at 20px and 3px -> 4px at 38px -- which is the direction a hover should err in anyway. A choice that states a rest thickness of its own restates it in --rule-w, and its hover follows that instead. */ :root { --rule-w: .1em; } :root:not([data-link]) a:hover { text-decoration-color: var(--accent); text-decoration-thickness: max(2px, var(--rule-w)); } /* The choices that colour the word as well as its rule. Both are the accent's complement in OKLCH -- its hue is 48deg, so 228deg -- and a step round towards a conventional link blue: "petrol-aaa" at the 7:1 the body grays hold, "link-blue" at 5.5:1 on the card, 3.1:1 against the body ink where the AAA one is 2.4:1 -- the separation that decides whether a link reads as a link or as dark text. The dark values sit at ~7:1 on the dark cards. Both state the rule's weight, where the default leaves it to the browser -- 1px at every size, so the rule stays a hairline under a heading-sized link as well as under body text -- and leave its position alone: the browser's own offset is what every other choice draws at, and the blues read against them at the same height. */ :root[data-link="petrol-aaa"] { --link-l: #05607e; --link-d: #09b6ea; --rule-w: 1px; } :root[data-link="link-blue"] { --link-l: #046bb9; --link-d: #59adfe; --rule-w: 1px; } :root[data-link="petrol-aaa"] a, :root[data-link="link-blue"] a { text-decoration-thickness: var(--rule-w); } /* Both take the default's hover as well: the rule turns the accent under the pointer, at the same heavier-of-2px-and-the-rest-rule weight, so a link says which one the pointer is on the same way under every choice that draws a rule of its own. Their rest rule is 1px at every size, so that maximum is 2px throughout. The word keeps its blue and the rule keeps the browser's position, so the hover moves nothing and recolours nothing that carries letterforms -- the contrast each choice was picked for is the text's, at rest and hovered alike. */ :root[data-link="petrol-aaa"] a:hover, :root[data-link="link-blue"] a:hover { text-decoration-color: var(--accent); text-decoration-thickness: max(2px, var(--rule-w)); } /* "browser" is the control the rest are read against: a link drawn the way the browser draws one with no stylesheet at all, in LinkText, the reader's own platform link colour in the scheme the palette has declared. Visited links are left alone: VisitedText would land on card titles and nav items too, which the reset above cannot outrank. */ :root[data-link="browser"] { --link-l: LinkText; --link-d: LinkText; } /* jupyter.org's .global-banner, box for box, so a shared announcement file looks the same here as there: white on the accent with a soft shadow, and 43.8px tall with a one-line announcement in it. The one thing not taken from that site is the family. jupyter.org sets its banner in a stack of its own, led by "Myriad Pro", and a banner in that face sat in the page as a second sans beside the heading and chrome one -- visibly a different typeface to any reader who has Myriad Pro installed, and to every reader a box whose family is pinned while the rest of the page follows the font choice in force. So the banner takes --body-font, the same face the headings, byline, captions and chrome are set in under every choice, and moves with the picker as they do. Only the family changes: the box keeps jupyter.org's own weight, size and leading, which is what its height is measured from. That height is the sum of two different measures, which is why the banner is drawn in two elements like jupyter.org's. Its box sits at the 14px/20px its body sets -- every em the box states is a 14px one, so .6em of padding is 8.4px and the 1.4em dismiss is 19.6px -- while the announcement inside it is the 18px/27px that site sets running text in (there, a

in .global-banner-content picking up the site's own paragraph rule). .announcement-content carries the 18px here instead of a

rule, so an announcement that is bare text rather than markup reads at that same size; the script wraps whatever the source gives in it. The banner restates the chrome's x-height after its shorthand for the reason body does: the shorthand is one of the two places a `font:` would otherwise hand the text back to whatever x-height the chosen face happens to have. */ .announcement { position: relative; background: var(--accent); color: #fff; text-shadow: 0 0 4px #000; text-align: center; font: 400 .875rem/1.42857143 var(--body-font); font-size-adjust: .486; padding: .6em 2.5em; } .announcement[hidden] { display: none; } .announcement-content { font-size: 1.125rem; line-height: 1.5; } .announcement p { margin: 0; } .announcement a { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; } /* The x is jupyter.org's own: the same U+00D7, at the same 1.4em of the box's 14px. A button takes the browser's UI font unless a rule says otherwise -- which is what set this one apart, a system-ui x beside the banner's own face -- so it is told to inherit, and the x is drawn in whatever the banner is. Naming a family here instead would pin the x while the words beside it follow the font choice. */ .announcement-close { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); padding: .2em .4em; border: 0; background: none; color: inherit; text-shadow: inherit; font-family: inherit; font-size: 1.4em; line-height: 1; cursor: pointer; } /* The header stands as tall as jupyter.org's navbar, so a reader moving between the two sites sees the same masthead: its 15px of padding above and below a 40px logo, over a 1px rule -- 71px in all. .9375rem is that 15px; the nav items' tab bar below is drawn against the same figure. */ .site-header { background: var(--card); border-bottom: 1px solid var(--line); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .9375rem; padding-bottom: .9375rem; } .site-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .55rem; } .site-title img { height: 2.1rem; width: auto; } /* jupyter.org's masthead, for an archive that has a logo of its own to stand in for its name (site.toml "logo"): the project's rectangle logo, wordmark and all, at the 40px that navbar sets it in, with no title text beside it. A second file ("logo_dark") is the same mark drawn for the dark palette, since the grey wordmark of the light one all but disappears on the dark header; the palettes' --logo-* values pick between the pair. The link carries the site's name as its aria-label, so it reads the same whichever file is showing and whether or not either has loaded. */ .site-title img.site-logo { height: 2.5rem; } .site-title img.site-logo-light { display: var(--logo-light); } .site-title img.site-logo-dark { display: var(--logo-dark); } /* the masthead is the site's name, not a link among links: no rule on hover either (a:hover outranks .site-title, so it says so itself) */ .site-title:hover { text-decoration-line: none; } /* The nav is a row of tabs, not a row of links: no text underline, and the current page's item is bold ink with a 3px accent bar on the header's bottom edge, the tab convention rather than the link rule. jupyter.org's navbar sets the current item in orange text, the 2.8:1 the link rule exists to avoid. The bar reaches the edge by padding each item down through the bar's own bottom padding and pulling it back with a matching negative margin, so the bar sits on the header's border rather than under the text. That pull is also why the nav is a flex row rather than a line of inline-blocks: on a narrow screen its items wrap, and an inline line box is sized to the pulled-in margin box, so each wrapped row would be laid .9375rem short of the row above and the row above would draw its accent bar straight through the words below it. A flex row is measured by that same margin box, but row-gap adds the space back: 1.25rem clears the .9375rem the pull takes out and leaves a little air besides, so each row stands clear of the one above while the last row still lands its bar on the header's border. The gaps space the items along the row too, so no item carries a margin of its own. */ .site-header nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; row-gap: 1.25rem; } .site-header nav a { display: inline-block; padding-bottom: calc(.9375rem - 3px); margin-bottom: -.9375rem; border-bottom: 3px solid transparent; color: var(--soft); font-weight: 500; } .site-header nav a:hover { color: var(--ink); } .site-header nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); } .theme-picker { display: inline-flex; vertical-align: middle; } .theme-picker[hidden] { display: none; } .theme-picker button { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); cursor: pointer; } .theme-picker button:hover { color: var(--accent); } .theme-picker svg { width: 1rem; height: 1rem; } /* The font picker floats at the page's bottom-right corner, fixed to the viewport instead of sitting in the header, so it stays within reach once a long article has scrolled the header away. It is spliced in once near the end of the body (see baseof.html/base.html) rather than beside the theme button, and hidden until its script runs, like the theme button, since without JS a choice could not apply anyway. */ .font-picker, .link-picker { position: fixed; right: 1.25rem; z-index: 40; } .font-picker { bottom: 1.25rem; } /* the link picker rides directly above the font one: the same box, one select height and a gap higher, so the two read as one stack */ .link-picker { bottom: 3.85rem; color: var(--muted); } .font-picker[hidden], .link-picker[hidden] { display: none; } /* The select names the choice it is on and sets that name in the family it names, so it both says and shows what you are reading: a dropdown, not the theme button's cycling pill, since eight choices are too many to cycle one click at a time. Each