Create person templates

assets/main.scss

@@ -142,6 +142,41 @@ body {
     }    
 }
 
+.person-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.person {
+    width: calc(50% - 10px);
+    height: 80px;
+    // margin: 10px 25px 10px 0;
+    display: flex;
+    
+    > .image {
+        flex: 60px 0 0;
+    }
+    > .content {
+        flex: 1px 1 0;
+        margin-left: 10px;
+    }
+    > .content-vorstand {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+
+        > .role {
+            font-weight: bold;
+        }
+        > .name {
+            img {
+                margin: 0 10px 0 0;
+            }
+        }
+    }
+}
+
 @font-face{
     font-family: 'Open Sans Condensed';
     font-style: normal;

content/page/club/vorstand/_index.md

@@ -10,3 +10,8 @@ menu:
 
 Ein jeder Club benötigt einen Vorstand, der die Vereinsführung übernimmt und der als Ansprechpartner zu erreichen ist.
 
+{{< tsc/person-list >}}
+    {{< tsc/vorstand name="Anja" role="Abteilungsleiter" img="foo" mail="foo" >}}
+    {{< tsc/vorstand name="Frank" img="foo2" role="abc" >}}
+    {{< tsc/vorstand name="Frank" img="foo2" role="abc" >}}
+{{< /tsc/person-list >}}

themes/tsc_vfl/layouts/partials/tsc/end-person.html

@@ -0,0 +1 @@
+</div>

themes/tsc_vfl/layouts/partials/tsc/start-person.html

@@ -0,0 +1,8 @@
+<div class="person">
+    <div class="image">
+        {{- $person := . -}}
+        {{- with .Get "img" -}}
+            <img src="{{ . }}" {{ with $person.Get "name" }}alt="Bild {{ . }}"{{ end }}>
+        {{- end -}}
+    </div>
+    

themes/tsc_vfl/layouts/shortcodes/tsc/person-list.html

@@ -0,0 +1,3 @@
+<div class="person-list">
+    {{- .Inner -}}
+</div>

themes/tsc_vfl/layouts/shortcodes/tsc/vorstand.html

@@ -0,0 +1,11 @@
+{{ partial "tsc/start-person" . }}
+<div class="content content-vorstand">
+    <div class="role">{{ .Get "role" }}</div>
+    <div class="name">
+        {{ with .Get "mail" }}
+            <a href="mailto:{{ . }}"><img src="/img/mail.jpg" class="mail-icon"></a>
+        {{ end }}
+        {{ .Get "name" }}
+    </div>
+</div>
+{{ partial "tsc/end-person" . }}