Skip to content

Commit

Permalink
Increase horizontal whitespace between navbar icon links (#1964)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
gabalafou authored Aug 28, 2024
1 parent 7c9cb67 commit feb5fc2
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
ul.navbar-icon-links {
display: flex;
flex-flow: row wrap;
column-gap: 1rem;
column-gap: $nav-icon-column-gap;
justify-content: space-evenly;
align-items: center;
padding-left: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@

.navbar-header-items__end,
.navbar-header-items__center {
column-gap: 1rem;
column-gap: $nav-icon-column-gap;
}

// A little smaller because this is displayed by default on mobile
Expand Down
5 changes: 5 additions & 0 deletions src/pydata_sphinx_theme/assets/styles/variables/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,8 @@ $admonition-border-radius: 0.25rem;
$focus-ring-radius: 0.125rem; // 2px at 100% zoom and 16px base font.

$navbar-link-padding-y: 0.25rem;

// Ensure that there is no overlap of bumper disks (smallest circle that
// contains the bounding box of the interactive element).
// - https://github.com/Quansight-Labs/czi-scientific-python-mgmt/issues/81#issuecomment-2251325783
$nav-icon-column-gap: 1.12rem;

0 comments on commit feb5fc2

Please sign in to comment.