mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-09-23 02:08:26 +00:00
styles: remove outdated feature phone font size rules
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:
parent
207ef7bd71
commit
9380b86c2b
|
@ -16,7 +16,6 @@
|
|||
|
||||
@font-size-browser: 16; // Assumed browser default of `16px`.
|
||||
@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
|
||||
@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.
|
||||
|
|
|
@ -5,6 +5,10 @@
|
|||
// Content formatting and typography
|
||||
//
|
||||
// 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 {
|
||||
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 {
|
||||
// No mobile should trump any other class. e.g. .content table { display: table; }
|
||||
display: none !important;
|
||||
|
@ -56,19 +49,13 @@ body {
|
|||
}
|
||||
|
||||
// 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-root--feature-phone by this ratio in order to make them relative to these
|
||||
// browsers' defaults again. By doing this, the default Dynamic Type text size
|
||||
// font size is 17px. We need to scale down @font-size-root by this ratio
|
||||
// in order to make them relative to these browsers' defaults again.
|
||||
// By doing this, the default Dynamic Type text size
|
||||
// will appear identical to the browser's default text size.
|
||||
@dynamic-type-scaling-factor: 16 / 17;
|
||||
|
||||
body {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue