feat(text): adjust home chapter with avatar icons

gerdesque · Jun 26, 2020 · de8768c · de8768c
1 parent 240ab16
commit de8768c
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 3 deletions.
diff --git a/libs/home/src/lib/home.tsx b/libs/home/src/lib/home.tsx
@@ -7,14 +7,56 @@ const home:ChapterProps = {
   link: "home",
   groups: [
   {
-    "grouped": true,
+    "grouped": false,
     "row": false,
     "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"
+      }
+    ]
+  },
+  {
+    "grouped": true,
+    "row": true,
+    "content": [
+      {
+        "type": "text",
+        "value": "Anne Mühlich",
+        "layer": "avatar second"
+      },
+      {
+        "type": "text",
+        "value": "Gerd Müller",
+        "layer": "avatar second"
+      },
+      {
+        "type": "text",
+        "value": "Julia Kothe",
+        "layer": "avatar"
       },
+      {
+        "type": "text",
+        "value": "Lars Tunçay",
+        "layer": "avatar"
+      },
+      {
+        "type": "text",
+        "value": "Nina Heinke",
+        "layer": "avatar"
+      },
+      {
+        "type": "text",
+        "value": "Felix Werthschulte",
+        "layer": "avatar"
+      }
+    ]
+  },
+  {
+    "grouped": false,
+    "row": false,
+    "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.",

diff --git a/libs/ui/src/lib/text/text.scss b/libs/ui/src/lib/text/text.scss
@@ -1,6 +1,32 @@
 .box {
   width: 80%;
 
+  &.avatar {
+    flex: 1 25%;
+    padding: 5px;
+
+    &:hover p {
+      background-color: var(--color-title);
+    }
+
+    &.second {
+      flex: 1 50%;
+    }
+
+    p {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      border-radius: 50%;
+      height: 200px;
+      margin: 8px;
+      color: #ffffff;
+      background-color: #673ab7;
+      text-shadow: none;
+      justify-content: center;
+    }
+  }
+
   p {
     text-shadow: 2px 2px lightgrey;
   }

diff --git a/libs/ui/src/lib/text/text.tsx b/libs/ui/src/lib/text/text.tsx
@@ -5,7 +5,8 @@ import './text.scss';
 
 export interface TextProps {
   value: string,
-  title: string
+  title: string,
+  layer: string
 }
 
 export const Text = (props: TextProps) => {
@@ -24,7 +25,7 @@ export const Text = (props: TextProps) => {
     );
   }
   return (
-    <div className='box'>
+    <div className={`box ${props.layer}`}>
       <Fade bottom duration={5000}>
         <p>{props.value}</p>
       </Fade>