From 0c91ad34baced0eb7f30735b992183383dee5478 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Fri, 21 Dec 2018 10:52:31 -0500
Subject: [PATCH] more sensible guide layout on medium/large screens

---
 site/package.json                |  1 +
 site/src/routes/guide/index.html | 24 ++++++++++++++++++++----
 site/static/global.css           |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/site/package.json b/site/package.json
index 2c4864b346..4b228fbde0 100644
--- a/site/package.json
+++ b/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": {
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html
index 77c05f5fb5..a575f106d0 100644
--- a/site/src/routes/guide/index.html
+++ b/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);
 		}
 	}
 
diff --git a/site/static/global.css b/site/static/global.css
index 313bce8f5b..7e7daf2309 100644
--- a/site/static/global.css
+++ b/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);