From 5eb42e0b6135aba11966f2b16d275f2fb3f4c1b2 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 7 Apr 2022 16:12:43 +0800
Subject: [PATCH] update: mobile support

---
 .../theme/src/client/components/BlogInfo.vue     |  7 +++++++
 packages/theme/src/client/components/Page.vue    | 11 ++++++++++-
 .../theme/src/client/components/Pagination.vue   | 16 +++++++++++++++-
 .../theme/src/node/plugins/activeHeaderLink.ts   |  2 +-
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/theme/src/client/components/BlogInfo.vue b/packages/theme/src/client/components/BlogInfo.vue
index 2bf5771e..3d6217b5 100644
--- a/packages/theme/src/client/components/BlogInfo.vue
+++ b/packages/theme/src/client/components/BlogInfo.vue
@@ -7,10 +7,17 @@ import BloggerInfo from './BloggerInfo.vue'
   </aside>
 </template>
 <style lang="scss">
+@import '../styles/variables';
 .blog-info-wrapper {
   width: 18.75rem;
   margin-left: 1.25rem;
   position: sticky;
   top: calc(var(--navbar-height) + 1.25rem);
 }
+
+@media (max-width: $MQMobile) {
+  .blog-info-wrapper {
+    display: none;
+  }
+}
 </style>
diff --git a/packages/theme/src/client/components/Page.vue b/packages/theme/src/client/components/Page.vue
index 69dbf4db..19cc86ce 100644
--- a/packages/theme/src/client/components/Page.vue
+++ b/packages/theme/src/client/components/Page.vue
@@ -41,7 +41,7 @@ const isNote = computed(() => {
 </template>
 <style lang="scss">
 @import '../styles/_mixins';
-
+@import '../styles/variables';
 .page-wrapper {
   @include wrapper;
 
@@ -73,4 +73,13 @@ const isNote = computed(() => {
 .comment-container {
   margin-top: 8rem;
 }
+
+@media (max-width: $MQMobile) {
+  .page-wrapper .page-container .page-content {
+    padding: 0 0.75rem 1rem;
+  }
+  .plume-theme-page-toc {
+    display: none;
+  }
+}
 </style>
diff --git a/packages/theme/src/client/components/Pagination.vue b/packages/theme/src/client/components/Pagination.vue
index 9b3df4ab..ea9ef006 100644
--- a/packages/theme/src/client/components/Pagination.vue
+++ b/packages/theme/src/client/components/Pagination.vue
@@ -95,7 +95,7 @@ function handleJump(): void {
         next
       </button>
     </div>
-    <div class="pagination-form">
+    <div class="pagination-form can-hide">
       <span>跳转到：</span>
       <input v-model="inputPage" type="number" :min="1" :max="pageCount" />
       <span>/{{ pageCount }}</span>
@@ -104,6 +104,7 @@ function handleJump(): void {
   </div>
 </template>
 <style lang="scss">
+@import '../styles/variables';
 .pagination-wrapper {
   display: flex;
   justify-content: flex-start;
@@ -169,4 +170,17 @@ function handleJump(): void {
     }
   }
 }
+
+@media (max-width: $MQMobile) {
+  .pagination-wrapper {
+    .can-hide {
+      display: none;
+    }
+    // .pagination-container {
+    //   display: flex;
+    //   justify-content: space-between;
+    //   padding: 0 2rem;
+    // }
+  }
+}
 </style>
diff --git a/packages/theme/src/node/plugins/activeHeaderLink.ts b/packages/theme/src/node/plugins/activeHeaderLink.ts
index 787457c7..2befe599 100644
--- a/packages/theme/src/node/plugins/activeHeaderLink.ts
+++ b/packages/theme/src/node/plugins/activeHeaderLink.ts
@@ -8,7 +8,7 @@ export const resolveActiveHeaderLink = (): PluginConfig => {
       headerLinkSelector: 'a.theme-plume-toc-link',
       headerAnchorSelector: '.header-anchor',
       delay: 200,
-      offset: 80,
+      offset: 20,
     } as ActiveHeaderLinksPluginOptions,
   ]
 }