@voidzero-dev/vitepress-theme 4.8.1 → 4.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "4.8.1",
+  "version": "4.8.3",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
   "license": "UNLICENSED",

package/src/components/oss/FooterNav.vue

@@ -98,4 +98,4 @@ const getSocialLabel = (social: SocialLink): string => {
       </div>
     </section>
   </div>
-</template>
+</template>

package/src/components/vitepress-default/Layout.vue

@@ -9,7 +9,7 @@ import TopBanner from '@components/oss/TopBanner.vue'
 import VPSidebar from './VPSidebar.vue'
 import VPSkipLink from './VPSkipLink.vue'
 import { useData } from '@vp-composables/data'
-import { layoutInfoInjectionKey, registerWatchers } from '@vp-composables/layout'
+import { layoutInfoInjectionKey, registerWatchers, useLayout } from '@vp-composables/layout'
 import { useSidebarControl } from '@vp-composables/sidebar'
 
 const {
@@ -21,6 +21,7 @@ const {
 registerWatchers({ closeSidebar })
 
 const { frontmatter } = useData()
+const { hasSidebar } = useLayout()
 
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
@@ -41,7 +42,7 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
 
     <div class="flex flex-col min-h-screen">
       <!-- Content wrapper with borders -->
-      <div class="content-wrapper flex-1">
+      <div class="content-wrapper flex-1" :class="{ 'has-sidebar': hasSidebar }">
         <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
 
         <VPSidebar :open="isSidebarOpen">
@@ -176,4 +177,12 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
     max-width: 90rem;
   }
 }
+
+@media (min-width: 1024px) {
+  .content-wrapper.has-sidebar {
+    display: grid;
+    grid-template-columns: var(--vp-sidebar-width) minmax(0, 1fr);
+    grid-template-rows: auto 1fr;
+  }
+}
 </style>

package/src/components/vitepress-default/VPContent.vue

@@ -82,14 +82,9 @@ const { isHome, hasSidebar } = useLayout()
 
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
-    padding-left: var(--vp-sidebar-width);
-  }
-}
-
-@media (min-width: 1440px) {
-  .VPContent.has-sidebar {
-    padding-right: calc((100% - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+    grid-column: 2;
+    grid-row: 2;
+    min-width: 0;
   }
 }
 </style>

package/src/components/vitepress-default/VPDoc.vue

@@ -76,7 +76,7 @@ const pageName = computed(() =>
 
 @media (min-width: 1024px) {
   .VPDoc {
-    padding: 48px 32px 0;
+    padding: 0 32px 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
@@ -133,34 +133,28 @@ const pageName = computed(() =>
 }
 
 .aside-container {
-  position: fixed;
-  top: var(--vp-nav-height);
+  position: sticky;
+  top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px) - 1px);
   padding-top: 20px;
   padding-left: 32px;
   width: 224px;
-  height: calc(100vh - var(--vp-nav-height));
+  height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px) + 1px);
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-width: none;
   border-left: 1px solid var(--vp-c-divider);
 }
 
-@media (min-width: 1024px) {
-  .aside-container {
-    top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
-    height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px));
-  }
-}
-
 .aside-container::-webkit-scrollbar {
   display: none;
 }
 
 .aside-curtain {
-  position: fixed;
+  position: absolute;
   bottom: 0;
+  left: 0;
   z-index: 10;
-  width: 224px;
+  width: 100%;
   height: 32px;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
   pointer-events: none;
@@ -181,7 +175,7 @@ const pageName = computed(() =>
 
 @media (min-width: 1024px) {
   .content {
-    padding: 0 32px 128px;
+    padding: 48px 32px 128px;
   }
 }
 

package/src/components/vitepress-default/VPLocalNav.vue

@@ -84,11 +84,13 @@ const classes = computed(() => {
 
 @media (min-width: 1024px) {
   .VPLocalNav {
-    top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
+    top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px) - 1px);
   }
 
   .VPLocalNav.has-sidebar {
-    padding-left: var(--vp-sidebar-width);
+    grid-column: 2;
+    grid-row: 1;
+    padding-left: 0;
     border-bottom: none;
   }
 

package/src/components/vitepress-default/VPLocalNavOutlineDropdown.vue

@@ -121,6 +121,11 @@ function scrollToTop() {
 }
 
 @media (min-width: 960px) {
+  .VPLocalNavOutlineDropdown {
+    position: relative;
+    width: fit-content;
+  }
+
   .VPLocalNavOutlineDropdown button {
     font-size: 14px;
   }
@@ -152,12 +157,19 @@ function scrollToTop() {
 
 @media (min-width: 960px) {
   .items {
-    right: auto;
-    left: calc(var(--vp-sidebar-width) + 32px);
+    left: auto;
+    right: 32px;
     width: 320px;
   }
 }
 
+@media (min-width: 1024px) {
+  .items {
+    left: 32px;
+    right: auto;
+  }
+}
+
 .header {
   background-color: var(--vp-c-bg-soft);
 }

package/src/components/vitepress-default/VPSidebar.vue

@@ -92,16 +92,23 @@ watch(
 
 @media (min-width: 1024px) {
   .VPSidebar {
-    top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
+    position: sticky;
+    top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px) - 1px);
+    bottom: unset;
     left: unset;
     padding-left: 32px;
     width: var(--vp-sidebar-width);
     max-width: 100%;
+    height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px) + 1px);
     background-color: transparent;
     opacity: 1;
     visibility: visible;
     box-shadow: none;
     transform: translateX(0);
+    z-index: auto;
+    grid-column: 1;
+    grid-row: 2;
+    align-self: start;
   }
 }
 

package/src/components/vitepress-default/VPSidebarItem.vue

@@ -240,7 +240,7 @@ const itemIcon = useIcon(() => (props.item as any).icon)
   transform: rotate(0)/*rtl:rotate(180deg)*/;
 }
 
-.VPSidebarItem.level-0.has-icon > .items,
+.VPSidebarItem.level-0.has-icon .items,
 .VPSidebarItem.level-1 .items,
 .VPSidebarItem.level-2 .items,
 .VPSidebarItem.level-3 .items,
@@ -269,6 +269,6 @@ const itemIcon = useIcon(() => (props.item as any).icon)
 }
 
 .VPSidebarItem.level-0.has-icon > .items {
-  margin-left: 6px;
+  margin-left: 8px;
 }
 </style>

package/src/index.ts

@@ -82,6 +82,7 @@ export { default as VPTeamPageSection } from "@vp-default/VPTeamPageSection.vue"
 export { default as VPTeamPageTitle } from "@vp-default/VPTeamPageTitle.vue";
 
 // Export custom layouts and components
+export { default as FooterNav } from "@components/oss/FooterNav.vue";
 export { VoidZeroTheme };
 export default VoidZeroTheme;
 

package/src/styles/marketing.css

@@ -82,11 +82,13 @@
         border-left: 5px solid transparent;
     }
     
-    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
+    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before,
+    .dark:not([data-theme]) .wrapper--ticks::before, .dark:not([data-theme]) .tick-left::before {
         border-left-color: var(--color-nickel);
     }
 
-    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
+    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after,
+    .dark:not([data-theme]) .wrapper--ticks::after, .dark:not([data-theme]) .tick-right::after {
         border-right-color: var(--color-nickel);
     }