feat(app): add background images

apps/admin/src/app/app.scss

@@ -1,6 +1,6 @@
 :root {
-  --color-text: darkred;
-  --color-title: chocolate;
-  --color-link: mediumblue;
-  --color-link-highlighted: #E3000F;
+  --color-text: #96271f;
+  --color-title: #781f19;
+  --color-link: #d6ae01;
+  --color-link-highlighted: #96271f;
 } 

apps/demol/src/app/app.json

@@ -2465,12 +2465,11 @@
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "second",
               "value": "2_8_Kinder_am_Strand_in_Turnkleidung"
             },
             {
               "type": "text",
-              "layer": "fore",
               "value": "Damit das alles für 2000 Kinder funktionieren kann, gibt es einen genauen Tagesplan."
             }
           ]
@@ -2481,8 +2480,7 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Wie sieht der Tagesplan aus? Hilf Karl, die einzelnen Tagesereignisse in die richtige Reihenfolge zu bringen.",
-              "layer": "fore"
+              "value": "Wie sieht der Tagesplan aus? Hilf Karl, die einzelnen Tagesereignisse in die richtige Reihenfolge zu bringen."
             },
             {
               "type": "image",
@@ -2497,12 +2495,10 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Um die einzelnen Tagespunkte in die richtige Reihenfolge zu bringen, ziehe sie einfach auf das Plakat. Klicke auf 'Tagesplan anzeigen!', um dir den originalen Tagesablauf anzusehen.",
-              "layer": "fore"
+              "value": "Um die einzelnen Tagespunkte in die richtige Reihenfolge zu bringen, ziehe sie einfach auf das Plakat. Klicke auf 'Tagesplan anzeigen!', um dir den originalen Tagesablauf anzusehen."
             },
             {
               "type": "daily",
-              "layer": "base",
               "value": "Tagesplan"
             }
           ]
@@ -2513,12 +2509,11 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Ein Großteil des Tages besteht darin, dass die Kinder und Jugendlichen ihren eigenen Interessen nachgehen können und an einer der vielfältigen Arbeitsgruppen teilnehmen können. Oft organisieren die Kinder auch eigene Veranstaltungen oder Ausflüge.",
-              "layer": "fore"
+              "value": "Ein Großteil des Tages besteht darin, dass die Kinder und Jugendlichen ihren eigenen Interessen nachgehen können und an einer der vielfältigen Arbeitsgruppen teilnehmen können. Oft organisieren die Kinder auch eigene Veranstaltungen oder Ausflüge."
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "second",
               "value": "02_1455_(16)"
             }
           ]
@@ -2529,12 +2524,11 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Karl kann sich vor lauter Möglichkeiten kaum entscheiden. Am Ende findet er doch etwas, was ihn interessiert.",
-              "layer": "base"
+              "value": "Karl kann sich vor lauter Möglichkeiten kaum entscheiden. Am Ende findet er doch etwas, was ihn interessiert."
             },
             {
               "type": "video",
-              "option": "second",
+              "option": "primary",
               "value": "38_Karl_ErsteHilfe"
             }
           ]
@@ -2545,12 +2539,11 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Karl kann es kaum glauben, dass hier in der Kinderrepublik so viele Kinder und Jugendliche auf einem Haufen versammelt sind.",
-              "layer": "fore"
+              "value": "Karl kann es kaum glauben, dass hier in der Kinderrepublik so viele Kinder und Jugendliche auf einem Haufen versammelt sind."
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "primary",
               "value": "2_8_5"
             }
           ]
@@ -2561,12 +2554,11 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Es bereitet ihr große Freude, jeden Tag neue Kinder kennenzulernen, auch wenn das manchmal so seine Tücken hat.",
-              "layer": "base"
+              "value": "Es bereitet ihm große Freude, jeden Tag neue Kinder kennenzulernen, auch wenn das manchmal so seine Tücken hat."
             },
             {
               "type": "video",
-              "option": "second",
+              "option": "primary",
               "value": "36_Karl_Dialekte"
             }
           ]
@@ -2577,18 +2569,16 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Ausflüge und die Arbeitsgruppen finden meist vor dem Mittagessen statt. Die ruhigeren Nachmittage können die Kinder selbst füllen. Viele verbringen die Zeit dann mit Lesen und Briefeschreiben.",
-              "layer": "fore"
+              "value": "Ausflüge und die Arbeitsgruppen finden meist vor dem Mittagessen statt. Die ruhigeren Nachmittage können die Kinder selbst füllen. Viele verbringen die Zeit dann mit Lesen und Briefeschreiben."
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "second",
               "value": "02_1455_(135)"
             },
             {
               "type": "text",
-              "value": "Es müssen in dieser Zeit aber auch manchmal Gruppenangelegenheiten geklärt werden.",
-              "layer": "base"
+              "value": "Es müssen in dieser Zeit aber auch manchmal Gruppenangelegenheiten geklärt werden."
             }
           ]
         },
