From 6941d63d7bf4124573ca544866fedc2d0414a16e Mon Sep 17 00:00:00 2001
From: thollander <hollanderterence@gmail.com>
Date: Wed, 24 Apr 2019 23:12:57 +0200
Subject: [PATCH] Fix unusable docs sidebar in mobile

- Puts the text color in mobile to var(--second)

- Fixes the scroll shadow on scrollbar

- Better size handling
---
 site/src/routes/docs/_GuideContents.svelte |  8 +++++++-
 site/src/routes/docs/index.svelte          | 16 ++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/site/src/routes/docs/_GuideContents.svelte b/site/src/routes/docs/_GuideContents.svelte
index 3d93869cf0..fb2a9dc177 100644
--- a/site/src/routes/docs/_GuideContents.svelte
+++ b/site/src/routes/docs/_GuideContents.svelte
@@ -52,7 +52,13 @@
 		transition: opacity 0.2s;
 		border-bottom: none;
 		padding: 0;
-		color: white;
+		color: var(--second);
+	}
+
+	@media (min-width: 832px) {
+		a {
+			color: white;
+		}
 	}
 
 	.section {
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index 1dd51db502..b9f913257f 100644
--- a/site/src/routes/docs/index.svelte
+++ b/site/src/routes/docs/index.svelte
@@ -96,16 +96,16 @@
 	}
 
 	aside.open {
-		width: calc(100vw - 1.6rem);
-		height: calc(100vh - var(--nav-h) - 7rem);
+		width: calc(100vw - 3rem);
+		height: calc(100vh - var(--nav-h));
 	}
 
 	aside.open::before {
 		content: '';
 		position: absolute;
+		top: 0;
 		left: 0;
-		bottom: calc(100vh - var(--nav-h) - 10.8rem);
-		width: 100%;
+		width: calc(100% - 2rem);
 		height: 2em;
 		background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
 		pointer-events: none;
@@ -117,7 +117,7 @@
 		position: absolute;
 		left: 0;
 		bottom: 1.9em;
-		width: calc(100% - 1em);
+		width: calc(100% - 2rem);
 		height: 2em;
 		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
 		pointer-events: none;
@@ -127,9 +127,9 @@
 		position: absolute;
 		font-family: var(--font);
 		overflow-y: auto;
-		width: calc(100vw - 4.8rem);
-		height: calc(100vh - var(--nav-h) - 10.8rem);
-		padding: 2em 1.6rem 2em 3.2rem;
+		width: 100%;
+		height: 100%;
+		padding: 4em 1.6rem 2em 3.2rem;
 		bottom: 2em;
 	}