feat(image): scale all webp images

apps/demol/src/app/app.json

@@ -1877,12 +1877,12 @@
             {
               "type": "summary",
               "value": "Irmas Bericht",
-              "title": "08.08. Um 7.00 Uhr erscholl der Weckruf. Darauf klopften wir unsere Decken aus. Als wir damit fertig waren, wurde zur Gymnastik geblasen. Kurz darauf gingen wir zum Waschen. Nach dem Waschen frühstückten wir. Danach setzten wir unser Zelt instand. Zwischen 12.00 und 13.00 Uhr war Falkenvollversammlung. Der neue Lagerleiter hatte verschiedene Themen zu verhandeln, z.B.: der Besuchstag. Wir hatten nämlich Kindertag, da hatten die Helfer nichts zu sagen. Die mussten nachher auf Wanderung. Um 13.30 Uhr bekamen wir Mittagessen. Es gab nämlich Salzkartoffeln mit Rollmops. Nach dem Essen hatten wir Freizeit. Um 15.30 Uhr gab es Vesper. Nach der Vesper war Zirkus. Um 19.00 Uhr wurde zum Abendbrot geblasen. Darauf war Volkstanz. Auf einmal war auf der Straße ein Krach losgegangen. Es kamen nämlich Helfer von der Wanderung zurück. Die sollten nicht vor 12.00 Uhr ins Lager. Hermann Neddermeyer blies Lagerruhe, aber es wurde dagegen protestiert. Hermann erzählte von der Flucht aus England. Bald war Zeltruhe. Kaum lagen wir im Zelte, so wurde Helferalarm geblasen. Freundschaft. Irma"
+              "title": "08.08.\nUm 7.00 Uhr erscholl der Weckruf. Darauf klopften wir unsere Decken aus. Als wir damit fertig waren, wurde zur Gymnastik geblasen. Kurz darauf gingen wir zum Waschen. Nach dem Waschen frühstückten wir. Danach setzten wir unser Zelt instand. Zwischen 12.00 und 13.00 Uhr war Falkenvollversammlung. Der neue Lagerleiter hatte verschiedene Themen zu verhandeln, z.B.: der Besuchstag. Wir hatten nämlich Kindertag, da hatten die Helfer nichts zu sagen. Die mussten nachher auf Wanderung. Um 13.30 Uhr bekamen wir Mittagessen. Es gab nämlich Salzkartoffeln mit Rollmops. Nach dem Essen hatten wir Freizeit. Um 15.30 Uhr gab es Vesper. Nach der Vesper war Zirkus. Um 19.00 Uhr wurde zum Abendbrot geblasen. Darauf war Volkstanz. Auf einmal war auf der Straße ein Krach losgegangen. Es kamen nämlich Helfer von der Wanderung zurück. Die sollten nicht vor 12.00 Uhr ins Lager. Hermann Neddermeyer blies Lagerruhe, aber es wurde dagegen protestiert. Hermann erzählte von der Flucht aus England. Bald war Zeltruhe. Kaum lagen wir im Zelte, so wurde Helferalarm geblasen.\nFreundschaft.\nIrma"
             },
             {
               "type": "summary",
               "value": "Georgs Bericht",
-              "title": "01.08. Wir wurden heute morgen durch das Spielen des Radios geweckt. Gleich darauf kam Ernst, unser Bürgermeister und brachte die Parole. Nach einer Weile standen wir auf, denn es hatte zum Aufstehen geblasen. Schnell schüttelten wir unsere Decken aus. Dann gingen wir zum Waschen. Nach dem Kaffeetrinken bleiben wir wieder im Zelt, denn es regnete. Heinz sagte uns, dass wir unsere Affen packen sollten, denn es könnte sein, dass wir heute noch ins Notquartier ziehen würden. Unser Lagerpräsident ist schon in die Stadt gegangen und fragt nach, ob wir einige Schulen für das Notquartier bekommen könnten. So packten wir den Vormittag unsere Taschen, um zum Abmarsch bereit zu sein.Bald gab es auch Mittagessen. Das Wetter wurde jetzt schon besser. Am Abend war noch eine Helfersitzung. Dort wurde nun alles besprochen. Es kam nun heraus, dass wir heute nicht mehr wegzogen. Wenn es aber regnet, wollten wir ins Notquartier ziehen. Am Abend spielten wir noch im Kreis. Nach der Lagerruhe schliefen wir bald ein. Freundschaft. Georg"
+              "title": "01.08.\nWir wurden heute morgen durch das Spielen des Radios geweckt. Gleich darauf kam Ernst, unser Bürgermeister und brachte die Parole. Nach einer Weile standen wir auf, denn es hatte zum Aufstehen geblasen. Schnell schüttelten wir unsere Decken aus. Dann gingen wir zum Waschen. Nach dem Kaffeetrinken bleiben wir wieder im Zelt, denn es regnete. Heinz sagte uns, dass wir unsere Affen packen sollten, denn es könnte sein, dass wir heute noch ins Notquartier ziehen würden. Unser Lagerpräsident ist schon in die Stadt gegangen und fragt nach, ob wir einige Schulen für das Notquartier bekommen könnten. So packten wir den Vormittag unsere Taschen, um zum Abmarsch bereit zu sein.Bald gab es auch Mittagessen. Das Wetter wurde jetzt schon besser. Am Abend war noch eine Helfersitzung. Dort wurde nun alles besprochen. Es kam nun heraus, dass wir heute nicht mehr wegzogen. Wenn es aber regnet, wollten wir ins Notquartier ziehen. Am Abend spielten wir noch im Kreis. Nach der Lagerruhe schliefen wir bald ein.\nFreundschaft.\nGeorg"
             },
             {
               "type": "image",
@@ -1895,6 +1895,7 @@
           "grouped": true,
           "row": false,
           "character": "Lagerfotograf",
+          "background": "02_45_(21)",
           "content": [{
               "type": "image",
               "option": "third",
@@ -1903,31 +1904,24 @@
             {
               "type": "summary",
               "value": "Lottes Bericht",
-              "title": "23.07. Um 7.00 Uhr erschallte das Signal zum Aufstehen. Wir standen gleich auf und klopften unsere Decken aus. Dann ging es gleich zur Gymnastik. Frieda leitete heute die Gymnastik. Wir machten uns gleich zum Waschen bereit, weil wir heute die Ersten waren. Nach dem Frühstück konnten wir spielen. Um 10.30 Uhr übten wir mit Willi einen Bewegungschor ein. Dann aßen wir zu Mittag. Es gab Pellkartoffeln, Senfsoße und zwei Eier. Nach dem Mittagessen wollten wir wandern, aber wir mussten erst abstimmen, weil einige nicht mitwollten. Schließlich gingen wir doch los. Wir gingen bis zum Aussichtsturm und pflückten Heidelbeeren. Als es anfing zu regnen, gingen wir zum Lager zurück. Wir kamen spät an. Um 21.00 Uhr war Lagerruhe. Freundschaft. Lotte"
-            },
-            {
-              "type": "image",
-              "value": "02_45_(21)"
+              "title": "23.07.\nUm 7.00 Uhr erschallte das Signal zum Aufstehen. Wir standen gleich auf und klopften unsere Decken aus. Dann ging es gleich zur Gymnastik. Frieda leitete heute die Gymnastik. Wir machten uns gleich zum Waschen bereit, weil wir heute die Ersten waren. Nach dem Frühstück konnten wir spielen. Um 10.30 Uhr übten wir mit Willi einen Bewegungschor ein. Dann aßen wir zu Mittag. Es gab Pellkartoffeln, Senfsoße und zwei Eier. Nach dem Mittagessen wollten wir wandern, aber wir mussten erst abstimmen, weil einige nicht mitwollten. Schließlich gingen wir doch los. Wir gingen bis zum Aussichtsturm und pflückten Heidelbeeren. Als es anfing zu regnen, gingen wir zum Lager zurück. Wir kamen spät an. Um 21.00 Uhr war Lagerruhe.\nFreundschaft.\nLotte"
             },
             {
               "type": "redirect",
               "value": "weitermitanna",
               "avatar": "Anna",
-              "option": "third",
               "title": "Ich möchte (weiterhin) mit Anna die Kinderrepublik entdecken."
             },
             {
               "type": "redirect",
               "value": "weitermitkarl",
               "avatar": "Karl",
-              "option": "third",
               "title": "Ich möchte (weiter) schauen, was Karl erlebt."
             },
             {
               "type": "redirect",
               "value": "ankunft",
               "avatar": "Gerda",
-              "option": "third",
               "title": "Ich möchte wissen, ob Gerda auch schon im Zeltlager angekommen ist."
             }
           ]
@@ -1969,13 +1963,15 @@
             {
               "type": "text",
               "value": "Für die Helfer*innen bietet der Lagerarzt regelmäßig Bildungsabende zum Thema Hygiene an. Dieses Wissen ist wichtig, damit Krankheiten im Zeltlager keine Chance haben."
-            },
-            {
-              "type": "image",
-              "option": "third",
-              "value": "2_30_3"
-            },
-            {
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "row": false,
+          "character": "Lagerarzt",
+          "background": "2_30_3",
+          "content": [{
               "type": "text",
               "value": "2 mal pro Woche leitet der Lagerarzt außerdem einen Erste-Hilfe-Kurs für die interessierten Kinder. Auch Karl nimmt an einer solchen Arbeitsgruppe teil."
             },
@@ -2021,21 +2017,19 @@
           ]
         },
         {
-          "grouped": true,
+          "grouped": false,
           "row": false,
           "character": "Genossen",
           "content": [{
               "type": "text",
+              "layer": "fore",
               "value": "Ein großer Gutshof liefert der Kinderrepublik Hammelfleisch."
             },
             {
               "type": "image",
               "option": "third",
+              "layer": "base",
               "value": "02_1455_(2)"
-            },
-            {
-              "type": "text",
-              "value": "Ohne die vielen wohlgesonnenen Bürger*innen im Umland könnte das Zeltlager nicht stattfinden. Und Lebensmittel für so viele Kinder in einem Laden zu kaufen wäre einerseits unmöglich und andererseits auch viel zu teuer."
             }
           ]
         },
@@ -2044,11 +2038,21 @@
           "row": false,
           "character": "Genossen",
           "content": [{
-              "type": "image",
-              "option": "third",
-              "value": "02_1455_(121)"
+              "type": "text",
+              "value": "Ohne die vielen wohlgesonnenen Bürger*innen im Umland könnte das Zeltlager nicht stattfinden. Und Lebensmittel für so viele Kinder in einem Laden zu kaufen wäre einerseits unmöglich und andererseits auch viel zu teuer."
             },
             {
+              "type": "image",
+              "option": "primary",
+              "value": "02_1455_(121)"
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "row": false,
+          "character": "Genossen",
+          "content": [{
               "type": "text",
               "value": "Und wie schmeckt Anna und Karl das Essen in der Kinderrepublik?"
             },
@@ -2147,10 +2151,16 @@
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "second",
               "value": "2_31_z"
-            },
-            {
+            }
+          ]
+        },
+        {
+          "grouped": true,
+          "row": false,
+          "character": "Hitlerjugend",
+          "content": [{
               "type": "text",
               "value": "Seit 1926 gab es mit der Hitlerjugend bereits eine Jugendorganisation der NSDAP, die für Kinder ähnlich attraktiv wirkte, wie die sozialistischen und sozialdemokratischen Verbände."
             },
@@ -2162,22 +2172,19 @@
             {
               "type": "redirect",
               "value": "weitermitanna",
-              "option": "second",
               "avatar": "Anna",
               "title": "Ich möchte (weiterhin) mit Anna die Kinderrepublik entdecken."
             },
             {
               "type": "redirect",
               "value": "weitermitkarl",
               "avatar": "Karl",
-              "option": "third",
               "title": "Ich möchte (weiter) schauen, was Karl erlebt."
             },
             {
               "type": "redirect",
               "value": "ankunft",
               "avatar": "Gerda",
-              "option": "third",
               "title": "Ich möchte wissen, ob Gerda auch schon im Zeltlager angekommen ist."
             }
           ]
@@ -2209,16 +2216,18 @@
           ]
         },
         {
-          "grouped": true,
+          "grouped": false,
           "row": false,
           "character": "Anna",
           "content": [{
               "type": "text",
+              "layer": "fore",
               "value": "Wie sieht der Tagesplan aus? Hilf Anna, die einzelnen Tagesereignisse in die richtige Reihenfolge zu bringen."
             },
             {
               "type": "image",
-              "option": "third",
+              "option": "third bg",
+              "layer": "base",
               "value": "2_30_1"
             }
           ]
@@ -2255,6 +2264,7 @@
         {
           "grouped": true,
           "row": false,
+          "background": "02_12_(5)",
           "character": "Anna",
           "content": [{
               "type": "text",
@@ -2268,11 +2278,6 @@
             {
               "type": "text",
               "value": "Am Nachmittag haben die Helfer*innen eine Filmvorführung für die jungen Republikaner*inne in einem nahen Kino organisiert. In 2 Schichten schauen alle Kinder einen Stummfilm von Buster Keaton. Dafür braucht es keine Worte, denn diesen Humor verstehen alle."
-            },
-            {
-              "type": "image",
-              "option": "third",
-              "value": "02_12_(5)"
             }
           ]
         },
@@ -2334,6 +2339,7 @@
             },
             {
               "type": "text",
+              "option": "third",
               "value": "Abends gibt es manchmal Kulturveranstaltungen und gemeinsames Singen."
             }
           ]
@@ -2342,18 +2348,14 @@
           "grouped": true,
           "row": false,
           "character": "Anna",
+          "background": "02_1455_(36)",
           "content": [{
-              "type": "image",
-              "option": "third",
-              "value": "02_1455_(36)"
-            },
-            {
               "type": "text",
               "value": "Fast alle Angelegenheiten werden demokratisch entschieden. Dennoch gibt es manchmal Situationen, in denen dies nichts nützt, denn..."
             },
             {
               "type": "video",
-              "option": "second",
+              "option": "primary",
               "value": "29_Anna_Gewitter"
             }
           ]
@@ -2373,6 +2375,7 @@
             },
             {
               "type": "text",
+              "option": "third",
               "value": "Die Zelte müssen wieder aufgebaut werden, Löcher gestopft werden, abgebrochene Äste und Zweige müssen eingesammelt werden und über den matschigen Feldboden wird ein Holzweg gebaut."
             },
             {
@@ -2413,37 +2416,33 @@
             {
               "type": "text",
               "value": "Dazu gehört der Küchendienst, der Wachdienst, die Post, die Lagerzeitung, der Ordnungsdienst, die Lagerbücherei, usw."
-            },
-            {
-              "type": "video",
-              "option": "primary",
-              "value": "20_Anna_Lagerbücherei"
             }
           ]
         },
         {
           "grouped": true,
           "row": false,
           "character": "Anna",
+          "background": "02_1455_(106)",
           "content": [{
-              "type": "text",
-              "value": "Willst du wissen, wie Anna und Karl sich kennenlernen und was sie gemeinsam erleben?"
+              "type": "video",
+              "option": "primary",
+              "value": "20_Anna_Lagerbücherei"
             },
             {
-              "type": "image",
-              "option": "primary",
-              "value": "02_1455_(106)"
+              "type": "text",
+              "value": "Willst du wissen, wie Anna und Karl sich kennenlernen und was sie gemeinsam erleben?"
             },
             {
               "type": "redirect",
               "value": "annameetskarl",
-              "option": "second",
+              "option": "third",
               "title": "Ja, gern."
             },
             {
               "type": "redirect",
               "value": "annaundausflüge",
-              "option": "second",
+              "option": "third",
               "title": "Nein, ich möchte lieber mit Anna noch ein paar Ausflüge machen."
             }
           ]

libs/ui/src/lib/daily/daily.tsx

@@ -46,7 +46,7 @@ export const Daily = (props: DailyProps) => {
     return (
       <>
         <Box targetKey="box"/>
-        <button type='button' className='link-button show' onClick={() => handleClick()}>Tagesplan anzeigen!</button>
+        <p className="redirect" onClick={() => handleClick()}>Tagesplan anzeigen!</p>
       </>
     )
   }

libs/ui/src/lib/summary/summary.scss

@@ -1,9 +1,14 @@
-details {
+.summary {
   width: 60%;
   font-size: 1.5rem;
   padding: 0 50px;
-}
+  text-align: center;
 
-summary:focus {
-	outline-style: none;
+  summary:focus {
+	  outline-style: none;
+  }
+
+  p {
+    text-align: left;
+  }
 }

libs/ui/src/lib/summary/summary.tsx

@@ -11,9 +11,12 @@ export interface SummaryProps {
 
 export const Summary = (props: SummaryProps) => {
   return (
-    <details>
+    <details className="summary">
       <summary>{props.value}</summary>
-      <p>{props.title}</p>
+      {props.title.split(/\n/g).map((text, index) =>
+          <p key={index}>{text}</p>
+        )}
+
     </details>
   );
 };