Our current trick works great for headings or landmarks `:target`ed by links activation, however it still allows focus to be hidden under the sticky header.
1. Go to any docs page,
2. use a TOC link to scroll down the page,
3. then `Shift`+`Tab` to navigate backward using keyboard.
You should see on some browsers (mainly Firefox from my tests, but it used to do the same in Chrome) that focused elements isn't visible, hidden by our sticky header.
Applying `scroll-padding-top` to the `:root` solves this without any side-effect—but it requires to drop `scroll-margin-top` for anchors to prevent doubling the offset.
FWIW based on my test, Edgium and Chromium don't really care since they seem to have a new heuristic for such cases, making the focused element scroll to the center of the view.
* Revert "Adapt to the recent main changes"
This reverts commit 50d8921670.
* Revert "Add Hugo Pipes logic for local and vendored scripts."
This reverts commit 3fcfd606f2.
* Revert "Use Hugo mounts for our docs vendor JS files."
This reverts commit 6b071116f3.
apart from the visual styling, there's probably no good reason why these shouldn't be `<button>` elements, semantically
the buttons still look a shade too button-like, despite using `.btn-light`. the last remnant of button styling can probably be suppressed further, *or* this makes the case for expanding the core button styles to have one that looks completely non-button and non-link like (for cases where an additional style/hint was given already, or it's clear from context that something's an actionable button or link)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Documentation: Add slash key event to focus the input search.
* Add little tag for keyboard shortcut in the search field
* Use ctrl / as keyboard shortcut
* Update search.js
Co-authored-by: chuckrincon <chuckrincon@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Make docs anchorjs links darker on keyboard focus
Not just on mouse hover
* Update site/assets/scss/_anchor.scss
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Hide the docs nav on mobile, redesign it for two columns on narrow devices
* Tweak spacing on ToC
* Redesign sidebar and subnav
* Revamp subnav mobile layout so everything's on one line
* Tighten up masthead a little
* Switch the icon for the subnav and do a little icon toggling
* Fix mobile overflow since we changed guters stuff
* Add the widths
* make the subnav icon purple
- Remove group selector for ratio items
- Drop the .ratio-item entirely
- Update docs to explain updated approach
- Update Migration guide to reflect the latest
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
* Extra position utilities
Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.
* Update extra position utilities
* add default position values map
* tweak examples
* add real life examples
* fix double colon
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
