gurix/Zauberwald
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(quick-260329-u1d): add kindgerechte Erklaerung on forest screen

Browse Source 
- Added forest__intro paragraph between title and greeting area in index.html
- Added .forest__intro CSS block with Nunito font, centered, pastel-style styling
This commit is contained in:
gurix
2026-03-29 21:40:07 +02:00
parent ef34d6288e
commit cf21710e2f
2 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+3
View File
@@ -30,6 +30,9 @@
<section id="screen-forest" class="screen"> <section id="screen-forest" class="screen">
<div class="forest"> <div class="forest">
<h1 class="forest__title">Dein Zauberwald</h1> <h1 class="forest__title">Dein Zauberwald</h1>
<p class="forest__intro">
Willkommen in deinem Zauberwald! Waehle eine Stufe und uebe verschiedene Buchstaben auf der Tastatur. Jedes Mal, wenn du eine Uebung schaffst, waechst dein Wald — und ein neues Bild erscheint! Was wohl als Naechstes kommt?
</p>
<div id="forest-greeting" class="companion-area" style="display:none"> <div id="forest-greeting" class="companion-area" style="display:none">
<img id="forest-greeting-avatar" class="companion-area__avatar" src="" alt=""> <img id="forest-greeting-avatar" class="companion-area__avatar" src="" alt="">
<p id="forest-greeting-text" class="companion-area__text"></p> <p id="forest-greeting-text" class="companion-area__text"></p>
src/styles/main.css
+11
View File
@@ -187,6 +187,17 @@ h3 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.forest__intro {
font-family: "Nunito", sans-serif;
font-size: 1.1rem;
color: var(--text-dark);
text-align: center;
max-width: 480px;
line-height: 1.6;
margin: 0 auto 1.5rem;
opacity: 0.85;
}
.forest__level-map { .forest__level-map {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);