mediawiki-skins-MinervaNeue/resources/skins.minerva.base.styles/content/main.less

75 lines
1.9 KiB
Plaintext
Raw Normal View History

@import '../../../minerva.less/minerva.variables.less';
@import '../../../minerva.less/minerva.mixins.less';
@import 'toc.less';
// Content formatting and typography
//
// Our content is predominately text, hence visual hierarchy must be clear.
body {
font-family: @font-family-base;
Enable Dynamic Type in iOS 9+ browsers Dynamic Type is a feature in iOS that lets users pick their reading size so that apps can adjust their text size accordingly. This commit makes the mobile site hook into that feature. If you go to settings > Accessibility > Larger Text in iOS and increase or decrease the reading size, the mobile site will now increase / decrease its text size relative to that setting. Notable changes: * Moved `font-size: 100% * @fontScalingFactor` from html to body. This rule would override Dynamic Type sizing which would effectively disable it. Moving it to the body makes the rule be relative to Dynamic Type instead of overriding it in iOS browsers while browsers that don't support Dynamic Type should observe no visible changes. * Removed intermediate variable @bodyLineHeight because it was only being used in one place. * Added @font-size-body-mobile and made it based on % instead of em (which is what @font-size-body uses). @font-size-mobile-bod is used by a media query in browsers that support Dynamic Type and by another media query in browsers that don't support Dynamic Type. * Added a feature query for Dynamic Type which will make Dynamic Type CSS rules only affect browsers that support Dynamic Type. This limits the feature to iOS 9+ feature but ensures that the css rules don't affect browsers that don't support Dynamic Type. * Scaled down Dynamic Type so that its default size would appear identical to the common browser default text size of 16px. By not doing this, the default font size in iOS browsers would be 17px (Dynamic Type's default) and would appear 1px larger than Android browsers. Bug: T204807 Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-03 05:17:48 +00:00
line-height: 1.4;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 );
overflow-y: scroll;
}
.content {
line-height: @line-height-content;
// Deal with long links (bug 60387)
word-wrap: break-word;
/* Emulate Center - from mediawiki.skinning/elements.css */
.center {
width: 100%;
text-align: center;
> *,
.thumb {
margin-left: auto;
margin-right: auto;
}
}
}
// Feature phones < 320px viewport receive smaller font.
@media all and ( max-width: @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;
}
Enable Dynamic Type in iOS 9+ browsers Dynamic Type is a feature in iOS that lets users pick their reading size so that apps can adjust their text size accordingly. This commit makes the mobile site hook into that feature. If you go to settings > Accessibility > Larger Text in iOS and increase or decrease the reading size, the mobile site will now increase / decrease its text size relative to that setting. Notable changes: * Moved `font-size: 100% * @fontScalingFactor` from html to body. This rule would override Dynamic Type sizing which would effectively disable it. Moving it to the body makes the rule be relative to Dynamic Type instead of overriding it in iOS browsers while browsers that don't support Dynamic Type should observe no visible changes. * Removed intermediate variable @bodyLineHeight because it was only being used in one place. * Added @font-size-body-mobile and made it based on % instead of em (which is what @font-size-body uses). @font-size-mobile-bod is used by a media query in browsers that support Dynamic Type and by another media query in browsers that don't support Dynamic Type. * Added a feature query for Dynamic Type which will make Dynamic Type CSS rules only affect browsers that support Dynamic Type. This limits the feature to iOS 9+ feature but ensures that the css rules don't affect browsers that don't support Dynamic Type. * Scaled down Dynamic Type so that its default size would appear identical to the common browser default text size of 16px. By not doing this, the default font size in iOS browsers would be 17px (Dynamic Type's default) and would appear 1px larger than Android browsers. Bug: T204807 Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-03 05:17:48 +00:00
// Support iOS 9+ browsers: Enable Dynamic Type resizing, see
// http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
// & T204807.
@supports ( font: -apple-system-body ) {
html {
font: -apple-system-body; // stylelint-disable-line font-family-no-missing-generic-family-keyword
Enable Dynamic Type in iOS 9+ browsers Dynamic Type is a feature in iOS that lets users pick their reading size so that apps can adjust their text size accordingly. This commit makes the mobile site hook into that feature. If you go to settings > Accessibility > Larger Text in iOS and increase or decrease the reading size, the mobile site will now increase / decrease its text size relative to that setting. Notable changes: * Moved `font-size: 100% * @fontScalingFactor` from html to body. This rule would override Dynamic Type sizing which would effectively disable it. Moving it to the body makes the rule be relative to Dynamic Type instead of overriding it in iOS browsers while browsers that don't support Dynamic Type should observe no visible changes. * Removed intermediate variable @bodyLineHeight because it was only being used in one place. * Added @font-size-body-mobile and made it based on % instead of em (which is what @font-size-body uses). @font-size-mobile-bod is used by a media query in browsers that support Dynamic Type and by another media query in browsers that don't support Dynamic Type. * Added a feature query for Dynamic Type which will make Dynamic Type CSS rules only affect browsers that support Dynamic Type. This limits the feature to iOS 9+ feature but ensures that the css rules don't affect browsers that don't support Dynamic Type. * Scaled down Dynamic Type so that its default size would appear identical to the common browser default text size of 16px. By not doing this, the default font size in iOS browsers would be 17px (Dynamic Type's default) and would appear 1px larger than Android browsers. Bug: T204807 Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-03 05:17:48 +00:00
}
// 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
Enable Dynamic Type in iOS 9+ browsers Dynamic Type is a feature in iOS that lets users pick their reading size so that apps can adjust their text size accordingly. This commit makes the mobile site hook into that feature. If you go to settings > Accessibility > Larger Text in iOS and increase or decrease the reading size, the mobile site will now increase / decrease its text size relative to that setting. Notable changes: * Moved `font-size: 100% * @fontScalingFactor` from html to body. This rule would override Dynamic Type sizing which would effectively disable it. Moving it to the body makes the rule be relative to Dynamic Type instead of overriding it in iOS browsers while browsers that don't support Dynamic Type should observe no visible changes. * Removed intermediate variable @bodyLineHeight because it was only being used in one place. * Added @font-size-body-mobile and made it based on % instead of em (which is what @font-size-body uses). @font-size-mobile-bod is used by a media query in browsers that support Dynamic Type and by another media query in browsers that don't support Dynamic Type. * Added a feature query for Dynamic Type which will make Dynamic Type CSS rules only affect browsers that support Dynamic Type. This limits the feature to iOS 9+ feature but ensures that the css rules don't affect browsers that don't support Dynamic Type. * Scaled down Dynamic Type so that its default size would appear identical to the common browser default text size of 16px. By not doing this, the default font size in iOS browsers would be 17px (Dynamic Type's default) and would appear 1px larger than Android browsers. Bug: T204807 Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-03 05:17:48 +00:00
// 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-root * @dynamicTypeScalingFactor;
Enable Dynamic Type in iOS 9+ browsers Dynamic Type is a feature in iOS that lets users pick their reading size so that apps can adjust their text size accordingly. This commit makes the mobile site hook into that feature. If you go to settings > Accessibility > Larger Text in iOS and increase or decrease the reading size, the mobile site will now increase / decrease its text size relative to that setting. Notable changes: * Moved `font-size: 100% * @fontScalingFactor` from html to body. This rule would override Dynamic Type sizing which would effectively disable it. Moving it to the body makes the rule be relative to Dynamic Type instead of overriding it in iOS browsers while browsers that don't support Dynamic Type should observe no visible changes. * Removed intermediate variable @bodyLineHeight because it was only being used in one place. * Added @font-size-body-mobile and made it based on % instead of em (which is what @font-size-body uses). @font-size-mobile-bod is used by a media query in browsers that support Dynamic Type and by another media query in browsers that don't support Dynamic Type. * Added a feature query for Dynamic Type which will make Dynamic Type CSS rules only affect browsers that support Dynamic Type. This limits the feature to iOS 9+ feature but ensures that the css rules don't affect browsers that don't support Dynamic Type. * Scaled down Dynamic Type so that its default size would appear identical to the common browser default text size of 16px. By not doing this, the default font size in iOS browsers would be 17px (Dynamic Type's default) and would appear 1px larger than Android browsers. Bug: T204807 Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-03 05:17:48 +00:00
}
@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
body {
font-size: @font-size-root--feature-phone * @dynamicTypeScalingFactor;
Enable Dynamic Type in iOS 9+ browsers Dynamic Type is a feature in iOS that lets users pick their reading size so that apps can adjust their text size accordingly. This commit makes the mobile site hook into that feature. If you go to settings > Accessibility > Larger Text in iOS and increase or decrease the reading size, the mobile site will now increase / decrease its text size relative to that setting. Notable changes: * Moved `font-size: 100% * @fontScalingFactor` from html to body. This rule would override Dynamic Type sizing which would effectively disable it. Moving it to the body makes the rule be relative to Dynamic Type instead of overriding it in iOS browsers while browsers that don't support Dynamic Type should observe no visible changes. * Removed intermediate variable @bodyLineHeight because it was only being used in one place. * Added @font-size-body-mobile and made it based on % instead of em (which is what @font-size-body uses). @font-size-mobile-bod is used by a media query in browsers that support Dynamic Type and by another media query in browsers that don't support Dynamic Type. * Added a feature query for Dynamic Type which will make Dynamic Type CSS rules only affect browsers that support Dynamic Type. This limits the feature to iOS 9+ feature but ensures that the css rules don't affect browsers that don't support Dynamic Type. * Scaled down Dynamic Type so that its default size would appear identical to the common browser default text size of 16px. By not doing this, the default font size in iOS browsers would be 17px (Dynamic Type's default) and would appear 1px larger than Android browsers. Bug: T204807 Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
2018-10-03 05:17:48 +00:00
}
}
}