-
Notifications
You must be signed in to change notification settings - Fork 317
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
Consistent focus ring (first pass) #1549
Changes from 1 commit
4062f89
1d5af58
5856c9e
99dcef3
850fc9c
357b34c
7470f40
37640dd
e2d1810
94e6804
f3f53c0
029d178
b4c08a9
e67849e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,13 +21,11 @@ A clean, Bootstrap-based Sphinx theme by and for [the PyData community](https:// | |
- header: "{fas}`circle-half-stroke;pst-color-primary` Light / Dark theme" | ||
content: "Users can toggle between light and dark themes interactively." | ||
- header: "{fas}`palette;pst-color-primary` Customizable UI and themes" | ||
content: "Customize colors and branding with CSS variables, and build custom UIs with [Sphinx Design](user_guide/web-components)." | ||
content: "Customize colors and branding with CSS variables, and build custom UIs with [Sphinx Design components](user_guide/web-components)." | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since there is another link on the home page to the same URL, it's considered good practice for accessibility to make both of them also have the same name: "Sphinx Design components." |
||
- header: "{fab}`python;pst-color-primary` Supports PyData and Jupyter" | ||
content: "CSS and UI support for Jupyter extensions and PyData execution outputs." | ||
link: "examples/pydata.html" | ||
content: "CSS and UI support for Jupyter extensions and [PyData execution outputs](examples/pydata.ipynb)." | ||
drammock marked this conversation as resolved.
Show resolved
Hide resolved
|
||
- header: "{fas}`lightbulb;pst-color-primary` Example Gallery" | ||
content: "See our gallery of projects that use this theme." | ||
link: "examples/gallery.html" | ||
content: "See [our gallery](examples/gallery.md) of projects that use this theme." | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The HTML template for cards with links decouples the link text (which should be the card I felt it would be better to bring the links into the cards for two reasons:
|
||
``` | ||
|
||
```{seealso} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -140,11 +140,6 @@ html[data-theme="light"] { | |
.sd-card-header { | ||
background-color: var(--pst-color-panel-background); | ||
border-bottom: 1px solid var(--pst-color-border); | ||
|
||
&:focus-visible { | ||
outline: $focus-ring-outline; | ||
outline-offset: -$focus-ring-width; | ||
} | ||
} | ||
.sd-card-footer { | ||
background-color: var(--pst-color-panel-background); | ||
|
@@ -154,6 +149,22 @@ html[data-theme="light"] { | |
.sd-card-body { | ||
background-color: var(--pst-color-panel-background); | ||
} | ||
|
||
// Focus ring for link-cards | ||
.sd-stretched-link:focus-visible { | ||
// Don't put the focus ring on the <a> element (it has zero height in Sphinx Design cards) | ||
outline: none; | ||
|
||
// Put the focus ring on the <a> element's ::after pseudo-element | ||
&:after { | ||
outline: $focus-ring-outline; | ||
border-radius: 0.25rem; // copied from Sphinx Design CSS for .sd-card | ||
} | ||
} | ||
|
||
&.sd-card-hover:hover { | ||
border-color: var(--pst-color-link-hover); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Snuck in a hover color correction with this commit. |
||
} | ||
} | ||
/******************************************************************************* | ||
* tabs | ||
|
@@ -261,5 +272,11 @@ details.sd-dropdown { | |
.sd-summary-down { | ||
top: 0.7rem; | ||
} | ||
|
||
// Focus ring | ||
&:focus-visible { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These focus ring CSS rules that I had put under |
||
outline: $focus-ring-outline; | ||
outline-offset: -$focus-ring-width; | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The build step was auto-linking
idtracker.ai
, outputting two anchor tags instead of one.