Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Call to Action directive to use chevron-right after dropping Pytorch #433

Closed
Eric-Arellano opened this issue Jun 29, 2023 · 1 comment · Fixed by #602
Closed
Milestone

Comments

@Eric-Arellano
Copy link
Collaborator

For our call to action item, we need a right purple chevron:
Screenshot 2023-06-29 at 3 15 10 PM

I implemented that in ... by using a url() with an inline SVG, similar to how we do it in Pytorch.

But we already define a chevron in HTML:

<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
{#- We add `stroke` so that setting the color in outer CSS rules works, which Furo does. -#}
<polygon points="22,16 12,26 10.6,24.6 19.2,16 10.6,7.4 12,6 " stroke="currentColor"/>
<rect id="_x3C_Transparent_Rectangle_x3E_" fill="none" width="32" height="32"/>
</svg>
</symbol>

We should reuse this icon and use CSS to style it, e.g. change the stroke color.

I only didn't do this because it would be too complex to have a split implementation in Furo vs. Pytorch.

Eric-Arellano added a commit that referenced this issue Jun 30, 2023
Closes #327.

This uses an extremely similar style to Pytorch:


![pytorch-cats](https://github.com/Qiskit/qiskit_sphinx_theme/assets/14852634/8df4e519-b09d-4cac-ae88-23e2fa693a72)

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.
@Eric-Arellano Eric-Arellano added this to the Ecosystem Theme milestone Jul 13, 2023
@Eric-Arellano
Copy link
Collaborator Author

This blocks the ecosystem because it blocks #487. We need to have the stroke color be var(--color-brand-primary).

@Eric-Arellano Eric-Arellano self-assigned this Jul 13, 2023
@Eric-Arellano Eric-Arellano removed this from the Ecosystem Theme milestone Jul 18, 2023
@Eric-Arellano Eric-Arellano added this to the Theme 2.0 milestone Feb 5, 2024
@Eric-Arellano Eric-Arellano removed their assignment Feb 5, 2024
Eric-Arellano added a commit that referenced this issue Apr 30, 2024
Closes #433. This is
mainly to reduce tech debt.

Note that the color changed to a darker purple. Our color palette in the
Furo theme only has the darker color of purple available, so this is
acceptable.

The icon is also a little smaller. I didn't spend much time trying to
get the original size because the new size seems fine and this custom
directive is not widely used.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
Status: Backlog
Development

Successfully merging a pull request may close this issue.

1 participant