Skip to content

Commit feb5fc2

Browse files
authored
Increase horizontal whitespace between navbar icon links (#1964)
Fixes external issue: Quansight-Labs/czi-scientific-python-mgmt#81 This PR increases the horizontal gap between the navbar icons slightly (1rem to 1.12rem) to align better with accessibility guidelines. The idea is to make sure that the circle targets (pink) do not overlap. <See Image in pr 1964> It would be nice if we could rework the navbar icon links to have a known hit area at build time (hit area being the union of width, height, and padding). That way we could calculate the [needed horizontal and vertical margins](Quansight-Labs/czi-scientific-python-mgmt#81 (comment)) with SCSS, like so: ```scss @mixin enclosing-circle-margin($hit-area-width, $hit-area-height) { // the diagonal of the hit area rectangle is also the diameter of the minimum enclosing circle $hit-area-diagonal: math.hypot($hit-area-width, $hit-area-height); $mx: ($hit-area-diagonal - $hit-area-width) / 2; $my: ($hit-area-diagonal - $hit-area-height) / 2; margin: $my $mx; } ``` But that will have to be for another time.
1 parent 7c9cb67 commit feb5fc2

File tree

3 files changed

+7
-2
lines changed

3 files changed

+7
-2
lines changed

src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
ul.navbar-icon-links {
2828
display: flex;
2929
flex-flow: row wrap;
30-
column-gap: 1rem;
30+
column-gap: $nav-icon-column-gap;
3131
justify-content: space-evenly;
3232
align-items: center;
3333
padding-left: 0;

src/pydata_sphinx_theme/assets/styles/sections/_header.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565

6666
.navbar-header-items__end,
6767
.navbar-header-items__center {
68-
column-gap: 1rem;
68+
column-gap: $nav-icon-column-gap;
6969
}
7070

7171
// A little smaller because this is displayed by default on mobile

src/pydata_sphinx_theme/assets/styles/variables/_layout.scss

+5
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,8 @@ $admonition-border-radius: 0.25rem;
3737
$focus-ring-radius: 0.125rem; // 2px at 100% zoom and 16px base font.
3838

3939
$navbar-link-padding-y: 0.25rem;
40+
41+
// Ensure that there is no overlap of bumper disks (smallest circle that
42+
// contains the bounding box of the interactive element).
43+
// - https://github.com/Quansight-Labs/czi-scientific-python-mgmt/issues/81#issuecomment-2251325783
44+
$nav-icon-column-gap: 1.12rem;

0 commit comments

Comments
 (0)