fixed css

abcd.code-workspace

@@ -56,6 +56,9 @@
     "[html]": {
       "editor.defaultFormatter": "vscode.html-language-features"
     },
+    "[css]": {
+      "editor.foldingStrategy": "indentation"
+    },
     "eslint.validate": [
       "mdx",
       "markdown",
@@ -161,10 +164,12 @@
     "cSpell.words": [
       "headlessui",
       "heroicons",
+      "hyperlegible",
       "Mohta",
       "nojekyll",
       "recursivezero",
       "sanyukat",
+      "sportrop",
       "threadzip"
     ],
     "css.lint.unknownAtRules": "ignore",

src/assets/styles/about.css

@@ -0,0 +1,9 @@
+.container__about {
+  padding: 1rem;
+
+  >.moto {
+    color: #3a8657;
+    font-size: 3rem;
+
+  }
+}

src/assets/styles/global.css

@@ -3,6 +3,7 @@
   --accent-light: 224, 204, 250;
   --accent-dark: 49, 10, 101;
   --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+  color-scheme: light dark;
   --text: white;
   --bg: #13151a;
   /*border color */
@@ -90,15 +91,14 @@ header {
   grid-area: header;
   height: var(--header-h);
   border: 1px solid pink;
-  border-radius: 0.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-inline: 1rem;
 }
 
 a {
-  color: white;
+  color: light-dark(#f5f2f2, white);
 }
 
 h1 {
@@ -111,16 +111,12 @@ h1 {
 
 main {
   grid-area: main;
-  margin: auto;
+  display: grid;
   padding: 1rem;
-  width: auto;
-  max-width: calc(100% - 2rem);
-  color: white;
+  color: var(--text, white);
   font-size: 1.25rem;
   line-height: 1.6;
-  max-height: max-content;
   max-height: calc(100vh - var(--header-h) - var(--footer-h) - 4rem);
-  display: grid;
   grid-auto-flow: row;
   height: 100vh;
 }

src/assets/styles/header.css

@@ -1,3 +1,4 @@
+@import url(./global.css);
 
 .header {
   background-color: #15091d;

src/assets/styles/nav.css

@@ -90,8 +90,3 @@ nav {
     color: #5b3333;
   }
 }
-
-.footer {
-  text-align: center;
-  align-self: center;
-}

src/assets/styles/panel.css

@@ -19,7 +19,6 @@
   --tz: 288px;
 }
 
-
 main {
   display: grid;
   grid-template-areas: 'option' 'panel';

src/components/BaseHead.astro

@@ -1,7 +1,6 @@
 ---
 import { siteConfig } from "@/site-config";
 
-
 const { title, description, ogImage } = Astro.props;
 
 const titleSeparator = "•";

src/components/Footer.astro

@@ -2,5 +2,5 @@
 const currentYear = new Date().getFullYear();
 ---
 <footer>
-  <p class="copyright">&copy; {currentYear} | RecursiveZero Private Limited | All rights reserved </p>
+  <p class="copyright">&copy; {currentYear} | RecursiveZero private limited | All rights reserved. </p>
 </footer>

src/pages/about.astro

@@ -1,20 +1,27 @@
 ---
+import "@/assets/styles/about.css";
 import Header from "@/components/Header";
 import Layout from "@/layouts/Layout";
+
 ---
 
 <Layout title="About Us">
-  <Header>
-    <div>popover content</div>
+  <Header title="About us">
+    <div popovertarget="hint">❓</div>
   </Header>
+  <div popover id="hint">
+		<button autofocus>Close</button>
+		<p>Hide & Seek.</p>
+		<p>Press any alphabet key from keyboard and that letter will appears and when you press again then it will
+			disappears. see some hover and active effect while hover over each card</p>
+	</div>
   <main>
-    <div>
+    <div class="container__about">
       <h1>Hello There</h1>
-      <p>This is my initial version to make interactive games for kids</p>
-      <p>
-        Inspiration behind these games are to take kids away from smartphone and close to keyboard which will help in
-        their future building also.
-      </p>
+      <section class="moto">
+        <p>This is my initial version to make interactive games for kids</p>
+        <p>Inspiration behind these games are to take kids away from smartphone and close to keyboard which will help in their future building also. </p>
+      </section>
     </div>
   </main>
 </Layout>

src/pages/letter/[...slug].astro

@@ -33,7 +33,7 @@ const { title, text } = Astro.props;
 ---
 <Layout title="varnmala" >
   <Header title="Varnmala">
-    <div>popover content</div>
+    <div>what</div>
   </Header>
   <main>
     <p>{title}</p>

src/pages/panel.astro

@@ -1,7 +1,7 @@
 ---
+import "@/assets/styles/panel.css";
 import Header from "@/components/Header";
 import Layout from "@/layouts/Layout";
-import "@/assets/styles/panel.css";
 
 ---
 
@@ -23,7 +23,7 @@ import "@/assets/styles/panel.css";
 </style>
 <Layout title="varnmala" >
   <Header title="Varnmala">
-    <div>popover content</div>
+    <div>❓</div>
   </Header>
   <main class="tv">
     <section class="scene">

src/pages/varnmala.astro

@@ -8,7 +8,7 @@ import { varnmala_english, varnmala_hindi } from '@/utils/common';
 
 <Layout title="varnmala" >
   <Header title="Alphabets">
-    <div>popover content</div>
+    <div>❓</div>
   </Header>
   <main>
     <Alphabet list={varnmala_english} title="English"/>