makeup-style/src/default.css

Minimal CSS files for correcting, improving and normalizing default browser CSS, for narrow viewports first, and provides convenient and intuitive CSS-defaults for styling in general and typographic style.

/* INTUITIVE UNIVERSAL RULES */

html *, html ::before, html ::after {
	box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	hyphens: auto;
	overflow-wrap: break-word; overflow-wrap: anywhere; }

/* FIX/EXTEND FONT/TEXT */

code, kbd, samp, sub, sup {
	hyphens: manual;
	line-height: .625; }

::file-selector-button, button, input, select, textarea {
	font-size: 1em; }

b, strong {
	font-weight: bolder; }

abbr, hr {
	all: unset;
	box-sizing: border-box; }

hr {
	display: block;
	height: 1em;
	background: center left/100% 1px no-repeat linear-gradient(
		currentColor, currentColor
	); }

/* MAKE ELEMENTS RESPONSIVE */

input, progress, select, textarea,
audio, embed, iframe, object,
img, svg, video, canvas {
	max-width: 100%; }
img, svg, video, canvas {
	height: auto; }

pre {
	white-space: pre-wrap; }

textarea {
	resize: vertical; }

/* DISPLAY BEHAVIORS */

[hidden],
source {
	display: none; }

picture {
	display: contents; }

/* CONSISTENT ALIGNMENTS */

audio, embed, iframe, object,
img, svg, video, canvas {
	vertical-align: middle; }

figure {
	margin-right: 0; margin-left: 0; }

/* CONSISTENT CURSOR */

::file-selector-button, [role="button" i], [type="button" i], [type="reset" i], [type="submit" i], button,
select, summary {
	cursor: pointer; }

[aria-disabled="true" i], [disabled], [readonly] {
	cursor: not-allowed; }