feat: updates logo (#3340)

assets/components/SidePanel.vue

@@ -2,9 +2,7 @@
   <aside class="fixed h-screen w-[inherit] overflow-auto p-3" data-testid="navigation">
     <h1>
       <router-link :to="{ name: '/' }">
-        <svg class="h-14 w-28 fill-secondary">
-          <use href="#logo"></use>
-        </svg>
+        <LogoWithText class="logo h-16 w-40" />
       </router-link>
 
       <small class="mb-4 block text-xs font-light" v-if="hostname">
@@ -28,5 +26,18 @@
 </template>
 
 <script lang="ts" setup>
+import LogoWithText from "@/logo-text.svg";
 const { hostname } = config;
 </script>
+
+<style scoped lang="postcss">
+.logo {
+  :deep(.content-fill) {
+    @apply fill-base-content;
+  }
+
+  :deep(.secondary-fill) {
+    @apply fill-secondary;
+  }
+}
+</style>

assets/components/common/MobileMenu.vue

@@ -2,9 +2,7 @@
   <nav class="fixed top-0 z-10 w-full border-b border-base-content/20 bg-base p-2" data-testid="navigation">
     <div class="flex items-center">
       <router-link :to="{ name: '/' }">
-        <svg class="h-14 w-28 fill-secondary">
-          <use href="#logo"></use>
-        </svg>
+        <Logo class="logo h-10 w-14" />
       </router-link>
 
       <div class="ml-auto flex items-center gap-2">
@@ -28,6 +26,7 @@
 </template>
 
 <script lang="ts" setup>
+import Logo from "@/logo.svg";
 const route = useRoute();
 
 const show = ref(false);
@@ -59,4 +58,10 @@ li.exited {
 .fade-leave-to .menu {
   @apply -translate-y-2;
 }
+
+.logo {
+  :deep(.secondary-fill) {
+    @apply fill-secondary;
+  }
+}
 </style>

assets/main.css

@@ -29,7 +29,7 @@
     --base-darker-color: 11% 0 0;
     --base-content-color: 89.23% 0 0;
     --primary-color: 70.96% 0.143 176.65;
-    --secondary-color: 91.36% 0.11098 90.1243;
+    --secondary-color: 81.38% 0.1448 90.1243;
   }
 
   html[data-theme="light"] {

docs/.vitepress/config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
     ],
   ],
   themeConfig: {
+    logo: "/logo.svg",
     search: {
       provider: "local",
     },

docs/.vitepress/theme/style.css

@@ -149,13 +149,11 @@
 
 .VPHomeHero .name {
   @apply text-7xl font-light;
-  font-family: "Playfair Display Variable", serif;
 }
 
 .VPNavBarTitle .title {
   @apply text-3xl font-light;
-  color: var(--bar-title-color);
-  font-family: "Playfair Display Variable", serif;
+  text-transform: uppercase;
 }
 
 .VPHero .container .image {

package.json

@@ -72,6 +72,7 @@
     "vite": "5.4.10",
     "vite-plugin-compression2": "^1.3.0",
     "vite-plugin-vue-layouts": "^0.11.0",
+    "vite-svg-loader": "^5.1.0",
     "vitepress": "1.4.1",
     "vue": "^3.5.12",
     "vue-i18n": "^10.0.4",