wip: try

Author: sapphi-red

docs/.vitepress/theme/components/OldDocument.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="old-document">
     <p>
-      This documentation covers Vite 5 <strong>(old version)</strong>. For the
+      This documentation covers Vite 2 <strong>(old version)</strong>. For the
       latest version, see
       <a href="https://vite.dev" class="new-document-link">https://vite.dev</a>.
     </p>
@@ -19,21 +19,16 @@
   padding: 4px 32px;
   justify-content: center;
   align-items: center;
-  color: var(--vp-c-text-1);
-  background: var(--vp-c-brand-lightest);
-  z-index: var(--vp-z-index-layout-top);
+  color: var(--c-text);
+  background: var(--c-brand-lightest);
+  z-index: calc(var(--z-index-navbar) + 1);
 
   .new-document-link {
     text-decoration: underline;
-    color: var(--vp-c-text-1);
+    color: var(--c-text);
     &:hover {
-      color: var(--vp-c-text-2);
+      color: var(--c-text-light);
     }
   }
 }
-.dark {
-  .old-document {
-    background: var(--vp-c-brand-darker);
-  }
-}
 </style>

docs/.vitepress/theme/custom.css

@@ -19,6 +19,7 @@
 :root {
   --c-brand: #646cff;
   --c-brand-light: #747bff;
+  --c-brand-lightest: #bcc0ff;
 }
 
 .custom-block.tip {
@@ -45,15 +46,15 @@
   @media (min-width: 455px) {
     --vp-layout-top-height: 64px;
   }
-  @media (min-width: 960px) {
+  @media (min-width: 768px) {
     --vp-layout-top-height: 32px;
   }
 
   --header-height: calc(3.6rem + var(--vp-layout-top-height));
 }
 
 .nav-bar {
-  padding-top: var(--vp-layout-top-height);
+  padding-top: calc(0.7rem + var(--vp-layout-top-height)) !important;
 }
 .sidebar-button {
   top: calc(0.6rem + var(--vp-layout-top-height));