change logo

ping-pub · May 29, 2024 · a0f4e51 · a0f4e51
1 parent 0e69676
commit a0f4e51
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/src/assets/images/svg/logo_omakase-dark.svg b/src/assets/images/svg/logo_omakase-dark.svg
diff --git a/src/assets/images/svg/logo_omakase-light.svg b/src/assets/images/svg/logo_omakase-light.svg
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
@@ -82,7 +82,8 @@ dayjs()
         <RouterLink to="/" class="flex items-center">
           <!-- <img class="w-10 h-10" src="../../assets/logo.svg" /> -->
           <h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
-            Omakase
+            <img class="nav_logo nav_logo-dark" src="/src/assets/images/svg/logo_omakase-dark.svg" alt="omakase">
+            <img class="nav_logo nav_logo-light" src="/src/assets/images/svg/logo_omakase-light.svg" alt="omakase">
           </h1>
         </RouterLink>
         <div

diff --git a/src/style.css b/src/style.css
@@ -51,4 +51,21 @@ html[data-theme='dark'] {
 .slide-up-leave-to {
   opacity: 0;
   transform: translateY(-calc(15%));
+}
+/* nav logo style */
+.nav_logo {
+  width: calc(100% - 4rem);
+  margin-left: -1rem;
+}
+html.dark .nav_logo-light {
+  display: none;
+}
+html.light .nav_logo-light {
+  display: inline-block;
+}
+html.dark .nav_logo-dark {
+  display: inline-block;
+}
+html.light .nav_logo-dark {
+  display: none;
 }