updated sunsigns

Author: chhaviS04

src/assets/styles/Sunsigns.css

@@ -1,14 +1,14 @@
 :root {
-  --primary-color: #f12711;
-  --secondary-color: #f5af19;
-  --text-color: #333;
-  --bg-color1: #eef2f3;
-  --bg-color2: #e4cece;
-  --card-bg: #ffffff;
-  --header-bg: #ffffff;
-  --footer-social-bg: #e4cece;
+    --primary-color: #7b1fa2;
+  --secondary-color: rgba(161, 10, 144, 0.72);
+  --text-color: #f5f5f5;
+  --bg-color1: #121212;
+  --bg-color2: #1e1e1e;
+  --card-bg: #1e1e1e;
+  --header-bg: #1e1e1e;
+  --footer-social-bg: #33353d;
 }
-.dark-mode {
+[data-theme="dark"] {
   --primary-color: #7b1fa2;
   --secondary-color: rgba(161, 10, 144, 0.72);
   --text-color: #f5f5f5;
@@ -18,100 +18,23 @@
   --header-bg: #1e1e1e;
   --footer-social-bg: #33353d;
 }
-
-/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&display=swap'); */
-body {
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  margin: 0;
-  padding: 0;
-  background: linear-gradient(to right, var(--bg-color1), var(--bg-color2));
-  color: var(--text-color);
-  transition: all 0.3s ease;
+[data-theme="light"]{
+  --primary-color: #f12711;
+  --secondary-color: #f5af19;
+  --text-color: #333;
+  --bg-color1: #eef2f3;
+  --bg-color2: #e4cece;
+  --card-bg: #ffffff;
+  --header-bg: #ffffff;
+  --footer-social-bg: #e4cece;
 }
 
-/* body.hindi {
-    font-family: 'Noto Sans Devanagari', sans-serif;
-  } */
-
-/* .headers {
-    position: relative; 
-    margin: 20px auto 0;    
-    width: 90%;             
-    max-width: 1200px;      
-    padding: 20px;           
-    background-color: var(--header-bg);      
-    border-radius: 15px;     
-    box-shadow: 0 2px 5px var(--primary-color);
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-  } */
-
 .controls {
   display: flex;
   gap: 1rem;
+  margin-top: 5rem;
   align-items: center;
-  justify-content: flex-end;
-}
-
-/* Dark Mode Toggle Switch */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 30px;
-  margin-left: 10px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: 0.4s;
-  border-radius: 34px;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 22px;
-  width: 22px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: 0.4s;
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: var(--primary-color);
-}
-
-input:checked + .slider:before {
-  transform: translateX(30px);
-}
-.home-button {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-  color: white;
-  border: 1px solid var(--primary-color);
-  transition: all 0.3s ease;
+  justify-content: center;
 }
 
 /* Language Selector Buttons */
@@ -136,41 +59,13 @@ input:checked + .slider:before {
   color: white;
 }
 
-main {
+article {
   padding: 2rem;
-  /* max-width: 1200px; */
+  max-width: 1200px;
   margin: 0 auto;
 }
 
-/* Home Page Button Container */
-.button-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 2rem;
-  margin-left: 20rem;
-  text-align: center;
-  width: 50%;
-}
-
-.nav-button {
-  padding: 1.5rem;
-  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-  color: white;
-  text-decoration: none;
-  border-radius: 8px;
-  font-size: 1.2rem;
-  transition: transform 0.2s;
-  text-align: center;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.nav-button:hover {
-  transform: scale(1.02);
-}
-
-/* Grid Layout for Months and Zodiacs */
+/* Grid Layout for Zodiacs */
 .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -255,16 +150,6 @@ main {
   .grid-container {
     grid-template-columns: repeat(2, 1fr);
   }
-  header,
-  footer {
-    width: calc(100% - 30px);
-    margin: 15px auto;
-  }
-  header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
 
   .controls {
     width: 100%;
@@ -278,27 +163,12 @@ main {
     right: 15px;
     top: 15px;
   }
-  footer-col {
-    width: 50%;
-    margin-bottom: 20px;
-  }
 }
 
 @media (max-width: 480px) {
-  header,
-  footer {
-    width: calc(100% - 20px);
-    margin: 10px auto;
-    padding: 15px;
-  }
   .grid-container {
     grid-template-columns: 1fr;
   }
-
-  .nav-button {
-    padding: 1rem;
-    font-size: 1rem;
-  }
   .modal-content {
     width: 98%;
     padding: 12px;
@@ -361,20 +231,6 @@ main {
     width: 100%;
   }
 
-  .toggle-switch {
-    width: 50px;
-    height: 26px;
-    margin-left: 0; /* Remove left margin on mobile */
-  }
-
-  .slider:before {
-    height: 20px;
-    width: 20px;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(24px); /* Adjusted for new width */
-  }
 }
 
 @media (max-width: 480px) {
@@ -384,32 +240,9 @@ main {
     gap: 0.5rem;
   }
 
-  .toggle-switch {
-    width: 44px;
-    height: 24px;
-  }
-
-  .slider:before {
-    height: 18px;
-    width: 18px;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(20px);
-  }
-
   .language-buttons {
-    order: 1; /* Move language buttons to top */
+    order: 1; 
     justify-content: space-between;
   }
 
-  .toggle-switch {
-    order: 2; /* Move toggle below language buttons */
-    margin: 0 auto; /* Center the toggle */
-  }
-
-  .home-button {
-    order: 3; /* Move home button to bottom */
-    text-align: center;
-  }
 }

src/components/DarkModeToggle.astro

@@ -1,12 +1,10 @@
 ---
 import LanguageSwitcher from "./LanguageSwitcher.astro";
-import DarkModeToggle from "./DarkModeToggle.astro";
 ---
 
 <header>
   <h1>Nakshtra Nexus</h1>
   <div class="controls">
     <LanguageSwitcher />
-    <DarkModeToggle />
   </div>
 </header>

src/components/Header.astro

@@ -9,8 +9,8 @@ import "@/assets/styles/Sunsigns.css";
 <BaseLayout meta={{ title: "Nakshtra Nexus" }}>
   <Back />
   <Headers />
-  <main>
+  <article>
     <ZodiacGrid />
-  </main>
+  </article>
   <script type="module" src="/js/main.js"></script></BaseLayout
 >

src/pages/zodiacs.astro src/pages/zodiac.astrosrc/pages/zodiacs.astro renamed to src/pages/zodiac.astro

@@ -185,7 +185,7 @@ export const NavbarLinks: LinkProps[] = [
   {
     name: "Sunsigns",
     title: "Sunsigns",
-    path: "/zodiacs",
+    path: "/zodiac",
     isActive: true
   },
   {