From bfc23427e722b9c9e79138de24732e6b5ed2af11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 12 Oct 2020 20:59:16 +0200
Subject: [PATCH] improve mobile styling

---
 docs/src/components/PageNavigation/style.scss |  2 +-
 docs/src/layouts/App/style.scss               | 31 ++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss
index e673928f..1583320c 100644
--- a/docs/src/components/PageNavigation/style.scss
+++ b/docs/src/components/PageNavigation/style.scss
@@ -1,7 +1,7 @@
 .page-navigation {
   display: flex;
   justify-content: space-between;
-  padding: 2rem 0;
+  padding: 1.5rem 0;
 
   &__link {
     color: rgba($colorWhite, 0.6);
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 00d879d6..08ff0058 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -1,4 +1,5 @@
 $navHeight: 4.5rem;
+$mobileBreakPoint: 600px;
 $menuBreakPoint: 800px;
 
 .app {
@@ -36,6 +37,7 @@ $menuBreakPoint: 800px;
     font: inherit;
     color: $colorWhite;
     padding: 0.5rem 0.75rem;
+    -webkit-appearance: none;
   }
 
   &__sidebar {
@@ -73,6 +75,10 @@ $menuBreakPoint: 800px;
     backdrop-filter: blur(10px);
     max-height: 100vh;
 
+    @media (min-width: $menuBreakPoint) {
+      padding: 1.5rem 0;
+    }
+
     &::after {
       content: '';
       z-index: -1;
@@ -117,11 +123,19 @@ $menuBreakPoint: 800px;
   &__inner {
     margin: 0 auto;
     max-width: 50rem;
-    padding: 0 2rem;
+    padding: 0 1rem;
+
+    @media (min-width: $mobileBreakPoint) {
+      padding: 0 2rem;
+    }
   }
 
   &__link-group {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
+
+    @media (min-width: $mobileBreakPoint) {
+      margin-bottom: 2rem;
+    }
   }
 
   &__link-group-title {
@@ -152,6 +166,7 @@ $menuBreakPoint: 800px;
     border-radius: 5px;
     font-size: 0.85rem;
     margin-left: -0.5rem;
+    white-space: nowrap;
 
     &:hover {
       color: $colorWhite;
@@ -173,7 +188,11 @@ $menuBreakPoint: 800px;
   }
 
   &__main {
-    padding: 2rem 0;
+    padding: 1rem 0;
+
+    @media (min-width: $mobileBreakPoint) {
+      padding: 2rem 0;
+    }
   }
 
   &__page-navigation {
@@ -181,11 +200,15 @@ $menuBreakPoint: 800px;
   }
 
   &__mobile-nav {
-    padding: 1rem 2rem;
+    padding: 1rem;
     flex: 1 1 auto;
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
+
+    @media (min-width: $mobileBreakPoint) {
+      padding: 2rem;
+    }
   }
 }