Update index.html

index.html

@@ -56,7 +56,7 @@
       border-radius: 5px;
     }
 
-    /* Dedication Page - Centered Box */
+    /* Dedication Page */
     .dedication-section {
       display: flex;
       align-items: center;
@@ -86,24 +86,40 @@
       color: #4a3e3e;
     }
 
-    /* Story Page */
+    /* Story Page - Full Width */
+    #story {
+      min-height: 100vh;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      display: block;
+      text-align: start;
+    }
+
+    .section-header {
+      font-size: 2rem;
+      padding: 2rem;
+      font-weight: bold;
+      color: #8a5b44;
+      text-align: center;
+    }
+
     .story-text {
       font-family: 'Noto Nastaliq Urdu', serif;
       font-size: 1.4rem;
       text-align: justify;
       white-space: pre-line;
-      max-width: 850px;
-      padding: 2rem;
-      background: #fff;
-      border-radius: 1rem;
-      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+      padding: 2rem 4rem;
+      background: #ffffff;
+      color: #333;
+      direction: rtl; /* for Urdu text */
     }
 
-    .section-header {
-      font-size: 2rem;
-      margin-bottom: 2rem;
-      font-weight: bold;
-      color: #8a5b44;
+    @media (max-width: 768px) {
+      .story-text {
+        padding: 1.5rem;
+        font-size: 1.2rem;
+      }
     }
   </style>
 </head>
@@ -119,7 +135,7 @@
     </div>
   </section>
 
-  <!-- 💌 Dedication Page (Fully Centered) -->
+  <!-- 💌 Dedication Page -->
   <section id="dedication" class="dedication-section">
     <div class="dedication-box">
       <div class="dedication-title">Dedication</div>
@@ -139,18 +155,16 @@
 
   <!-- 📖 Story Page -->
   <section id="story">
-    <div>
-      <div class="section-header">The Story</div>
-      <div class="story-text" id="storyContent">
-        Loading story...
-      </div>
+    <div class="section-header">The Story</div>
+    <div class="story-text" id="storyContent">
+      Loading story...
     </div>
   </section>
 
-  <!-- Load story.txt via JS -->
+  <!-- Load story.txt -->
   <script>
     fetch("story.txt")
-      .then(res => res.ok ? res.text() : "Unable to load story.")
+      .then(res => res.ok ? res.text() : Promise.reject())
       .then(text => {
         document.getElementById("storyContent").textContent = text;
       })
@@ -160,4 +174,4 @@
   </script>
 
 </body>
-</html>
+</html>