[RZA-250154]: mobile splash

recursivezero · recursivezero · commit 2d889df7478e · 2025-07-22T22:26:17.000+05:30
diff --git a/src/assets/styles/cards/stack.css b/src/assets/styles/cards/stack.css
@@ -392,7 +392,7 @@
     padding: 1rem 0.5rem;
     justify-content: flex-start;
   }
-  .alphabet-container{
+  .alphabet-container {
     height: 600px;
     gap: 0rem;
   }
diff --git a/src/assets/styles/draw.css b/src/assets/styles/draw.css
@@ -351,7 +351,6 @@
   z-index: 100;
 }
 
-*:focus {
-  outline: none;
-  box-shadow: none;
+select {
+  color: white;
 }
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
@@ -232,4 +232,9 @@
     appearance: base-select;
     border: none;
   }
+
+  *:focus {
+    outline: none;
+    box-shadow: none;
+  }
 }
diff --git a/src/assets/styles/mobile-splash.css b/src/assets/styles/mobile-splash.css
@@ -10,7 +10,8 @@
   align-items: center;
   padding: 1rem;
   transition: background-color 0.3s ease;
-  content-visibility: visible;
+  display: none;
+  content-visibility: hidden;
 }
 
 @container splash (max-width: 768px) {
diff --git a/src/assets/styles/poem-dialog.css b/src/assets/styles/poem-dialog.css
@@ -88,24 +88,24 @@
     width: 80%;
     height: max-content;
     box-sizing: border-box;
-    margin: auto
-    
+    margin: auto;
   }
 
   .modal-title {
-    font-size: 1.50rem;
+    font-size: 1.5rem;
   }
 
   .lines {
     font-size: 1rem;
   }
 
   .modal-content > .model-buttons > button.speaker-btn,
-.modal-content > .model-buttons > button.close{
+  .modal-content > .model-buttons > button.close {
     width: 36px;
-  height: 36px;
-}
-.modal-content > .model-buttons > button svg {
-  width: 32px;
-  height: 32px;}
+    height: 36px;
+  }
+  .modal-content > .model-buttons > button svg {
+    width: 32px;
+    height: 32px;
+  }
 }
diff --git a/src/assets/styles/varnmala/reader.css b/src/assets/styles/varnmala/reader.css
@@ -28,7 +28,7 @@
   padding: 0.5rem;
 }
 
-.container__reader>.letter {
+.container__reader > .letter {
   width: 100%;
   box-sizing: border-box;
   margin-left: 4rem;
@@ -187,12 +187,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);
   }
-}
+}
diff --git a/src/components/MobileSplash.astro b/src/components/MobileSplash.astro
@@ -5,7 +5,7 @@ import logoImage from "public/assets/images/abcd.png";
 const { stay } = Astro.props;
 ---
 
-<div id="mobile-splash-wrapper" class="container_splash">
+<div id="mobile-splash-wrapper" class="container__splash">
   <div class="container_splash_card">
     <Image src={logoImage} alt="logo of abcd" width="50" height="50" />
     <h1 class="container_splash_heading"><strong>This page is best experienced on desktop</strong></h1>
