updated word-of-the-day

ANSHIKA-26 · Oct 28, 2024 · ccc52c2 · ccc52c2
1 parent 861ddac
commit ccc52c2
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -1224,21 +1224,20 @@ <h2 class="accordion__question">How can I stay updated with new blog posts?</h2>
         </div>
     </div>
 </section>
+
 <!-- Word of the Day Section -->
-<div id="word-of-the-day" style="border: 2px solid rgb(248, 181, 181); padding: 20px; border-radius: 5px; color: black; width: 90%; text-align: center; font-family: Arial, sans-serif; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-left: 60px; margin-bottom: 60px;">
+<div id="word-of-the-day">
 
-    <h2 style="font-size: 1.5em; display: flex; justify-content: center; align-items: center; color: #242e4c; font-size: xx-large;">
+    <h2>
         Word of the Day
     </h2>
-    <span style="font-size: 1.2em; margin-right: 8px;">📘</span>
-    <hr style="border: none; height: 1px; background-color: #333; margin: 10px auto; width: 80%; ">
-    <p id="word" style="font-weight: bold; font-size: 1.2em; color: #333; margin: 10px 0;">Placeholder Word</p>
-    <p id="definition" style="font-size: 1em; color: #555; margin: 10px 0;">Placeholder Definition</p>
+    <span>📘</span>
+    <hr>
+    <p id="word">Placeholder Word</p>
+    <p id="definition">Placeholder Definition</p>
 </div>
 
 
-
-
 <!-- Newsletter Section -->
 <section id="wordwise-newsletter" class="wordwise-newsletter-section">
   <div class="wordwise-newsletter-container">

diff --git a/style.css b/style.css
@@ -2449,14 +2449,84 @@ h1 {
   border: none;
 }
 
-/* Word of the Day Dark Mode Styles */
-[data-theme="dark"] #word-of-the-day,
-[data-theme="dark"] #word-of-the-day h2,
-[data-theme="dark"] #word-of-the-day #word,
+/* Light mode styles */
+#word-of-the-day {
+  border: 2px solid rgb(248, 181, 181);
+  padding: 20px;
+  border-radius: 5px;
+  color: black;
+  width: 90%;
+  text-align: center;
+  font-family: Arial, sans-serif;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-left: 60px;
+  margin-bottom: 60px;
+}
+
+/* Header style */
+#word-of-the-day h2 {
+  font-size: xx-large;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #242e4c;
+}
+
+/* Icon style */
+#word-of-the-day span {
+  font-size: 1.2em;
+  margin-right: 8px;
+}
+
+/* Divider line */
+#word-of-the-day hr {
+  border: none;
+  height: 1px;
+  background-color: #333;
+  margin: 10px auto;
+  width: 80%;
+}
+
+/* Word style */
+#word-of-the-day #word {
+  font-weight: bold;
+  font-size: 1.2em;
+  color: #333;
+  margin: 10px 0;
+}
+
+/* Definition style */
+#word-of-the-day #definition {
+  font-size: 1em;
+  color: #555;
+  margin: 10px 0;
+}
+
+/* Dark mode styles using [data-theme="dark"] */
+[data-theme="dark"] #word-of-the-day {
+  border: 2px solid #555;
+  color: #ddd;
+  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] #word-of-the-day h2 {
+  color: #ffffff; /* Brighter white for the header */
+}
+
+[data-theme="dark"] #word-of-the-day hr {
+  background-color: #888;
+}
+
+[data-theme="dark"] #word-of-the-day #word {
+  color: #e0e0e0; /* Light white for the word */
+}
+
 [data-theme="dark"] #word-of-the-day #definition {
-    color: black;
+  color: #e0e0e0; /* Slightly dimmer white for the definition */
 }
 
+/* 
+
 
 
 footer .text-lg {
@@ -3654,4 +3724,5 @@ nav1{
   .wordwise-footer-content {
     text-align: center;
   }
-}
+}
+