Header > Text and Varanmala > listen -padding

Author: Rupesh-Rathore

src/assets/styles/varnmala/reader.css

@@ -18,7 +18,12 @@
   gap: 0.5rem;
   height: max-content;
 }
-
+.container__reader > .letter{
+  width: 100%;
+    box-sizing: border-box;
+    margin-left: 4rem;
+    text-align: center;
+}
 .hide {
   display: none;
 }
@@ -168,8 +173,10 @@
   .container__reader {
     font-size: min(200rem, 70vw);
   }
-
+.container__reader > .letter{
+  margin-left: auto;
+}
   .mute-button {
-    font-size: min(2.5rem, 8vw);
+    font-size: min(1.5rem, 6vw);
   }
 }

src/layouts/common/Header.astro

@@ -12,7 +12,7 @@ import logoImage from "/public/assets/images/512x512.png";
       <span title={APP_NAME}>{APP_NAME}</span>
     </a>
   </div>
-  <div class="title text__balance">Welcome to the corner of learning</div>
+  <div class="title text__balance">Learn with fun</div>
 
   <!--<div class="caption">
     <a href="/" class:list={{ "is-active": Astro.url.pathname === "/home" || Astro.url.pathname === "/" }}>Home</a>

src/pages/varnmala/listen.astro

@@ -32,7 +32,8 @@ import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
       />
     </Fragment>
 
-    <article id="container__reader" class="container__reader">a🍎</article>
+    <article id="container__reader" class="container__reader">
+      <div class="letter">a🍎</div></article>
     <section class="section--audio hide">
       <audio id="audioPlayer" controlslist="nodownload" controls autoplay></audio>
     </section>