feat: add new big logo and update references in config and styles

Author: JulianFun123

docs/.vitepress/theme/components/HomeHero.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import InstallNavButton from "./InstallNavButton.vue";
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import InstallNavButton from './InstallNavButton.vue'
+
+const { isDark } = useData()
+
+const screenshotSrc = computed(() => (isDark.value ? '/screenshot.png' : '/screenshot-light.png'))
+const logoOutlineSrc = computed(() =>
+  isDark.value ? '/logo-part-outline.svg' : '/logo-part-outline-dark.svg',
+)
 </script>
 <template>
   <div class="flex flex-col items-center py-20 lg:py-30">
@@ -14,38 +23,23 @@ import InstallNavButton from "./InstallNavButton.vue";
     <div class="relative w-full -mt-20 -mb-40">
     <div class="flex flex-col items-center select-none pointer-events-none">
       <div
-        class="relative animate-[spin_60s_linear_infinite] select-none opacity-20 hidden dark:block w-full"
-      >
-        <img
-          src="/logo-part-outline.svg"
-          class="h-full w-full relative"
-          style="animation: first-star 10s; transform: rotate(106deg)"
-        />
-        <img
-          src="/logo-part-outline.svg"
-          class="h-full w-full absolute top-0"
-          style="animation: second-star 10s"
-        />
-      </div>
-      <div
-        class="relative animate-[spin_60s_linear_infinite] select-none opacity-20 block dark:hidden w-full"
+        class="relative animate-[spin_60s_linear_infinite] select-none opacity-20 w-full"
       >
         <img
-          src="/logo-part-outline-dark.svg"
+          :src="logoOutlineSrc"
           class="h-full w-full relative"
           style="animation: first-star 10s; transform: rotate(106deg)"
         />
         <img
-          src="/logo-part-outline-dark.svg"
+          :src="logoOutlineSrc"
           class="h-full w-full absolute top-0"
           style="animation: second-star 10s"
         />
       </div>
     </div>
 
       <div class="absolute h-full w-full flex items-center justify-center top-0">
-        <img class="!hidden !dark:block w-full !max-w-100%" src="/screenshot.png" />
-        <img class="!block !dark:hidden w-full !max-w-100%" src="/screenshot-light.png" />
+        <img class="w-full !max-w-100%" :src="screenshotSrc" alt="StarQuery app screenshot" />
       </div>
 
 

docs/.vitepress/theme/components/HomeScreenshotShowcase.vue

@@ -1,13 +1,13 @@
 <template>
   <section class="mt-10 grid items-center gap-8 pt-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)]">
     <div>
-      <div class="mb-4 text-[0.78rem] font-bold uppercase tracking-[0.16em] text-[var(--vp-c-default-2)]">
+      <div class="mb-4 text-[0.78rem] font-bold uppercase tracking-[0.16em] ">
         Product Preview
       </div>
-      <h2 class="mb-4 text-[clamp(1.9rem,3vw,3rem)] leading-[1.02] tracking-[-0.05em] text-[var(--vp-c-default-1)]">
+      <h2 class="mb-4 text-[clamp(1.9rem,3vw,3rem)] leading-[1.02] tracking-[-0.05em] ">
         Built for real data work, without looking like a generic admin panel.
       </h2>
-      <p class="m-0 text-[var(--vp-c-default-2)]">
+      <p class="m-0 ">
         StarQuery combines dense operational workflows with a calmer interface language. The goal
         is not just capability, but capability that still feels considered.
       </p>
@@ -16,20 +16,20 @@
         <div
           class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] bg-[linear-gradient(180deg,var(--vp-c-bg),var(--vp-c-bg-soft))] px-4 py-4"
         >
-          <strong class="text-[0.98rem] tracking-[-0.02em] text-[var(--vp-c-default-1)]">One consistent workspace</strong>
-          <span class="text-[var(--vp-c-default-2)]">Queries, browsers, editors, exports and admin workflows follow the same design logic.</span>
+          <strong class="text-[0.98rem] tracking-[-0.02em] ">One consistent workspace</strong>
+          <span>Queries, browsers, editors, exports and admin workflows follow the same design logic.</span>
         </div>
         <div
           class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] bg-[linear-gradient(180deg,var(--vp-c-bg),var(--vp-c-bg-soft))] px-4 py-4"
         >
-          <strong class="text-[0.98rem] tracking-[-0.02em] text-[var(--vp-c-default-1)]">Dense, but readable</strong>
-          <span class="text-[var(--vp-c-default-2)]">Power features stay accessible without collapsing into noisy, cramped tooling.</span>
+          <strong class="text-[0.98rem] tracking-[-0.02em] ">Dense, but readable</strong>
+          <span>Power features stay accessible without collapsing into noisy, cramped tooling.</span>
         </div>
         <div
           class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] bg-[linear-gradient(180deg,var(--vp-c-bg),var(--vp-c-bg-soft))] px-4 py-4"
         >
-          <strong class="text-[0.98rem] tracking-[-0.02em] text-[var(--vp-c-default-1)]">Use it solo or with a team</strong>
-          <span class="text-[var(--vp-c-default-2)]">The same experience works for quick local sessions and for shared, browser-based deployments.</span>
+          <strong class="text-[0.98rem] tracking-[-0.02em] ">Use it solo or with a team</strong>
+          <span>The same experience works for quick local sessions and for shared, browser-based deployments.</span>
         </div>
       </div>
     </div>