More mobile tweaks

.vuepress/theme/Navbar.vue

@@ -6,7 +6,7 @@
         <img class="logo"
              v-if="$site.themeConfig.logo"
              :src="$withBase($site.themeConfig.logo)">
-        <span class="site-name"
+        <span class="site-name hidden md:inline"
               v-if="$siteTitle"
               :class="{ 'can-hide': $site.themeConfig.logo }">
         {{ $siteTitle }}

.vuepress/theme/styles/layout.css

@@ -1,11 +1,18 @@
 .page {
-    padding-left: $sidebar-width;
     padding-top: $nav-height;
+
+    @screen md {
+        padding-left: $sidebar-width;
+    }
 }
 
 .content {
-    @apply .mx-auto .p-8;
+    @apply .mx-auto .p-4;
     max-width: $content-width;
+
+    @screen md {
+        @apply .p-8;
+    }
 }
 
 .table-of-contents {
@@ -13,14 +20,22 @@
 }
 
 .page-edit {
-    @apply .mx-auto .px-8 .pb-8;
+    @apply .mx-auto .px-4 .pb-4;
     max-width: $content-width;
+
+    @screen md {
+        @apply .px-8 .pb-8;
+    }
 }
 
 .page-nav {
-    @apply .mx-auto .px-8 .pb-8;
+    @apply .mx-auto .px-4 .pb-4;
     max-width: $content-width;
 
+    @screen md {
+        @apply .px-8 .pb-8;
+    }
+
     .inner {
         @apply .m-0 .pt-8 .border-t .border-grey-lighter;
     }

.vuepress/theme/styles/nav.css

@@ -33,10 +33,6 @@
         .logo {
             @apply .h-12 .float-left;
         }
-
-        .site-name {
-            @apply .hidden;
-        }
     }
 
     .search-box {
@@ -56,6 +52,16 @@
             }
         }
 
+        @screen smx {
+            @apply .pr-0 .pl-6;
+            
+            input {
+                &:active, &:focus {
+                    @apply .w-full;
+                }
+            }
+        }
+
         .suggestion-container {
             @apply .w-full;
 

.vuepress/theme/styles/sidebar.css

@@ -1,6 +1,10 @@
 $arrow-bg: #000;
 
 .sidebar {
+    @screen smx {
+        @apply .hidden;
+    }
+
     @apply .fixed .pin-l .pin-b .bg-white .overflow-auto .border-r .border-grey-lighter .py-8;
     top: $nav-height;
     width: $sidebar-width;

.vuepress/theme/styles/text.css

@@ -51,6 +51,10 @@ h1, h2, h3, h4, h5, h6 {
 
     &:hover .header-anchor {
         @apply .visible;
+
+        @screen smx {
+            margin-left: 0 !important;
+        }
     }
 }