wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-09-23 10:19:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: remove outdated feature phone font size rules

Browse source 
Nowadays even Apple iWatch has a minimum resolution of 352 pixels,
so we can safely remove the outdated feature phone font rules and
save bytes down-the-wire for users.

Bug: T369247
Change-Id: Ib482a32b0ed288ae1ea4e0b9dca5f6fdf74eb845
This commit is contained in:
Volker E. 2024-06-10 11:34:00 +03:00 committed by Jdlrobson
parent 207ef7bd71
commit 9380b86c2b
2 changed files with 7 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
minerva.less/minerva.variables.less
View file

@ -16,7 +16,6 @@
@font-size-browser: 16; // Assumed browser default of `16px`. @font-size-browser: 16; // Assumed browser default of `16px`.
@font-size-root: 100%; @font-size-root: 100%;
@font-size-root--feature-phone: 0.8 * @font-size-root;
// T282315: Use rem instead of em to avoid font-size compounding, resulting in smaller than intended text // T282315: Use rem instead of em to avoid font-size compounding, resulting in smaller than intended text
@font-size-minerva-small: unit( 14 / @font-size-browser, rem ); // Equals `14px` at `16px` browser default. @font-size-minerva-small: unit( 14 / @font-size-browser, rem ); // Equals `14px` at `16px` browser default.
@font-size-minerva-smallest: unit( 13 / @font-size-browser, rem ); // Equals `13px` at `16px` browser default. @font-size-minerva-smallest: unit( 13 / @font-size-browser, rem ); // Equals `13px` at `16px` browser default.

27
resources/skins.minerva.base.styles/content/main.less
View file

@ -5,6 +5,10 @@
// Content formatting and typography // Content formatting and typography
// //
// Our content is predominately text, hence visual hierarchy must be clear. // Our content is predominately text, hence visual hierarchy must be clear.
html {
/* We do not support browsers that render at widths below 320px */
min-width: 320px;
}
body { body {
font-family: @font-family-base; font-family: @font-family-base;
@ -31,17 +35,6 @@ body {
} }
} }
// Feature phones < 320px viewport receive smaller font.
@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
html {
font-size: @font-size-root--feature-phone;
}
.content {
margin: 0 12px;
}
}
.nomobile { .nomobile {
// No mobile should trump any other class. e.g. .content table { display: table; } // No mobile should trump any other class. e.g. .content table { display: table; }
display: none !important; display: none !important;
@ -56,19 +49,13 @@ body {
} }
// Most iOS browsers' default font size is 16px but Dynamic Type's default // Most iOS browsers' default font size is 16px but Dynamic Type's default
// font size is 17px. We need to scale down @font-size-root and // font size is 17px. We need to scale down @font-size-root by this ratio
// @font-size-root--feature-phone by this ratio in order to make them relative to these // in order to make them relative to these browsers' defaults again.
// browsers' defaults again. By doing this, the default Dynamic Type text size // By doing this, the default Dynamic Type text size
// will appear identical to the browser's default text size. // will appear identical to the browser's default text size.
@dynamic-type-scaling-factor: 16 / 17; @dynamic-type-scaling-factor: 16 / 17;
body { body {
font-size: @font-size-root * @dynamic-type-scaling-factor; font-size: @font-size-root * @dynamic-type-scaling-factor;
} }
@media all and ( max-width: @min-width-breakpoint-mobile - 1 ) {
body {
font-size: @font-size-root--feature-phone * @dynamic-type-scaling-factor;
}
}
} }