[RZA-250175]: update CSS of few pages (#178)

Author: recursivezero

src/assets/styles/cards/stack.css

@@ -46,7 +46,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
   gap: 2rem;
   color: #f1f5f9;
   font:
@@ -92,7 +92,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: start;
-  flex: 1;
   width: 100%;
 }
 
@@ -392,10 +391,12 @@
     padding: 1rem 0.5rem;
     justify-content: flex-start;
   }
+
   .alphabet-container {
     height: 600px;
     gap: 0rem;
   }
+
   .alphabet-title {
     font-size: 1.5rem;
   }
@@ -443,4 +444,4 @@
     padding: 0.4rem 0.8rem;
     bottom: 5px;
   }
-}
+}

src/assets/styles/globals.css

@@ -126,7 +126,7 @@
     grid-template-columns: minmax(0, auto) 1fr;
     grid-auto-flow: column;
     grid-template-areas: "sidebar content";
-    padding: 2rem;
+    padding: 1rem;
     background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
     font-size: 1.25rem;
     line-height: 1.6;

src/assets/styles/header.css

@@ -86,7 +86,7 @@
     display: flex;
     flex-direction: row;
     align-content: center;
-    justify-content: center;
+    justify-content: end;
     flex-wrap: wrap;
     gap: 1rem;
   }

src/assets/styles/landing.css

@@ -252,6 +252,7 @@
   color: var(--text-light);
   margin-bottom: 1rem;
   font-size: 0.9rem;
+  min-height: 3rem;
 }
 
 .game-tags {

src/assets/styles/varnmala/reader.css

@@ -16,7 +16,7 @@
   will-change: contents;
   line-height: 1;
   gap: 0.5rem;
-  height: max-content;
+  height: 80vh;
 }
 
 .info {
@@ -28,7 +28,7 @@
   padding: 0.5rem;
 }
 
-.container__reader > .letter {
+.container__reader>.letter {
   width: 100%;
   box-sizing: border-box;
   display: flex;
@@ -186,12 +186,12 @@
     font-size: min(200rem, 70vw);
   }
 
-  .container__reader > .letter {
+  .container__reader>.letter {
     justify-content: center;
     margin-left: auto;
   }
 
   .mute-button {
     font-size: min(1.5rem, 6vw);
   }
-}
+}

src/assets/styles/varnmala/speak.css

@@ -94,6 +94,8 @@
 
 /* Container styles */
 .container__english {
+  padding-block: 0.5rem;
+
   & .letter {
     font-size: min(100vw, 100vh);
     line-height: 1;
@@ -104,7 +106,7 @@
     transition: color 0.5s ease-in;
   }
 
-  /* Background styles */
+  /* Original Background gradients */
   & .bg-gradient1 {
     background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
   }
@@ -113,50 +115,66 @@
     background: linear-gradient(45deg, #a8e6cf, #dcedc1);
   }
 
-  & .bg-pattern1 {
-    background-image: repeating-linear-gradient(
-      45deg,
-      rgba(0, 0, 0, 0.1) 0px,
-      rgba(0, 0, 0, 0.1) 2px,
-      transparent 2px,
-      transparent 4px
-    );
-  }
-
-  &.bg-gradient3 {
+  & .bg-gradient3 {
     background: linear-gradient(135deg, #667eea, #764ba2);
   }
 
-  &.bg-gradient4 {
+  & .bg-gradient4 {
     background: linear-gradient(135deg, #2af598, #009efd);
   }
 
-  &.bg-gradient5 {
+  & .bg-gradient5 {
     background: linear-gradient(135deg, #f83600, #f9d423);
   }
 
-  &.bg-pattern2 {
-    background-image: repeating-linear-gradient(
-      45deg,
-      transparent,
-      transparent 10px,
-      rgba(0, 0, 0, 0.05) 10px,
-      rgba(0, 0, 0, 0.05) 20px
-    );
+  /* 5 New Beautiful Gradients */
+  & .bg-gradient6 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+
+  & .bg-gradient7 {
+    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  }
+
+  & .bg-gradient8 {
+    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
+  }
+
+  & .bg-gradient9 {
+    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
   }
 
-  &.bg-pattern3 {
-    background-image: repeating-radial-gradient(
-      circle,
-      transparent,
-      transparent 10px,
-      rgba(0, 0, 0, 0.05) 10px,
-      rgba(0, 0, 0, 0.05) 20px
-    );
+  & .bg-gradient10 {
+    background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
+  }
+
+  /* Pattern styles */
+  & .bg-pattern1 {
+    background-image: repeating-linear-gradient(45deg,
+        rgba(0, 0, 0, 0.1) 0px,
+        rgba(0, 0, 0, 0.1) 2px,
+        transparent 2px,
+        transparent 4px);
+  }
+
+  & .bg-pattern2 {
+    background-image: repeating-linear-gradient(45deg,
+        transparent,
+        transparent 10px,
+        rgba(0, 0, 0, 0.05) 10px,
+        rgba(0, 0, 0, 0.05) 20px);
+  }
+
+  & .bg-pattern3 {
+    background-image: repeating-radial-gradient(circle,
+        transparent,
+        transparent 10px,
+        rgba(0, 0, 0, 0.05) 10px,
+        rgba(0, 0, 0, 0.05) 20px);
   }
 }
 
-& .no-background {
+.no-background {
   background: none !important;
 }
 
@@ -170,4 +188,4 @@
     transform: scale(1);
     opacity: 1;
   }
-}
+}

src/data/gamesData.ts

@@ -176,12 +176,12 @@ export const gamesData: Record<AgeKey, Game[]> = {
       link: "/vedic"
     },
     {
-      title: "Glossary",
-      description: "Classic and modern glossary data.",
+      title: "Zodiac",
+      description: "Ancient Indian Zodiac Signs.",
       image:
         "https://images.unsplash.com/photo-1610890716171-6b1bb98ffd09?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
       tags: ["Strategy", "Classic", "Multiplayer"],
-      link: "/glossary"
+      link: "/zodiac"
     }
   ]
 };

src/layouts/BaseHead.astro

@@ -2,7 +2,6 @@
 //import { ClientRouter } from "astro:transitions";
 
 import "@/assets/styles/globals.css";
-import Analytics from "@/components/Analytics.astro";
 import { siteConfig } from "@/site-config";
 import "@fontsource/roboto";
 

src/pages/games/[age].astro

@@ -18,7 +18,6 @@ export function getStaticPaths() {
 }
 
 // 2. These come from the matching entry in getStaticPaths()
-const { age } = Astro.params;
 const { games, displayName } = Astro.props;
 
 const meta = {
@@ -29,13 +28,11 @@ const meta = {
 
 <BaseLayout meta={meta}>
   <div class="games-page">
-    <div class="container--game">
-      <div class="page-header">
-        <Back />
-        <h2>Games for {displayName}</h2>
-      </div>
-
-      {games.length === 0 ? <p>No games found for this age group.</p> : <GamesGrid games={games} />}
+    <div class="page-header">
+      <Back />
+      <h2>Games for {displayName}</h2>
     </div>
+
+    {games.length === 0 ? <p>No games found for this age group.</p> : <GamesGrid games={games} />}
   </div>
 </BaseLayout>

src/pages/landing.astro

@@ -27,3 +27,5 @@ import Hero from "@/components/Hero.astro";
     });
   }
 </script>
+
+