docs: fix mobile nav for GH stars announcement

packages/docs/pages/.vitepress/theme/CustomLayout.vue

@@ -4,27 +4,14 @@
   color: #fff;
   border-bottom: 2px solid rgba(194, 194, 194, 0.2);
   text-align: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
   justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   position: fixed;
   padding: 4px 40px;
   z-index: 999999;
   font-size: 0.875rem;
   font-weight: 400;
-  text-align: center;
   width: 100%;
   height: 50px;
 }

packages/docs/pages/.vitepress/theme/custom.css

@@ -117,6 +117,8 @@
 
 :root {
   overflow-y: scroll;
+
+  --announcement-bar-height: 50px;
 }
 
 .VPTeamMembersItem .avatar-img {
@@ -128,10 +130,20 @@ header.VPNav {
   margin-top: 50px;
 }
 
+.VPNavScreen.VPNavScreen {
+  top: calc(var(--announcement-bar-height) + var(--vp-nav-height-mobile));
+}
+
+.VPLocalNav.VPLocalNav {
+  top: 50px;
+}
+
 aside.VPSidebar {
   margin-top: 50px;
 }
 
-#VPContent {
+@media (min-width: 960px) {
-  margin-top: 50px;
+  #VPContent {
+    margin-top: 50px;
+  }
 }