Daring Fireball mobile fix

mobile.css

	@media screen and (max-width: 900px) {
		body {
			font-size: max(16px, 3.5vmin);
			min-width: revert;
		}

		#Box {
			width: auto;
			padding: 0 1.5rem;
			overflow: hidden;
		}

		#Main {
			margin: 0;
			position: static;
			width: auto;
		}

		#Sidebar {
			position: revert;
			display: flex;
			width: revert;
			flex-flow: column;
		}

		#Sidebar ul {
			display: flex;
			gap: 1em;
			flex-flow: row wrap;
			margin: 0;
			padding: 0;
			justify-content: center;
		}

		#Sidebar p {
			text-align: center;
			margin: 0 0 2rem;
		}

		#Banner {
			width: revert;
			text-align: center;
			margin: 1rem;
		}

		#Banner img {
			height: auto;
			width: 11rem;
		}

		hr.ookiaks {
			margin: 0;
		}
	}

License: CC0. Have fun.

If you're using it in the Stylish extension (at least in Firefox, but I think it's the same for other browsers too) wrap it with:

@-moz-document domain("daringfireball.net") {

and

}

Ideally, John Gruber will use this as inspiration or a starting point. 😉