Team Page (#170)

* add more people and sections to team page

* move links into place

* lol typo

* cleanup copy

* initial styling and hard-coded images for team component

* copy update

contents/copy/team/main.md

@@ -1,23 +1,18 @@
 ---
 title: Team
 introText: >
-  Meet the people behind CSSconf EU
+  CSSconf EU is made possible by the work of many volunteers who spend a lot of time and love preparing a fantastic day for you.
 introImage: team.jpg
 ---
 
-CSSconf EU is made possible by the work of the many volunteers who spend a lot of time and love preparing a fantastic day for you.
 
-## The Organizers
+### Organizer Alumni
 
-Kristina Schneider [@kriesse](https://twitter.com/kriesse)
+Michael P. Pfeiffer [@m_p_pfeiffer](https://twitter.com/m_p_pfeiffer) 2013 – 2015
 
-Polly Hristova [@rtrospekt](https://twitter.com/rtrospekt)
+Kevin Lorenz [@verpixelt](https://twitter.com/verpixelt) 2015 – 2107
 
-## The Volunteer Team
-
-Felicitas Kugland [@kotzendekrabbe](https://twitter.com/kotzendekrabbe)
-
-Simone Haas [@haas_simone](https://twitter.com/haas_simone)
+## Core Team
 
 Łukasz Klis [@lukaszklis](https://twitter.com/lukaszklis)
 
@@ -31,10 +26,45 @@ Nicolas Zimmel [@toomanyclouds](https://twitter.com/toomanyclouds)
 
 Sean Fridman [@sfrdmn](https://twitter.com/sfrdmn)
 
-Michael P. Pfeiffer [@m_p_pfeiffer](https://twitter.com/m_p_pfeiffer)
-
 Olivia Hugger [@dog_awoo](https://twitter.com/dog_awoo)
 
+### The JSConf EU Family
+
+Holger Blank [@hblank](https://twitter.com/hblank)
+
+Jan Lehnardt [@janl](https://twitter.com/janl)
+
+Malte Ubl [@cramforce](https://twitter.com/cramforce)
+
+Simone Haas [@haas_simone](https://twitter.com/haas_simone)
+
+Felicitas Kugland [@kotzendekrabbe](https://twitter.com/kotzendekrabbe)
+
+Megan Christian
+
+### The Community Lounge Team
+
 Michele Guido [@sheley](https://twitter.com/sheley)
 
 Vanessa Yuen [@vanessayuenn](https://twitter.com/vanessayuenn)
+
+
+## The Alumni
+
+Since 2013, many volunteers have contributed to making CSSconf EU happen. Thanks and love to all of you, in no particular order: Lena Reinhard, Jed Schmidt, Robin Mehner, Kida Mehner, Minja Töniges, Robert Fleischmann, Philip von Bargen, Karl Westin, Katharina Jockenhöfer, Alex Feyerke, Max Fellmuth, Helge Grimm, Anne Wizorek, Jana Ahrens, Ola Gasidlo, Katrin Kampfrath, Lourdes Montano.
+
+## The CSSconf Family
+
+Our international [CSSconf family](http://cssconf.org/) has been supportive with advice, hands-on help and friendship. Special thanks to Nicole Sullivan, CSSconf AU, Thomas Gorissen, CSSconf Nordic, CSSconf Budapest for ongoing support and friendship!
+
+## Staff
+
+Many of our behind-the-scene staff has been working with us for years, and won’t stop to amaze us with their fantastic work, ideas, and stress resistance. Thanks for all your hard work and creative contributions to the conference!
+
+[Artribute](http://artribute.de/) – Event Planning, Venue, Catering, EVERYTHING!
+
+[Marina Ostrowski](http://www.marinaos.com) – Venue Concept
+
+[WECAP](https://wecap.de/) – Video Recording
+
+[keep on](http://wearekeepon.com/) – Moodfilm

contents/css/_components.team.css

@@ -0,0 +1,98 @@
+.c-team {
+
+  @media(--m) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__person {
+    position: relative;
+
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 3rem;
+
+    @media(--s) {
+      flex-basis: 50%;
+    }
+
+    @media(--l) {
+      flex-basis: 45%;
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -1rem;
+      width: 3rem;
+      height: 3rem;
+      background-color: var(--c-big-pink);
+      z-index: -1;
+
+      @media(--m) {
+        width: 8rem;
+        height: calc(100% + 2rem);
+      }
+    }
+  }
+
+  &__avatar {
+    margin-left: 1rem;
+    width: 4.5rem;
+    height: 4.5rem;
+
+    @media(--s) {
+      width: 6rem;
+      height: 6rem;
+    }
+
+    @media(--m) {
+      width: 10rem;
+      height: 10rem;
+    }
+
+    @media(--l) {
+      width: 12rem;
+      height: 12rem;
+    }
+  }
+
+  &__caption {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  &__name {
+    font-size: 1.3125rem;
+    line-height: 1.142857143;
+
+    @media(--s) {
+      font-size: 1.75rem; /* 28 */
+      line-height: 1.285714286; /* 36 */
+    }
+  }
+
+  &__description,
+  &__link {
+    font-size: 1.125rem;
+    line-height: 1.4;
+
+    @media(--s) {
+      font-size: 1.3125rem;
+      line-height: 1.52;
+    }
+  }
+
+  &__name,
+  &__description {
+    color: var(--c-black);
+  }
+
+  &__name,
+  &__description,
+  &__link {
+    margin-bottom: 0;
+  }
+}

contents/css/main.css

@@ -36,6 +36,7 @@
 @import "_components.speaker-talk.css";
 @import "_components.sponsors.css";
 @import "_components.stage.css";
+@import "_components.team.css";
 @import "_components.paragraph-indent.css";
 @import "_components.speaker.css";
 /* Utilities */

templates/pages/team.html.njk

@@ -13,6 +13,35 @@
     )
   }}
 
+
+  <div class="l-container">
+    <h2 id="organizers">Organizers</h2>
+    <div class="c-team">
+      <div class="c-team__person">
+        <img class="c-team__avatar"
+             {# src="{{ speakerImage }}" #}
+             src="https://pbs.twimg.com/profile_images/996664608034344965/aQlow1-K_400x400.jpg"
+             alt="Photo of {{ team.name }}">
+        <div class="c-team__caption">
+          <h4 class="c-team__name">Kristina Schneider</h4>
+          <p class="c-team__description">Organizer since 2013</p>
+          <a class="c-team__link" href="https://twitter.com/kriesse" target="_blank">@kriesse</a>
+        </div>
+      </div>
+      <div class="c-team__person">
+        <img class="c-team__avatar"
+             {# src="{{ speakerImage }}" #}
+             src="https://pbs.twimg.com/profile_images/655557066183069696/rekvmVi8_400x400.jpg"
+             alt="Photo of {{ team.name }}">
+        <div class="c-team__caption">
+          <h4 class="c-team__name">Polly Hristova</h4>
+          <p class="c-team__description">Organizer since 2017</p>
+          <a class="c-team__link" href="https://twitter.com/rtrospekt" target="_blank">@rtrospekt</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="l-container">
     <main>
       <div class="markdown--indented-paragraphs">