more sensible guide layout on medium/large screens

site/package.json

@@ -11,6 +11,7 @@
     "cy:open": "cypress open",
     "test": "run-p --race dev cy:run",
     "deploy": "npm run stage && now alias",
+    "prestage": "npm run sapper",
     "stage": "now"
   },
   "dependencies": {

site/src/routes/guide/index.html

@@ -87,19 +87,35 @@
 
 	.content {
 		width: 100%;
+		max-width: calc(var(--main-width) + 2 * var(--side-nav));
+		margin: 0 auto;
 		-moz-tab-size: 2;
-		padding: var(--top-offset) var(--side-page);
+		padding: var(--top-offset) var(--side-nav);
 		tab-size: 2;
 	}
 
-	@media (min-width: 768px) {
+	@media (min-width: 52em) { /* can't use vars in @media :( */
 		.sidebar {
 			display: block;
-			left: var(--side-page);
+			left: var(--side-nav);
 		}
 
 		.content {
-			padding-left: calc(var(--side-page) + var(--sidebar-w) + 4rem);
+			max-width: none;
+			padding-left: 32rem;
+		}
+	}
+
+	@media (min-width: 89.6rem) { /* can't use vars in @media :( */
+		.sidebar {
+			display: block;
+			left: calc(50% - 60rem);
+		}
+
+		.content {
+			max-width: none;
+			padding-left: calc(50% - 30rem);
+			padding-right: calc(50% - 50rem);
 		}
 	}
 

site/static/global.css

@@ -59,6 +59,7 @@ a:focus {
 	--nav-h:       6rem;
 	--top-offset:  6rem;
 	--sidebar-w:  24rem;
+	--main-width: 80rem;
 	--code-w:      72em;
 	--side-nav:  4.8rem;
 	--side-page:   var(--side-nav);