diff --git a/src/components/Speaker.astro b/src/components/Speaker.astro
@@ -18,11 +18,12 @@ declare global {
 */
 ---
 
-<style>
+<style is:inline>
   .speaker-controls {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    cp;pr"#fff;
   }
 
   #voice-dropdown {
diff --git a/src/components/about/FeaturesSection.astro b/src/components/about/FeaturesSection.astro
@@ -155,7 +155,7 @@ const features: Feature[] = [
 <style>
   .features-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
     gap: 2rem;
   }
 
diff --git a/src/pages/akshar.astro b/src/pages/akshar.astro
@@ -16,10 +16,7 @@ const meta = {
   <BackIcon />
   <Fragment slot="header-right">
     <SharePopover />
-    <Help
-      title="Indic Alphabets"
-      description="Learn alphabets of different Indian languages by alphabet comparison."
-    />
+    <Help title="Indic Alphabets" description="Learn alphabets of different Indian languages by alphabet comparison." />
   </Fragment>
   <IndicLanguageGrid primary="hi" secondary="kn" />
 </BaseLayout>
diff --git a/src/pages/alphabets/[alphabet]/board.astro b/src/pages/alphabets/[alphabet]/board.astro
@@ -6,6 +6,7 @@ import LetterCard from "@/components/LetterCard.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import BaseLayout from "@/layouts/Base";
 import { DATASET } from "@/mappers/dataset";
+import { capitalizeThis } from "@/utils/common";
 
 export const prerender = true;
 
@@ -20,7 +21,7 @@ const { alphabet } = Astro.params;
 const data = DATASET[alphabet].data;
 
 const meta = {
-  title: "Alphabets",
+  title: `Board • ${capitalizeThis(alphabet)}`,
   description: `Explore the "${alphabet}" category with interactive flashcards to learn associated words and objects.`
 };
 ---
diff --git a/src/pages/alphabets/[alphabet]/playground.astro b/src/pages/alphabets/[alphabet]/playground.astro
@@ -27,7 +27,7 @@ const { alphabet } = Astro.params;
 const currentCategory = DATASET[alphabet] || defaultCategory;
 
 const meta = {
-  title: `${capitalizeThis(alphabet)} - Playground`,
+  title: `Playground • ${capitalizeThis(alphabet)}`,
   description: `Type or navigate to interactively explore the "${capitalizeThis(
     alphabet
   )}" alphabet set using keyboard or arrows.`
diff --git a/src/pages/draw.astro b/src/pages/draw.astro
@@ -7,7 +7,7 @@ import MobileSplash from "@/components/MobileSplash.astro";
 import BaseLayout from "@/layouts/Base";
 
 const meta = {
-  title: "Draw by Keyboard",
+  title: "Draw",
   description:
     "Practice drawing letters and shapes using your keyboard. An interactive tool for learning letter formation and improving skills."
 };
diff --git a/src/pages/glossary/[item].astro b/src/pages/glossary/[item].astro
@@ -15,15 +15,11 @@ export async function getStaticPaths() {
 }
 
 const { item } = Astro.params;
-const categoryData = item ? (glossaryData as any)[item] : undefined;
+const categoryData = item ? (glossaryData as any)[item] : {};
 const { title, data, category } = categoryData || {};
 
-if (!categoryData) {
-  throw new Error("Glossary category not found");
-}
-
 const meta = {
-  title,
+  title: `Glossary • ${title}`,
   description: `Explore glossary term: ${title}. Learn definitions and examples!`
 };
 ---
diff --git a/src/pages/map/index.astro b/src/pages/map/index.astro
@@ -37,7 +37,7 @@ const meta = {
         categories.map((category: Category) => (
           <a href={`/map/${category.id}`} class="explore-card">
             <div class="card-image">
-              <Image src={category.image} alt={category.title} width={400} height={225} />
+              <Image src={category.image} alt={category.title} width={400} height={225} loading={"eager"} />
             </div>
             <div class="card-content">
               <div class="card-header">
diff --git a/src/pages/math.astro b/src/pages/math.astro
@@ -6,8 +6,8 @@ import SharePopover from "@/components/ShareButton.astro";
 import BaseLayout from "@/layouts/Base";
 
 const meta = {
-  title: "Basic Arithmetic",
-  description: "Practice basic math operations like addition, subtraction, and multiplication."
+  title: "Maths",
+  description: "Practice basic math arithmetic operations like addition, subtraction, and multiplication."
 };
 ---
 
diff --git a/src/pages/varnmala/listen.astro b/src/pages/varnmala/listen.astro

Original file line number	Diff line number	Diff line change
`@@ -392,7 +392,7 @@`
`392`	`392`	`padding: 1rem 0.5rem;`
`393`	`393`	`justify-content: flex-start;`
`394`	`394`	`}`
`395`		`- .alphabet-container{`
	`395`	`+ .alphabet-container {`
`396`	`396`	`height: 600px;`
`397`	`397`	`gap: 0rem;`
`398`	`398`	`}`
Original file line number	Diff line number	Diff line change
`@@ -351,7 +351,6 @@`
`351`	`351`	`z-index: 100;`
`352`	`352`	`}`
`353`	`353`
`354`		`-*:focus {`
`355`		`- outline: none;`
`356`		`- box-shadow: none;`
	`354`	`+select {`
	`355`	`+ color: white;`
`357`	`356`	`}`
Original file line number	Diff line number	Diff line change
`@@ -232,4 +232,9 @@`
`232`	`232`	`appearance: base-select;`
`233`	`233`	`border: none;`
`234`	`234`	`}`
	`235`	`+`
	`236`	`+ *:focus {`
	`237`	`+ outline: none;`
	`238`	`+ box-shadow: none;`
	`239`	`+ }`
`235`	`240`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,8 @@`
`10`	`10`	`align-items: center;`
`11`	`11`	`padding: 1rem;`
`12`	`12`	`transition: background-color 0.3s ease;`
`13`		`- content-visibility: visible;`
	`13`	`+ display: none;`
	`14`	`+ content-visibility: hidden;`
`14`	`15`	`}`
`15`	`16`
`16`	`17`	`@container splash (max-width: 768px) {`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`padding: 0.5rem;`
`29`	`29`	`}`
`30`	`30`
`31`		`-.container__reader>.letter {`
	`31`	`+.container__reader > .letter {`
`32`	`32`	`width: 100%;`
`33`	`33`	`box-sizing: border-box;`
`34`	`34`	`margin-left: 4rem;`
`@@ -187,12 +187,12 @@`
`187`	`187`	`font-size: min(200rem, 70vw);`
`188`	`188`	`}`
`189`	`189`
`190`		`- .container__reader>.letter {`
	`190`	`+ .container__reader > .letter {`
`191`	`191`	`justify-content: center;`
`192`	`192`	`margin-left: auto;`
`193`	`193`	`}`
`194`	`194`
`195`	`195`	`.mute-button {`
`196`	`196`	`font-size: min(1.5rem, 6vw);`
`197`	`197`	`}`
`198`		`-}`
	`198`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -155,7 +155,7 @@ const features: Feature[] = [`
`155`	`155`	`<style>`
`156`	`156`	`.features-grid {`
`157`	`157`	`display: grid;`
`158`		`- grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));`
	`158`	`+ grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));`
`159`	`159`	`gap: 2rem;`
`160`	`160`	`}`
`161`	`161`