Css fixes

docs/.vitepress/theme/components/base/FakeInput.vue

@@ -20,7 +20,7 @@ const SearchIcon = createLucideIcon('search', search)
   padding: 12px 16px;
   height: auto;
   font-size: 14px;
-  box-shadow: var(--vp-shadow-4), var(--vp-shadow-2);
+  /* box-shadow: var(--vp-shadow-4), var(--vp-shadow-2); */
   text-align: left;
   border: 1px solid transparent;
   cursor: text;

docs/.vitepress/theme/components/home/HomeHeroIconsCard.data.ts

@@ -10,6 +10,7 @@ export default {
 
     return {
       icons: randomIcons,
+      iconsCount: icons.length,
     }
   }
 }

docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue

@@ -68,7 +68,7 @@ onBeforeUnmount(() => {
         </TransitionGroup>
       </div>
       <FakeInput @click="go('/icons/?focus')" class="search-box">
-        Search 964 icons...
+        Search {{ data.iconsCount }} icons...
       </FakeInput>
     </div>
   </div>
@@ -88,7 +88,7 @@ onBeforeUnmount(() => {
   border-radius: 8px;
   width: 100%;
   height:100%;
-  box-shadow: var(--vp-shadow-2);
+  /* box-shadow: var(--vp-shadow-2); */
   max-height: 220px;
   max-width: 560px;
   margin: 0 auto;
@@ -135,7 +135,7 @@ onBeforeUnmount(() => {
   position: absolute;
   width: 100%;
   left: 0;
-  top: -48px;
+  top: -64px;
 }
 
 @media (min-width: 960px) {
@@ -143,6 +143,13 @@ onBeforeUnmount(() => {
     top: unset;
     bottom: -24px;
     left: -24px;
+
+    box-shadow: var(--vp-shadow-3);
+    background: var(--vp-c-bg);
+  }
+
+  .dark .search-box {
+    background: var(--vp-c-bg-soft);
   }
   .card-wrapper {
     margin-top: 0;

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -154,7 +154,7 @@ syncRef(size, sizeCssVar)
 
   .card {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 8fr 10fr;
   }
 /*
   .card-column {

docs/.vitepress/theme/components/home/HomePackagesSection.vue

@@ -2,6 +2,7 @@
 import HomeContainer from './HomeContainer.vue'
 import { useRouter } from 'vitepress';
 import { data } from './HomePackagesSection.data'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 
 const { go } = useRouter()
 </script>
@@ -25,6 +26,9 @@ const { go } = useRouter()
         />
       </a>
     </div>
+    <div class="more-button-wrapper">
+      <VPButton text="And more" href="/packages" theme="alt" class="more-button"/>
+    </div>
   </HomeContainer>
 </template>
 
@@ -45,4 +49,10 @@ const { go } = useRouter()
   margin: 0 -0.5rem;
   gap: 16px;
 }
+
+.more-button-wrapper {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
 </style>

docs/.vitepress/theme/components/icons/IconInfo.vue

@@ -34,7 +34,7 @@ const { page } = useData()
       <CopySVGButton />
       <CopyCodeButton :name="icon.name"/>
       <VPButton
-        v-if="page?.relativePath?.startsWith?.(`/icons/${icon.name}`)"
+        v-if="!page?.relativePath?.startsWith?.(`icons/${icon.name}`)"
         :href="`/icons/${icon.name}`"
         text="See Code examples"
         theme="alt"

docs/.vitepress/theme/style.css

@@ -56,7 +56,9 @@
   display: none;
 }
 
-
+.VPFeature .icon {
+  background-color: var(--vp-c-bg);;
+}
 
 .vp-doc[class*=" _icons_"] > div {
   max-width: 100%;