MinervaNeue/resources/skins.minerva.content.styles/main.less

@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';

// Content formatting and typography
//
// Our content is predominately text, hence visual hierarchy must be clear.
//
// Styleguide 1.

@font-size-body: 100% * @fontScalingFactor;

body {
	font-family: @fontFamilyBase;
	font-size: @font-size-body;
	line-height: 1.4;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 );
}

.content {
	line-height: @contentLineHeight;
	// 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;
		}
	}
}

@font-size-body-mobile: 0.8 * @font-size-body;

@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
	body {
		font-size: @font-size-body-mobile;
	}

	.content {
		margin: 0 12px;
	}
}

.client-js {
	.collapsible-block {
		display: none;

		&.open-block {
			display: block;
		}
	}
}

.nomobile {
	// No mobile should trump any other class. e.g. .content table { display: table; }
	display: none !important;
}

@media all and ( min-width: @width-breakpoint-tablet ) {
	.client-js {
		// Avoid flash of unstyled content for tablet users while JavaScript is loading
		// onclick attribute is removed by the toggling code.
		[ onclick ] + .collapsible-block {
			display: block;
		}
	}
}

// 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
	}

	// 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
	// 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;
	}

	@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
		body {
			font-size: @font-size-body-mobile * @dynamicTypeScalingFactor;
		}
	}
}