docs: stories readme and example.

fezcode · fezcode · commit bb97a2443018 · 2025-11-14T01:35:32.000+03:00
diff --git a/public/stories/MarkdownExample.md b/public/stories/MarkdownExample.md
@@ -0,0 +1,51 @@
+# A Markdown Test
+
+Dragons have been a staple of fantasy literature and mythology for centuries. From their majestic wings to their fearsome breath, dragons come in various forms across different cultures and stories.
+
+---
+
+## **Interesting Facts About Dragons**
+
+1. **Origins**: In mythology, dragons are often linked to the creation of natural landscapes (e.g., mountains, rivers).
+2. **Dragon Lore**: In *Dungeons & Dragons*, dragons have different alignments based on their color, such as lawful good for metallic dragons and chaotic evil for chromatic dragons.
+3. **Shape-Shifting**: Some cultures, like in *The NeverEnding Story*, feature dragons that can change their form or size.
+4. **Guardians of Treasure**: In many stories, dragons hoard treasures, often seen as symbols of greed or protection.
+
+---
+
+## **Dragon Myths Across Cultures**
+
+- **Greek Mythology**: Dragons were often depicted as guardians of ancient knowledge or treasures, such as the Lernaean Hydra.
+- **Chinese Mythology**: The Lung dragons symbolize strength, wisdom, and good fortune, often associated with water and rain.
+- **Viking Mythology**: Dragons like Fafnir were seen as tragic figures, representing greed and destruction.
+- **Arthurian Legends**: Dragons, such as the one slain by St. George, symbolize the battle between good and evil.
+
+---
+
+### **Fun Fact:**
+
+> "Did you know that in some stories, dragons are depicted as protectors rather than villains, especially in Eastern traditions like those of Japan and China?"
+
+---
+
+## **Dragon-Related Media**
+
+1. **Books**:
+  - *The Hobbit* by J.R.R. Tolkien
+  - *A Song of Ice and Fire* by George R.R. Martin
+2. **Movies**:
+  - *How to Train Your Dragon* (2010)
+  - *Reign of Fire* (2002)
+3. **Games**:
+  - *The Elder Scrolls V: Skyrim*
+  - *Dungeons & Dragons* (Tabletop RPG)
+
+---
+
+### **Conclusion**
+
+Dragons are more than just mythical creatures; they represent complex themes such as power, wisdom, and the balance between good and evil. Whether they are guarding treasure, controlling the elements, or shaping the fate of kingdoms, dragons will always hold a special place in fantasy lore.
+
+---
+
+#### *Which dragon type would you choose to tame?*
diff --git a/public/stories/README.md b/public/stories/README.md
@@ -25,6 +25,10 @@ Every file should end with `.txt` format however you can write `markdown` in it
 
 **Important**: Tables are not supported.
 
+[A Markdown Example](./MarkdownExample.md) is added for to show you which elements are supported.
+
+When you don't have to show underline in a `h2` (`##`), use `h3` (`###`) header instead. Do not go under h3. (i.e. do not use h4 and below)
+
 ## Book and Author Structure (books.piml)
 
 The `books.piml` file is a PIML document that, when parsed, results in an object containing `authors` and `books` arrays.
diff --git a/src/styles/dnd.css b/src/styles/dnd.css
@@ -110,7 +110,7 @@
 .dnd-content-box blockquote {
   font-style: italic;
   padding: 1.5rem 0.1rem 0.5rem 0; /* top, right, bottom, left */
-  margin: 2rem 1rem;
+  margin: 2rem 2rem;
   border: 1px solid #E8E0B0; /* Border matching text color */
   color: #E8E0B0; /* Match paragraph color */
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Match paragraph text shadow */
@@ -214,15 +214,36 @@
 }
 
 .dnd-content-box h2 {
+
   color: #FFFACD;
+
   margin-bottom: 1.5rem;
+
   font-size: 1.8rem;
+
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+
   text-decoration: underline;
 
 }
 
 
+
+.dnd-content-box h3 {
+
+  color: #D4C08C; /* Darker, muted gold/yellow */
+
+  margin-bottom: 1.2rem;
+
+  font-size: 1.6rem; /* Slightly smaller than h2 */
+
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
+
+  /* No text-decoration to differentiate from h2 */
+
+}
+
+
 /* I will add more styles for the navbar and other components later */
 
 .dnd-navbar {
