update: mobile support

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>

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>

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>

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,
   ]
 }