Furo: ensure it properly formats custom directives #327
Assignees
Milestone
Comments
Eric-Arellano
added a commit
that referenced
this issue
May 16, 2023
) Closes #323. These are used by several Qiskit projects, so we should de-duplicate them.  ## Alternative considered: stop using these elements For example, these elements will be somewhat tricky to get working with Furo: #327. We considered removing these design elements and instead using standard Sphinx. For example, rather than having `qiskit-call-to-action-item` with its clickable button to go to a URL, we could instead rely on normal Sphinx links, or the left table of contents, and decide we don't care about the button. We decided that we like these design elements enough to keep them. It would be a UX regression to remove them. We may want to improve the styling—but we will still need the RST directive. We may also remove these directives in some future, but only after finding a better alternative. --------- Co-authored-by: Abby Mitchell <[email protected]>
This was referenced Jun 23, 2023
Eric-Arellano
added a commit
that referenced
this issue
Jun 23, 2023
…tive (#415) With `qiskit-card-item`, we expected you to have raw HTML in your RST file with specific CSS classes so that everything would work correctly. That was an antipattern, and not necessary since a card is an independent visual unit that doesn't depend on its siblings. Now, users only specify `qiskit-card` in their RST. This PR also simplifies the HTML and CSS structure for the element: * Removes unused CSS classes. * Removes the `tags` option for the directive. It was unused in production. * Renames CSS classes to use the format `qiskit-card-x`. * Moves all CSS into our custom classes, rather than using generic classes like `.card-body` that won't exist in Furo. This will make #327 simpler. Before:  After (my viewport changes a little): 
Eric-Arellano
added a commit
that referenced
this issue
Jun 29, 2023
Part of #327. We use the same general design as Pytorch, but with several improvements: * The image stays a fixed size so that the aspect ratio is respected better and it doesn't constantly shrink and expand. * Uses flexbox rather than media queries. This results in a much smoother experience when resizing the screen. * Gets rid of a weird black overlay we were putting over the image. Instead, now we set opacity to 0.7 when not highlighted. * Adds a border so that there is a more distinct flat design. Pytorch design: 
Eric-Arellano
added a commit
that referenced
this issue
Jun 30, 2023
Closes #327. This uses an extremely similar style to Pytorch:  It's main change is using our color variables. The padding is also a little less intense. The icon implementation is awkward, but I couldn't figure out how to reuse the icon from `icons.html` easily because we still need to support Pytorch. So, I went with this implementation and opened #433 to improve it once we drop Pytorch.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See #326. This will be tricky because it's using CSS classes from Bootstrap that we won't have in Furo. We may need to have multiple CSS classes, a set of Furo classes and a set of Pytorch classes.
Another possibility is to use Web Components to implement these directives.
The text was updated successfully, but these errors were encountered: