From 9505e274ee60f867b9e4b673ec31cd3d1cc10992 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 28 Jan 2025 14:49:40 +0000 Subject: [PATCH] docs: update notes about breakpoints to reflect jupyter-book/myst-theme#506 (#1819) --- docs/dropdowns-cards-and-tabs.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/dropdowns-cards-and-tabs.md b/docs/dropdowns-cards-and-tabs.md index 5fb0b5adc..2118dd13e 100644 --- a/docs/dropdowns-cards-and-tabs.md +++ b/docs/dropdowns-cards-and-tabs.md @@ -43,14 +43,14 @@ Card content You can also add a `link` option to the card, which will allow you to make the entire card clickable: -````{myst} +```{myst} :::{card} Clickable Card :link: https://mystmd.org The entire card can be clicked to navigate to `mystmd.org`. ::: -```` +``` ````{note} Compatibility with Sphinx design :class: dropdown @@ -76,6 +76,7 @@ Footer Note that, card headers and footers are optional. If you don’t include ^^^ or +++ in your card, they will not show up. ```` + :::{myst:directive} card ::: @@ -90,6 +91,7 @@ A button is an element with text content that triggers an action to navigate to ```{myst} {button}`MyST-MD GitHub ` ``` + :::{myst:role} button ::: @@ -99,7 +101,7 @@ Grids allow you to structure arbitrary chunks of content in a grid-like system. To generate a grid, use the ` ```{grid} ` wrapper directive along with ` ```{card} ` directives inside. -The numbers supplied in the argument are column counts to be used on different screen sizes e.g. `1 1 2 3` corresponding to extra-small (<576px), small (768px), medium (992px) and large screens (>1200px). +The numbers supplied in the argument are column counts to be used on different screen sizes e.g. `1 1 2 3` corresponding to smallest (<768px), medium (768px – 1024px), large (1024px – 1280px), and extra-large screens (>1280px). These pixel widths are determined by the theme (e.g. the book theme), which uses the default Tailwind CSS breakpoints. For example: