added dialog

src/assets/styles/about.css

@@ -1,9 +1,9 @@
+@import url('./common.css');
 .container__about {
   padding: 1rem;
 
   >.moto {
     color: #3a8657;
     font-size: 3rem;
-
   }
 }

src/assets/styles/common.css

@@ -1,8 +1,5 @@
-.text-gradient {
-    background-image: var(--accent-gradient);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
+.hint {
+  padding: 1rem;
+  outline: 1px solid grey;
+  cursor: pointer;
 }

src/assets/styles/dialog.css

@@ -0,0 +1,51 @@
+dialog[open] {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+/*   Closed state of the dialog   */
+dialog {
+  opacity: 0;
+  transform: scaleY(0);
+  transition:
+    opacity 0.7s ease-out,
+    transform 0.7s ease-out,
+    overlay 0.7s ease-out allow-discrete,
+    display 0.7s ease-out allow-discrete;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */
+}
+
+/*   Before-open state  */
+/* Needs to be after the previous dialog[open] rule to take effect,
+    as the specificity is the same */
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+}
+
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog::backdrop {
+  background-color: rgb(0 0 0 / 0%);
+  transition:
+    display 0.7s allow-discrete,
+    overlay 0.7s allow-discrete,
+    background-color 0.7s;
+  /* Equivalent to
+  transition: all 0.7s allow-discrete; */
+}
+
+dialog[open]::backdrop {
+  background-color: rgb(0 0 0 / 25%);
+}
+
+/* This starting-style rule cannot be nested inside the above selector
+because the nesting selector cannot represent pseudo-elements. */
+
+@starting-style {
+  dialog[open]::backdrop {
+    background-color: rgb(0 0 0 / 0%);
+  }
+}

src/assets/styles/global.css

@@ -14,8 +14,6 @@
 }
 
 * {
-  margin: 0;
-  padding: 0;
   box-sizing: border-box;
 }
 
@@ -128,4 +126,4 @@ footer {
   height: var(--footer-h);
   display: flex;
   align-items: center;
-}
+}

src/pages/about.astro

@@ -1,27 +1,41 @@
 ---
 import "@/assets/styles/about.css";
+import "@/assets/styles/dialog.css";
 import Header from "@/components/Header";
 import Layout from "@/layouts/Layout";
 
 ---
 
 <Layout title="About Us">
   <Header title="About us">
-    <div >❓</div>
+    <div id="hint" class="hint">❓</div>
   </Header>
-  <dialog 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>
-	</dialog>
   <main>
     <div class="container__about">
       <h1>Hello There</h1>
       <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>
+    <dialog id="info">
+      <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>
+    </dialog>
+  </div>
   </main>
 </Layout>
+
+
+<script>
+  const hint = document.querySelector('#hint');
+  const infoDialog = document.querySelector('dialog');
+  const btn = document.querySelector('dialog > button');
+  hint?.addEventListener('click', ()=>{
+    infoDialog?.showModal();
+  })
+  btn?.addEventListener('click', () =>{
+    infoDialog?.close();
+  })
+</script>