vim.org responsive hacks (for mobile support)

vim-responsive.css

td {
	/* Bump up line height to make text easier to read */
	line-height: 1.4;
}

img:not([src*=spacer]) {
	/* Non-spacer images should fit the width and scale down if necessary */
	max-width: 100%;
	height: auto;
}

.roweven,
.rowodd {
	/* Force wrapping to better use space in tables (mainly for download tables) */
	white-space: normal;
	word-wrap: break-word;
}

.roweven:last-child,
.rowodd:last-child {
	/* Content descriptions should be wrapped at 72 characters */
	max-width: 72ch;
}

@supports (display: grid) {
	@media screen and (max-width: 800px) {
		body > table > tbody > tr[valign=top] {
			/* Table used for layout; let's override this to reformat the doc */
			display: grid;
		}

		body > table > tbody > tr[valign=top] > .sidebar:first-child {
			/* Left sidebar */
		}

		body > table > tbody > tr[valign=top] > .sidebar:first-child > table {
			/* Sidebar should fill available space */
			width: 100%;
		}

		body > table > tbody > tr[valign=top] > .sidebar:first-child table > tbody {
			/* Wrap sidebar items */
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: baseline;
		}

		body > table > tbody > tr[valign=top] > .sidebar:first-child table > tbody > tr:nth-child(2) {
			/* Put search on its own line and center it */
			width: 100%;
			justify-content: center;
		}

		.download {
			/* Download styling messes with layout, plus downloading on a phone is odd anyway. Let's reset it. */
			padding: 0;
			background: inherit;
		}

		.sidebarheader {
			/* Selected item inherits sidebarheader properties */
			color: #333;
			padding: 0 0.5ex;
		}

		body > table > tbody > tr[valign=top] > .sidebar:first-child > table tbody > tr {
			/* Flow sidebar TRs */
			display: flex;
		}

		body > table > tbody > tr[valign=top] > .sidebar:last-child {
			/* Ad sidebar */
		}

		body > table > tbody > tr[valign=top] > td:not([class]) {
			/* Body area */
		}

		body > table > tbody > tr[valign=top] > td:not([class]) tr {
			/* Deconstruct in-body tables too */
			display: grid;
		}

		body > table > tbody > tr[valign=top] > td:not([class]) td {
			/* Content area table parts should not get too wide */
			width: auto;
			max-width: 100vw;
		}

		.sidebar .darkbg {
			/* .darkbg doesn't work as intended as dividers in the sidebar */
			display: none;
		}

		.example {
			/* Make example <pre>s scrollable, if needed */
			overflow: auto;
		}
	}
}