@voidzero-dev/vitepress-theme 4.8.0 → 4.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "4.8.0",
+  "version": "4.8.1",
   "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, useLayout } from '@vp-composables/layout'
+import { layoutInfoInjectionKey, registerWatchers } from '@vp-composables/layout'
 import { useSidebarControl } from '@vp-composables/sidebar'
 
 const {
@@ -21,7 +21,6 @@ const {
 registerWatchers({ closeSidebar })
 
 const { frontmatter } = useData()
-const { hasSidebar } = useLayout()
 
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
@@ -42,7 +41,7 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
 
     <div class="flex flex-col min-h-screen">
       <!-- Content wrapper with borders -->
-      <div class="content-wrapper flex-1" :class="{ 'has-sidebar': hasSidebar }">
+      <div class="content-wrapper flex-1">
         <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
 
         <VPSidebar :open="isSidebarOpen">
@@ -177,11 +176,4 @@ provide(layoutInfoInjectionKey, { heroImageSlotExists })
     max-width: 90rem;
   }
 }
-
-@media (min-width: 1024px) {
-  .content-wrapper.has-sidebar {
-    display: grid;
-    grid-template-columns: var(--vp-sidebar-width) 1fr;
-  }
-}
 </style>

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

@@ -82,6 +82,14 @@ 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));
   }
 }
 </style>

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

@@ -76,7 +76,7 @@ const pageName = computed(() =>
 
 @media (min-width: 1024px) {
   .VPDoc {
-    padding: 0 32px 0;
+    padding: 48px 32px 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
@@ -133,28 +133,34 @@ const pageName = computed(() =>
 }
 
 .aside-container {
-  position: sticky;
-  top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
+  position: fixed;
+  top: var(--vp-nav-height);
   padding-top: 20px;
   padding-left: 32px;
   width: 224px;
-  height: calc(100vh - var(--vp-nav-height) - var(--vp-banner-height, 0px));
+  height: calc(100vh - var(--vp-nav-height));
   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: absolute;
+  position: fixed;
   bottom: 0;
-  left: 0;
   z-index: 10;
-  width: 100%;
+  width: 224px;
   height: 32px;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
   pointer-events: none;
@@ -175,7 +181,7 @@ const pageName = computed(() =>
 
 @media (min-width: 1024px) {
   .content {
-    padding: 48px 32px 128px;
+    padding: 0 32px 128px;
   }
 }
 

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

@@ -88,7 +88,6 @@ const classes = computed(() => {
   }
 
   .VPLocalNav.has-sidebar {
-    grid-column: 1 / -1;
     padding-left: var(--vp-sidebar-width);
     border-bottom: none;
   }

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

@@ -92,22 +92,16 @@ watch(
 
 @media (min-width: 1024px) {
   .VPSidebar {
-    position: sticky;
     top: calc(var(--vp-nav-height) + var(--vp-banner-height, 0px));
-    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));
     background-color: transparent;
     opacity: 1;
     visibility: visible;
     box-shadow: none;
     transform: translateX(0);
-    z-index: auto;
-    grid-row: 1 / -1;
-    align-self: start;
   }
 }
 

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

@@ -240,16 +240,13 @@ const itemIcon = useIcon(() => (props.item as any).icon)
   transform: rotate(0)/*rtl:rotate(180deg)*/;
 }
 
-.VPSidebarItem.level-0.has-icon .items {
-  border-left: 1px solid var(--vp-c-divider);
-}
-
-.VPSidebarItem.level-0 .items,
+.VPSidebarItem.level-0.has-icon > .items,
 .VPSidebarItem.level-1 .items,
 .VPSidebarItem.level-2 .items,
 .VPSidebarItem.level-3 .items,
 .VPSidebarItem.level-4 .items,
 .VPSidebarItem.level-5 .items {
+  border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
 }
 
@@ -272,6 +269,6 @@ const itemIcon = useIcon(() => (props.item as any).icon)
 }
 
 .VPSidebarItem.level-0.has-icon > .items {
-  margin-left: 8px;
+  margin-left: 6px;
 }
 </style>

package/src/index.ts

@@ -82,7 +82,6 @@ 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,13 +82,11 @@
         border-left: 5px solid transparent;
     }
     
-    [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 {
+    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
         border-left-color: var(--color-nickel);
     }
 
-    [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 {
+    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
         border-right-color: var(--color-nickel);
     }