From 6941d63d7bf4124573ca544866fedc2d0414a16e Mon Sep 17 00:00:00 2001 From: thollander 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; }