diff --git a/docs/_extensions/mcanouil/atelier/_extension.yml b/docs/_extensions/mcanouil/atelier/_extension.yml index f0cc22a..036e64f 100644 --- a/docs/_extensions/mcanouil/atelier/_extension.yml +++ b/docs/_extensions/mcanouil/atelier/_extension.yml @@ -1,6 +1,6 @@ title: Atelier author: Mickaël Canouil -version: 0.9.0 +version: 0.10.1 quarto-required: ">=1.9.36" contributes: project: @@ -84,4 +84,4 @@ contributes: - file: html/scripts/ordinal-dates.html - file: html/scripts/a11y-fixes.html - file: html/scripts/navbar-tooltips.html -source: mcanouil/quarto-atelier@0.9.0 +source: mcanouil/quarto-atelier@0.10.1 diff --git a/docs/_extensions/mcanouil/atelier/html/theme.scss b/docs/_extensions/mcanouil/atelier/html/theme.scss index 98e9c7e..33aee3e 100644 --- a/docs/_extensions/mcanouil/atelier/html/theme.scss +++ b/docs/_extensions/mcanouil/atelier/html/theme.scss @@ -124,6 +124,49 @@ h6 { letter-spacing: var(--atelier-heading-letter-spacing, 0.012em); } +// =========================================================================== +// FRAMED EMBEDS +// =========================================================================== +// The one class in this file an author opts into by typing it, rather than a +// repaint of markup Quarto emits on its own; a second such class belongs here +// too. It lands on the element itself: Pandoc writes an image whose target is +// not an image as a bare inside a paragraph, with no +// wrapper to hang a descendant selector on, so `margin-inline: auto` is what +// centres it rather than a `text-align: center` wrapper around it. +// The frame carries no size of its own, so it takes the shape of what it +// frames and the padding stays the same on all four sides. Forcing a shape on +// the card instead would letterbox anything that did not match it, which reads +// as a wide band of padding down one axis and none on the other. +.embed-art { + display: block; + max-width: 100%; + margin-inline: auto; + padding: 0.75rem; + background: $body-bg; + border: 1.5px solid $body-color; + border-radius: $border-radius-lg; + box-shadow: 4px 4px 0 0 $body-color; + transform: rotate(var(--atelier-embed-art-tilt, -1.25deg)); + transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); +} + +// An is the one case with no size to follow: a nested browsing context +// does not report the page dimensions of the document inside it to the layout +// around it. Pandoc passes `width=` and `height=` on the image straight +// through, so an author who gives the card a size gets it; these defaults are +// only what an falls back to when neither is set. +embed.embed-art:not([width]) { + width: var(--atelier-embed-art-width, 560px); + aspect-ratio: var(--atelier-embed-art-ratio, 1.5); +} + +// Hover relaxes the card toward straight. Taking a proportion of the resting +// tilt rather than a second absolute angle keeps the gesture coherent at any +// angle an author sets, and in either direction. +.embed-art:hover { + transform: rotate(calc(var(--atelier-embed-art-tilt, -1.25deg) * 0.32)); +} + // =========================================================================== // CODE SURFACES // =========================================================================== @@ -840,9 +883,20 @@ $scrollbar-thumb: body-mix(72%); // =========================================================================== // MOTION GUARD // =========================================================================== +// Every motion the theme owns or inherits is cancelled here, in one place. The +// navbar selectors carry no transition from this file: they cancel Bootstrap's. @media (prefers-reduced-motion: reduce) { .navbar .nav-link, - .navbar .dropdown-item { + .navbar .dropdown-item, + .panel-tabset .nav-tabs .nav-link, + .embed-art { transition: none; } + + // Dropping the transition alone would leave the tilt change as an instant + // snap, which is still the decorative motion the preference asks for less + // of; hold the card at its resting angle instead. + .embed-art:hover { + transform: rotate(var(--atelier-embed-art-tilt, -1.25deg)); + } } diff --git a/docs/_extensions/mcanouil/gitlink/_extension.yml b/docs/_extensions/mcanouil/gitlink/_extension.yml index eef6217..a2f4e17 100644 --- a/docs/_extensions/mcanouil/gitlink/_extension.yml +++ b/docs/_extensions/mcanouil/gitlink/_extension.yml @@ -1,8 +1,8 @@ title: gitlink author: Mickaël Canouil -version: 1.9.0 +version: 1.9.1 quarto-required: ">=1.8.21" contributes: filters: - gitlink.lua -source: mcanouil/quarto-gitlink@1.9.0 +source: mcanouil/quarto-gitlink@1.9.1 diff --git a/docs/_extensions/mcanouil/gitlink/widget.css b/docs/_extensions/mcanouil/gitlink/widget.css index 83ee75f..38ac1be 100644 --- a/docs/_extensions/mcanouil/gitlink/widget.css +++ b/docs/_extensions/mcanouil/gitlink/widget.css @@ -224,8 +224,13 @@ tools (colour-scheme toggle, reader toggle, overlay search). The marker class is set by widget.js on whichever tools container the placeholder was in; the id keeps this ahead of Quarto's own `.sidebar-tools-main` rather - than relying on stylesheet order. */ + than relying on stylesheet order. + + The row is also the containing block for the overlay menu below. It spans + the sidebar, where the centred trigger does not, so anchoring the menu here + is what keeps it inside the column. */ #quarto-sidebar .gitlink-widget-tools { + position: relative; display: flex; flex-direction: column; align-items: center; @@ -241,9 +246,12 @@ /* The widget sits below the icon tools (colour-scheme and reader toggles) and above the search control, whether search is the sidebar field below the row - or an overlay button inside it. */ + or an overlay button inside it. `position: static` hands the menu's + containing block up to the row: the widget is `position: relative` by + default, which would otherwise anchor the menu to the trigger pill. */ .gitlink-widget-tools .gitlink-widget { order: 1; + position: static; } .gitlink-widget-tools #quarto-search { @@ -252,14 +260,24 @@ /* A tool sits in a strip of icon-sized controls, where an inline menu would be laid out as another flex item beside them, so it keeps the overlay menu. - The menu is anchored to the trigger's left edge and takes its content width - (no 14rem floor) so it stays inside the sidebar, which clips overflow - rather than scrolling sideways. */ + + Quarto's sidebar does not clip: it sets `overflow-y: auto` and leaves + `overflow-x` at `visible`, which computes to `auto`, so a menu wider than + the column scrolls it sideways instead. The menu is hidden with + `visibility` rather than `display`, so it takes part in layout even while + shut and the scrollbar is there before anything is opened. + + Stretching it between both edges of the row (which the rule above made the + containing block) is what bounds it: the trigger is centred, so anchoring + to the trigger left the menu running past the column's right edge. `width` + has to give way with it, since a specified width over-constrains an + absolutely positioned box and `right` is the offset that gets dropped, and + the 14rem floor has to go for the same reason on a narrow sidebar. */ .gitlink-widget-tools .gitlink-widget-dropdown { left: 0; - right: auto; + right: 0; min-width: 0; - width: max-content; + width: auto; } /* The collapsed navbar-nav is a Bootstrap `.navbar-nav-scroll` region