styles: Replace deprecated breakpoints

The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I56b93d5241d6a029dcb6814de02d18ac9f38ee5d
This commit is contained in:
Volker E 2023-11-07 01:21:12 -08:00 committed by VolkerE
parent b33513e20b
commit dd5b98515d

View file

@ -1,16 +1,5 @@
@import 'mediawiki.skin.variables.less'; @import 'mediawiki.skin.variables.less';
//
// == Media query breakpoints ==
// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html
//
@max-width-breakpoint-mobile: 719px;
@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`.
@max-width-breakpoint-tablet: 999px;
@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`.
@max-width-breakpoint-desktop: 1199px;
@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`.
// Defines the minimum viewport width, at which point the layout will not get any // Defines the minimum viewport width, at which point the layout will not get any
// smaller and will start horizontal scrolling instead. // smaller and will start horizontal scrolling instead.
@min-width-supported: unit( 500px / @font-size-browser, em ); @min-width-supported: unit( 500px / @font-size-browser, em );