fix: lightmode logo (#128)

astoria-tech · May 17, 2024 · 06600d6 · 06600d6
1 parent 42fd1a4
commit 06600d6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -2,6 +2,8 @@
 
 ---
 
-<div class="mb-5 dark:bg-[#2d272e] px-5 py-7 dark:text-[#f8fafc] dark:border-[#1c1917] border-8 rounded-2xl">
+<div
+  class="mb-5 bg-[#f8fafc] border-[#846e8b] dark:bg-[#2d272e] px-5 py-7 dark:text-[#f8fafc] dark:border-[#1c1917] border-8 rounded-2xl"
+>
   <slot />
 </div>
diff --git a/src/pages/links.astro b/src/pages/links.astro
@@ -3,7 +3,8 @@ import MainLayout from '../layouts/MainLayout.astro'
 import {getLink} from '../components/Link.astro'
 import Card from '../components/Card.astro'
 
-const logo = getLink('/design/symbol-white-astoria-tech-mark.png')
+const darkmodeLogo = getLink('/design/symbol-white-astoria-tech-mark.png')
+const lightmodeLogo = getLink('/design/symbol-black-astoria-tech-mark.png')
 
 const data = [
   {name: 'Meetup page', href: 'https://www.meetup.com/astoria-tech-meetup/'},
@@ -18,16 +19,17 @@ const data = [
 <MainLayout>
   <Card>
     <header>
-      <img class="mx-auto w-70 p-10" src={logo} alt="Astoria Tech Logo" />
+      <img class="mx-auto w-70 p-10 hidden dark:inline-block" src={darkmodeLogo} alt="Astoria Tech Logo" />
+      <img class="mx-auto w-70 p-10 dark:hidden" src={lightmodeLogo} alt="Astoria Tech Logo" />
     </header>
     <div class="flex flex-col items-center">
       {
         data.map(item => (
           <a
-            class="no-underline w-80 dark:bg-[#f8fafc] bg-opacity-95 rounded-full p-3 lg:p-4 mb-5 text-center dark:last:bg-[#B7C7B3]"
+            class="no-underline w-80 bg-[#2d272e] dark:bg-[#f8fafc] bg-opacity-95 rounded-full p-3 lg:p-4 mb-5 text-center last:bg-[#846e8b] dark:last:bg-[#B7C7B3]"
             href={item.href}
           >
-            <span class="font-bold text-xl dark:text-[#1c1917] py-2 px-4">{item.name}</span>
+            <span class="font-bold text-xl text-[#f8fafc] dark:text-[#1c1917] py-2 px-4">{item.name}</span>
           </a>
         ))
       }