Update breakpoints

docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue

@@ -4,6 +4,7 @@ import { useToc } from '../../composables/use-toc'
 import { useActiveSidebarLinks } from '../../composables/active-bar'
 
 import SponsorsButton from '../sponsors/sponsors-button.vue'
+// import SponsorLarge from '../vp-sponsor-large.vue'
 
 const headers = useToc()
 const marker = ref()
@@ -21,21 +22,26 @@ useActiveSidebarLinks(container, marker)
           :key="link"
           class="toc-item"
         >
-          <a class="toc-link" :href="link">{{ text }}</a>
+          <a class="toc-link" :href="link" :title="text">{{ text }}</a>
           <ul v-if="children">
             <li
               v-for="{ link: childLink, text: childText } in children"
               :key="childLink"
               class="toc-item"
             >
-              <a class="toc-link subitem" :href="childLink">{{ childText }}</a>
+              <a class="toc-link subitem" :href="childLink" :title="text">{{
+                childText
+              }}</a>
             </li>
           </ul>
         </li>
       </ul>
       <div ref="marker" class="toc-marker" />
-
-      <sponsors-button class="mt-8" />
+      <!-- <SponsorLarge
+        class="mt-8 toc-ads flex flex-col"
+        item-style="width: 180px; height: 55px;"
+      /> -->
+      <sponsors-button class="mt-4" />
     </nav>
   </aside>
 </template>

docs/.vitepress/vitepress/components/vp-sponsor-large.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { platinumSponsors } from '../../config/sponsors'
+
+defineProps({
+  itemClass: String,
+  itemStyle: [String, Object, Array],
+})
 </script>
 
 <template>
@@ -9,7 +14,8 @@ import { platinumSponsors } from '../../config/sponsors'
       :key="item.name"
       :href="item.url"
       :title="`${item.name_cn || item.name} - ${item.slogan_cn || item.slogan}`"
-      class="sponsor-item inline-flex"
+      :class="['sponsor-item inline-flex', itemClass]"
+      :style="itemStyle"
       target="_blank"
     >
       <img :src="item.banner_img" :alt="item.name" />
@@ -25,7 +31,7 @@ import { platinumSponsors } from '../../config/sponsors'
   height: 60px;
   width: 196px;
 
-  @include respond-to('xxl') {
+  @include respond-to('max') {
     width: 236px;
     height: 72px;
   }

docs/.vitepress/vitepress/components/vp-sponsor-small.vue

@@ -31,7 +31,7 @@ import { goldSponsors } from '../../config/sponsors'
     height: 36px;
     width: 36px;
 
-    @include respond-to('xxl') {
+    @include respond-to('max') {
       height: 44px;
       width: 44px;
     }

docs/.vitepress/vitepress/components/vp-sponsors.vue

@@ -19,7 +19,7 @@ const sponsor = computed(() => sponsorLocale[lang.value])
 
 <style lang="scss" scoped>
 .sponsors {
-  padding-bottom: 44px;
+  padding-bottom: 40px;
   .sponsors-title {
     color: var(--text-color-secondary);
     font-weight: 300;

docs/.vitepress/vitepress/styles/content/doc-content.scss

@@ -7,8 +7,6 @@
   padding: 32px 24px 96px;
 
   .doc-content-container {
-    max-width: var(--vp-content-width);
-
     .doc-content {
       width: 100%;
     }
@@ -28,7 +26,7 @@
   @include respond-to('lg') {
     padding: 64px 64px 96px;
   }
-  @include respond-to('xlg') {
+  @include respond-to('xxl') {
     padding: 64px 0 96px 64px;
     display: flex;
   }

docs/.vitepress/vitepress/styles/content/table-of-content.scss

@@ -65,7 +65,7 @@
     }
   }
 
-  @include respond-to('xlg') {
+  @media screen and (min-width: 1440px) {
     display: block;
   }
 }

docs/.vitepress/vitepress/styles/mixins.scss

@@ -19,6 +19,7 @@ $breakpoints: (
   'lg': #{$breakpoint-lg},
   'xlg': #{$breakpoint-xlg},
   'xxl': #{$breakpoint-xxl},
+  'max': #{$breakpoint-max},
 ) !default;
 
 @mixin respond-to($breakpoint) {

docs/.vitepress/vitepress/styles/navbar.scss

@@ -33,7 +33,12 @@
     }
 
     @include respond-to('xxl') {
-      max-width: var(--vp-screen-max-width);
+      max-width: calc(var(--vp-screen-max-width));
+    }
+
+    @include respond-to('max') {
+      // 36 = 2 * 18 for each side.
+      max-width: calc(var(--vp-screen-max-width) + 36px);
     }
   }
 

docs/.vitepress/vitepress/styles/sidebar.scss

@@ -9,7 +9,7 @@
   z-index: var(--sidebar-z-index);
   width: var(--sidebar-width-xs);
   background-color: var(--bg-color);
-  padding: 47px 32px 0;
+  padding: 48px 32px 0;
   overflow-y: auto;
   transform: translate(-100%);
   transition: background-color 0.5s, opacity 0.25s,
@@ -49,9 +49,13 @@
   }
 
   @include respond-to('xxl') {
-    padding: 47px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2 - 18px);
+    padding: 48px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2);
     width: calc(
       (100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small)
     );
   }
+
+  @include respond-to('max') {
+    padding: 48px 48px 96px calc((100% - var(--vp-screen-max-width)) / 2 - 18px);
+  }
 }

docs/.vitepress/vitepress/styles/subnav.scss

@@ -23,6 +23,6 @@
   }
 
   @include respond-to('lg') {
-    display: none;
+    display: none !important;
   }
 }

docs/.vitepress/vitepress/styles/vars.scss

@@ -1,6 +1,7 @@
 // SCSS variables
 // breakpoints
-$breakpoint-xxl: 1680px !default;
+$breakpoint-max: 1680px !default;
+$breakpoint-xxl: 1440px !default;
 $breakpoint-xlg: 1280px !default;
 $breakpoint-lg: 960px !default;
 $breakpoint-md: 768px !default;