added help to reader and updated css

Author: Ciphrox

src/assets/styles/reader.css

@@ -3,7 +3,8 @@
   --main__txt--2: #ff61d5;
   --button__bg--3: hsl(60deg, 56%, 91%);
 }
-#reader-main {
+
+#container__reader {
   font-size: 20rem;
   display: grid;
   place-content: center;
@@ -18,17 +19,20 @@
   min-height: 60vh;
   line-height: 1;
   padding: 1rem;
+
+  & span:hover,
+  span:active,
+  span.active {
+    background-color: aliceblue;
+    color: #6767d3;
+  }
 }
 
 .center {
   display: grid;
   place-items: center;
 }
 
-.hide {
-  display: none;
-}
-
 .scroll {
   margin-top: 10px;
   scroll-behavior: smooth;
@@ -61,14 +65,7 @@
   cursor: pointer;
 }
 
-.speaker > span {
+.speaker>span {
   padding: 0.5rem;
   border: 1px solid grey;
-}
-
-span:hover,
-span:active,
-span.active {
-  background-color: aliceblue;
-  color: #6767d3;
-}
+}

src/pages/reader.astro

@@ -1,5 +1,6 @@
 ---
 import "@/assets/styles/reader.css";
+import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
 ---
 
@@ -12,15 +13,20 @@ import BaseLayout from "@/layouts/Base";
       <span data-name="mudra">Mudra</span>
       <span data-name="rutvi">Rutvi</span>
     </div>
+
+    <Help
+      title="Reader"
+      description="Press any letter key (A-Z) to display it with a related emoji. Toggle the speaker buttons to change voices, and use the audio button to mute/unmute sounds."
+    />
   </Fragment>
-  <article id="reader-main"></article>
+  <article id="container__reader">a🍎</article>
   <section class="section--audio hide">
     <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
   </section>
   <script>
     import { emojiList, isAlphabet, isNumber, random } from "@/utils/utils.js";
 
-    const mainBlock = document.querySelector("#reader-main") as HTMLElement;
+    const mainBlock = document.querySelector("#container__reader") as HTMLElement;
     const muteButton = document.querySelector("#mute") as HTMLButtonElement;
     const audioPlayer = document.querySelector("#audioPlayer") as HTMLAudioElement;
     const speaker = document.querySelector("#speaker") as HTMLElement;