@@ -2603,8 +2593,7 @@
             },
             {
               "type": "text",
-              "value": "An manchen Nachmittagen tanzt das ganze Zeltlager, es gibt Zirkusaufführungen oder Theaterinszenierungen der Kinder und Helfer*innen.",
-              "layer": "fore"
+              "value": "An manchen Nachmittagen tanzt das ganze Zeltlager, es gibt Zirkusaufführungen oder Theaterinszenierungen der Kinder und Helfer*innen."
             },
             {
               "type": "video",
@@ -2619,12 +2608,11 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Auch wenn im Zeltlager vieles gut organisiert ist und über fast alles demokratisch entschieden wird, gibt es auch hier Situationen, die niemand beeinflussen kann, denn...",
-              "layer": "fore"
+              "value": "Auch wenn im Zeltlager vieles gut organisiert ist und über fast alles demokratisch entschieden wird, gibt es auch hier Situationen, die niemand beeinflussen kann, denn..."
             },
             {
               "type": "video",
-              "option": "third",
+              "option": "primary",
               "value": "35_Karl_Gewitter"
             }
           ]
@@ -2635,8 +2623,7 @@
           "character": "Karl",
           "content": [{
               "type": "text",
-              "value": "Doch nicht nur nach einem Unwetter gibt es für alle Kinder im Zeltlager viel zu tun. Jede*r muss sich an den verschiedenen Arbeitsdiensten beteiligen. Dazu gehört der Küchendienst, der Wachdienst, die Post, die Lagerzeitung, der Ordnungsdienst, die Lagerbücherei, usw.",
-              "layer": "fore"
+              "value": "Doch nicht nur nach einem Unwetter gibt es für alle Kinder im Zeltlager viel zu tun. Jede*r muss sich an den verschiedenen Arbeitsdiensten beteiligen. Dazu gehört der Küchendienst, der Wachdienst, die Post, die Lagerzeitung, der Ordnungsdienst, die Lagerbücherei, usw."
             },
             {
               "type": "image",
@@ -2655,7 +2642,7 @@
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "second",
               "value": "02_1455_(57)"
             },
             {
@@ -2665,11 +2652,13 @@
             {
               "type": "redirect",
               "value": "annameetskarl",
+              "option": "third",
               "title": "Ja, gern."
             },
             {
               "type": "redirect",
               "value": "annaundausflüge",
+              "option": "third",
               "title": "Nein, ich möchte lieber mit Anna noch ein paar Ausflüge machen."
             }
           ]

apps/demol/src/app/app.scss

@@ -1,8 +1,8 @@
 :root {
-  --color-text: #850101;
-  --color-title: #BF6422;
-  --color-link: #008080;
-  --color-link-highlighted: #E3000F;
+  --color-text: #96271f;
+  --color-title: #781f19;
+  --color-link: #d6ae01;
+  --color-link-highlighted: #96271f;
 }
 
 @font-face {
@@ -61,8 +61,4 @@ body {
   overflow-x: hidden;
   perspective: 1px;
   transform-style: preserve-3d;
-}
-
-p {
-  text-shadow: 2px 2px lightgrey;
 }

libs/home/src/lib/home.tsx

@@ -9,58 +9,55 @@ const home:ChapterProps = {
   {
     "grouped": false,
     "row": false,
+    "background": "2_31_b",
     "content": [
       {
         "type": "text",
-        "value": "Natürlich besteht die Kinderrepublik nicht nur aus Karl, Anna und Gerda. Damit ihr mit den beiden dieses Abenteuer erleben könnt, hat Florian eine Website entworfen, die Gerd umgesetzt hat. Anne hat dafür unter dem Einsatz von Felix‘ Sprecherstimme Trickfilme produziert.",
-        "layer": "fore"
+        "value": "Diese Website erzählt die Geschichte von Anna, Karl und Gerda. Alle drei entstammen der Arbeiterklasse und träumen Ende der 1920er Jahre von einer besseren Zukunft. Begleitet sie auf ihrem Weg in ein Zeltlager der sozialdemokratischen Organisation der 'Reichsarbeitsgemeinschaft der Kinderfreunde'. In dieser so genannten 'Kinderrepublik' erleben sie viele spannende Dinge, und lernen Demokratie durch eigenes Handeln kennen.",
+        "option": "reveal"
       }
     ]
   },
+  {
+    "grouped": true,
+    "row": false,
+    "content": [{
+      "type": "image",
+      "value": "02_1455_(114)",
+      "option": "second"
+    },
+    {
+      "type": "text",
+      "value": "Die Reise zur Kinderrepublik wäre für Anna, Karl und Gerda ohne Anne Mühlich und Gerd Müller nicht möglich gewesen. Im Rahmen des Kulturhackathons 'Coding da Vinci Westfalen-Ruhrgebiet' 2019 entwickelten die beiden diese Scrollytelling-Website, die auf Fotos und Material des Archivs der Arbeiterjugendbewegung basiert. 2020 haben sie im Rahmen eines Stipendiums des Coding da Vinci die Website für die Zwecke des Archivs ergänzt und ausgebaut."
+    }
+  ]
+},
   {
     "grouped": true,
     "row": true,
-    "content": [
-      {
-        "type": "text",
-        "value": "Anne Mühlich",
-        "option": "avatar second"
-      },
-      {
-        "type": "text",
-        "value": "Gerd Müller",
-        "option": "avatar second"
-      },
-      {
+    "content": [{
         "type": "text",
-        "value": "Julia Kothe",
-        "option": "avatar"
+        "value": "Die beiden wurden unterstützt durch das wunderbare Team des Coding da Vinci, die Kolleg*innen des Archivs der Arbeiterjugendbewegung und besonders durch die tatkräftige Mitarbeit der folgenden Personen:"
       },
       {
-        "type": "text",
-        "value": "Lars Tunçay",
-        "option": "avatar"
+        "type": "image",
+        "value": "B41ABEA7-64DA-4D8E-8E1B-F55A38DD6E37",
+        "option": "second"
       },
       {
         "type": "text",
-        "value": "Nina Heinke",
-        "option": "avatar"
-      },
-      {
-        "type": "text",
-        "value": "Felix Werthschulte",
-        "option": "avatar"
-      }
+        "value": "Julia Kothe, Lars Tunçay, Nina Heinke, Felix Werthschulte, Luise & John",
+        "option": "third"
+      }    
     ]
   },
   {
-    "grouped": false,
-    "row": false,
+    "grouped": true,
+    "row": true,
     "content": [{
-        "type": "text",
-        "value": "Unsere Website richtet sich an all jene, die sich spielerisch mit dem Thema „Kinderrepublik“ und partizipativer Jugendarbeit in der ersten Hälfte des 20. Jahrhunderts beschäftigen wollen und erfahren möchten, wie solche Zeltlager als Form früher und praktischer Demokratiebildung funktioniert haben. In Zeiten wie jetzt, wo mehr und mehr Menschen sich von den demokratischen Institutionen abwenden, lohnt es sich, einen Blick zurückzuwerfen und zu schauen, wie Demokratiebildung insbesondere für bildungsfernere Schichten in der Vergangenheit funktioniert hat und inwiefern wir dafür etwas für unsere heutige Zeit lernen können.",
-        "layer": "fore"
-      }
+      "type": "text",
+      "value": "Die Website richtet sich an all jene, die sich spielerisch mit dem Thema „Kinderrepublik“ und partizipativer Jugendarbeit in der ersten Hälfte des 20. Jahrhunderts beschäftigen wollen und erfahren möchten, wie solche Zeltlager als Form früher und praktischer Demokratiebildung funktioniert haben. In Zeiten wie jetzt, wo mehr und mehr Menschen sich von den demokratischen Institutionen abwenden, lohnt es sich, einen Blick zurückzuwerfen und zu schauen, wie Demokratiebildung insbesondere für bildungsfernere Schichten in der Vergangenheit funktioniert hat und inwiefern wir dafür etwas für unsere heutige Zeit lernen können."
+     }
     ]
   },
   {
@@ -69,7 +66,8 @@ const home:ChapterProps = {
     "content": [{
         "type": "redirect",
         "value": "chapter/daheim",
-        "title": "Demokratie erLeben",
+        "option": "big",
+        "title": "Beginne hier das Abenteuer!",
         "layer": "fore"
       }
     ]

libs/ui/src/lib/info/info.scss

@@ -17,7 +17,7 @@
     overflow: hidden;
     z-index: 11;
     background-color: rgba(0,0,0,.7);
-    color: #fff;
+    color: var(--color-link);
     font-size: 1.1rem;
 
     p {
@@ -33,6 +33,6 @@
 }
 
 a {
-  color: #fff;
+  color: var(--color-link);
   text-decoration: none;
 }

libs/ui/src/lib/redirect/redirect.scss

@@ -4,7 +4,7 @@
   transition: all 0.25s linear;
   position: relative;
   //color: var(--color-link-highlighted);
-  font-size: 1.5rem;
+  font-size: 1.7rem;
   cursor: pointer;
 
   &:before {
@@ -24,4 +24,8 @@
   &:hover:before {
     transform: scale(1);
   }
+  &.big {
+    font-weight: bold;
+    font-size: 3.5rem;
+  }
 }