/* Custom stylesheet for the Composing Programs site. Loaded by the book theme * via `site.options.style: custom.css` in myst.yml, so it applies to both the * `jupyter book start` dev server and the static export. */ /* This repository is private and the published book is a plain static site: * hide the "Download" control the book theme adds to every notebook page. * (The static build also strips the underlying source export in build.sh.) */ .myst-fm-downloads-dropdown { display: none !important; } /* Interface icons (such as the VS Code Extensions icon in section 1.1) appear * within a sentence, so size them to the surrounding text rather than letting * the theme lay them out as standalone figures. The build renames images with a * content hash, hence the substring match on the source file name. */ img[src*="vscode_extension"] { display: inline; width: auto; height: 1.1em; margin: 0 0.1em; vertical-align: -0.15em; } /* MyST wraps every image in a element, which the theme's prose styles * lay out as a block with 2em of margin above and below. Collapse that wrapper * for inline icons as well, or the icon still breaks out of the sentence. */ picture:has(img[src*="vscode_extension"]) { display: inline; margin: 0; } /* Environment diagrams are far wider than the prose measure -- the ones in 1.6 * range from 980px to 1200px, against a `body` column of roughly 720px -- so * the blocks holding them reach into the right margin that turning off the * per-page "Contents" outline freed up (site.options.hide_outline in myst.yml). * `page-end` is as wide as anything can be without running underneath the * sidebar. The prose itself keeps the theme's `body` column. */ article.content > *:has(iframe.env-diagram) { grid-column: body-start / page-end; } /* Dark mode is not supported: the Online Python Tutor front end embedded in the * environment diagrams has a single light theme, and a dark page around white * diagrams looks broken. Hide the light/dark switch in the top nav; build.sh * pins the computed theme itself to light, in the pages and in the client * bundle, so nothing puts `dark` on in the first place. */ .myst-theme-button { display: none !important; } /* Environment-diagram iframes render their own chrome; keep them flush. * * A diagram has a natural minimum width of roughly 900px, so in a narrow window * it is wider than the column. The iframe document scrolls horizontally in that * case (see pytutor._iframe), which requires that the iframe itself not clip: * it is exactly as wide as the column, and the scrollbar belongs to its own * viewport. */ iframe.env-diagram { border: none; width: 100%; max-width: 100%; }