wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-17 19:21:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Add @font-size-root var and rename @font-size-body-mobile"

Browse source
This commit is contained in:
jenkins-bot 2019-12-13 18:20:14 +00:00 committed by Gerrit Code Review
parent e6167790fa 09d0feb287
commit 11edb80818
3 changed files with 10 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
minerva.less/minerva.variables.less
View file

@ -16,6 +16,8 @@
@fontFamilyBase: @fontFamilySans;
@font-size-browser: 16; // Assumed browser default of `16px`.
@font-size-root: 100%;
@font-size-root--feature-phone: 0.8 * @font-size-root;
@font-size-minerva-small: unit( 14 / @font-size-browser, em ); // Equals `14px` at `16px` browser default.
@font-size-minerva-smallest: unit( 13 / @font-size-browser, em ); // Equals `13px` at `16px` browser default.
@tocFontSize: @font-size-minerva-small;

3
resources/skins.minerva.base.styles/ui.less
View file

@ -10,8 +10,7 @@ body {
}
html {
// FIXME: Still from Eric Meyer's reset, that should be better fine-grained.
font-size: 100%;
font-size: @font-size-root;
// Support Safari: Prevent font scaling in landscape
-webkit-text-size-adjust: none;
}

18
resources/skins.minerva.content.styles/main.less
View file

@ -9,11 +9,8 @@
//
// Styleguide 1.
@font-size-body: 100%;
body {
font-family: @fontFamilyBase;
font-size: @font-size-body;
line-height: 1.4;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 );
overflow-y: scroll;
@ -37,11 +34,10 @@ body {
}
}
@font-size-body-mobile: 0.8 * @font-size-body;
// Feature phones < 320px viewport receive smaller font.
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
body {
font-size: @font-size-body-mobile;
html {
font-size: @font-size-root--feature-phone;
}
.content {
@ -63,19 +59,19 @@ 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-body and
// @font-size-body-mobile by this ratio in order to make them relative to these
// 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
// will appear identical to the browser's default text size.
@dynamicTypeScalingFactor: 16 / 17;
body {
font-size: @font-size-body * @dynamicTypeScalingFactor;
font-size: @font-size-root * @dynamicTypeScalingFactor;
}
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
body {
font-size: @font-size-body-mobile * @dynamicTypeScalingFactor;
font-size: @font-size-root--feature-phone * @dynamicTypeScalingFactor;
}
}
}