From 51150d381b2b3941eb05dd75d55036f6d87de70e Mon Sep 17 00:00:00 2001
From: Horacio Gonzalez <horacio.gonzalez@gmail.com>
Date: Tue, 2 Feb 2021 00:32:30 +0100
Subject: [PATCH] Updating team members pages

---
 layouts/_default/single.html  |  2 +-
 layouts/partials/team.html    | 10 ++--
 layouts/shortcodes/teams.html | 16 ++----
 layouts/team/single.html      | 59 +++++++++++++++++++--
 src/style/pages/_team.scss    | 96 +++++++++++++++++++++++++++++++++++
 static/theme.css              | 60 ++++++++++++++++++++++
 6 files changed, 224 insertions(+), 19 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d45b2f1..9f44cd7 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<div class="hero">
+<div class="hero"> 
 	<h1>{{ .Title }}</h1>
 	<div class="description">
 		{{ .TableOfContents }}
diff --git a/layouts/partials/team.html b/layouts/partials/team.html
index ef781f4..a5850d6 100644
--- a/layouts/partials/team.html
+++ b/layouts/partials/team.html
@@ -1,7 +1,11 @@
-<div class="photo" role="presentation" style="background-image: url('{{ .Params.photoURL }}');"></div>
+<a href="{{ .URL }}">
+	<div class="photo" role="presentation" style="background-image: url('{{ .Params.photoURL }}');"></div>
+</a>
 <div class="label">
-	<h3>{{ .Title }}</h3>
-	<h4>{{ .Params.subtitle }}</h4>
+	<a href="{{ .URL }}">
+		<h3>{{ .Title }}</h3>
+		<h4>{{ .Params.subtitle }}</h4>
+	</a>
 	<ul class="socials">
 		{{ range .Params.socials }}
 		<li>
diff --git a/layouts/shortcodes/teams.html b/layouts/shortcodes/teams.html
index b4bd275..e426654 100644
--- a/layouts/shortcodes/teams.html
+++ b/layouts/shortcodes/teams.html
@@ -1,17 +1,11 @@
 {{ $_hugo_config := `{ "version": 1 }` }}
-{{ $site := .Site }}
-{{ range (split (.Get "types") ",") }}
+{{ $team := where .Site.AllPages ".Section" "team" }}
 <section class="members">
-	{{ $typeLabel := (split . "=") }}
-	{{ $type := (index $typeLabel 0) }}
-	{{ $label := (index $typeLabel 1) }}
-
-	<h2>{{ $label }}</h2>
-
 	<ul class="members shuffle">
-		{{ range where $site.AllPages "Params.type" $type }}
-		<li>{{ partial "team.html" . }}</li>
+		{{ range $team }}
+			{{ if isset .Params "key" }}
+			<li>{{ partial "team.html" . }}</li>
+			{{ end }}
 		{{ end }}
 	</ul>
 </section>
-{{ end }}
diff --git a/layouts/team/single.html b/layouts/team/single.html
index 7b24aa2..4c00f44 100644
--- a/layouts/team/single.html
+++ b/layouts/team/single.html
@@ -1,11 +1,62 @@
 {{ define "main" }}
 
 <div class="hero">
-	<h1>{{ .Title }}</h1>
+
+	<header>
+		<div class="speaker-img" style="background-image: url({{ .Page.Params.photoURL }});"></div>
+		<div>
+			<h1>{{ .Page.Params.name }}</h1>
+
+			<ul class="socials">
+				{{ range .Page.Params.socials }}
+				<li>
+					<a href="{{ .link }}" class="social" rel="noreferrer" target="_blank">
+						{{ partial "icon.html" .icon }}
+						{{ .name }}
+					</a>
+				</li>
+				{{ end }}
+			</ul>
+		</div>
+	</header>
+
+	<div class="description">
+
+		<ul class="talks">
+			{{ range where .Site.RegularPages "Params.team" "intersect" (slice .Page.Params.key) }}
+			<li>
+				<a href="{{ .Permalink }}" class="visually-hidden">{{ .Title }}</a>
+				<a href="{{ .Permalink }}" class="talk tag-{{ anchorize (delimit (.Params.tags | default (slice))  "" ) }}">
+				<div class="tags">
+					{{ range .Params.tags }}
+						{{ range first 1 (where $.Site.Data.categories "key" .) }}
+						<span>{{ .name }}</span>
+						{{ end }}
+					{{ end }}
+				</div>		
+				<a href="{{ .Permalink }}" class="talk">
+					<span class="language {{ anchorize .Params.language }}"></span>
+					<h3 class="text">{{ .Title }}</h3>
+				</a>
+			</li>
+			{{ end }}
+		</ul>
+
+	</div>
 </div>
 
-<section class="content">
-	{{ .Content }}
+<section class="team">
+
+	<header>
+		<h2>{{ .Page.Params.city }}</h2>
+		<div class="team-company">{{ .Page.Params.company }}</div>
+	</header>
+
+	<div class="bio">
+		{{ .Content }}
+	</div>
+
 </section>
 
-{{ end }}
\ No newline at end of file
+
+{{ end }}
diff --git a/src/style/pages/_team.scss b/src/style/pages/_team.scss
index 6e8e52d..2ff6603 100644
--- a/src/style/pages/_team.scss
+++ b/src/style/pages/_team.scss
@@ -62,4 +62,100 @@
     margin: var(--space-3);
     height: var(--partner-gold-height);
   }
+}
+
+.page.team {
+
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hero {
+    display: flex;
+    flex-direction: column;
+
+    header, .description {
+      padding: var(--space-4) var(--container-margin);
+    }
+
+    header {
+      align-self: center;
+      padding-left: 0;
+
+      display: flex;
+      align-items: center;
+
+      .speaker-img {
+        --size: 6rem;
+        height: var(--size, 6rem);
+        min-width: var(--size, 6rem);
+        border-radius: 100%;
+        background-size: cover;
+        box-shadow: 0 0 var(--space-3) var(--darken-3);
+        margin-right: var(--space-4);
+      }
+
+      h1 {
+        margin: 0;
+        padding: 0;
+      }
+
+      ul.socials {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.25em;
+        justify-content: flex-start;
+
+        li {
+          flex: 0 1 auto;
+          padding-right: var(--space-4);
+          a.social {
+            width: auto;
+            color: inherit;
+            .icon {
+              width: 1em;
+            }
+          }
+        }
+
+      }
+    }
+
+
+    .description {
+
+      .talks {
+        margin: 1rem auto ;
+        max-width: var(--block-text-max-width);
+
+        padding-left: 0;
+        list-style: none;
+
+        .talk {
+          margin-top: 1rem;
+          border: thin solid var(--darken-1);
+          display: inline-flex;
+          padding: var(--space-2);
+          border-radius: var(--space-1);
+
+          .tags, .language {
+            margin-right: 1ch;
+          }
+
+          .tags {
+            white-space: nowrap;
+            align-self: center;
+          }
+
+          &.tag- {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/static/theme.css b/static/theme.css
index 7014066..0bfa0fd 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -1904,6 +1904,66 @@ main > .kids .content {
   margin: var(--space-3);
   height: var(--partner-gold-height); }
 
+.page.team main {
+  display: flex;
+  flex-direction: column; }
+
+.page.team .hero {
+  display: flex;
+  flex-direction: column; }
+  .page.team .hero header, .page.team .hero .description {
+    padding: var(--space-4) var(--container-margin); }
+  .page.team .hero header {
+    align-self: center;
+    padding-left: 0;
+    display: flex;
+    align-items: center; }
+    .page.team .hero header .speaker-img {
+      --size: 6rem;
+      height: var(--size, 6rem);
+      min-width: var(--size, 6rem);
+      border-radius: 100%;
+      background-size: cover;
+      box-shadow: 0 0 var(--space-3) var(--darken-3);
+      margin-right: var(--space-4); }
+    .page.team .hero header h1 {
+      margin: 0;
+      padding: 0; }
+    .page.team .hero header ul.socials {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      font-size: 1.25em;
+      justify-content: flex-start; }
+      .page.team .hero header ul.socials li {
+        flex: 0 1 auto;
+        padding-right: var(--space-4); }
+        .page.team .hero header ul.socials li a.social {
+          width: auto;
+          color: inherit; }
+          .page.team .hero header ul.socials li a.social .icon {
+            width: 1em; }
+  .page.team .hero .description .talks {
+    margin: 1rem auto;
+    max-width: var(--block-text-max-width);
+    padding-left: 0;
+    list-style: none; }
+    .page.team .hero .description .talks .talk {
+      margin-top: 1rem;
+      border: thin solid var(--darken-1);
+      display: inline-flex;
+      padding: var(--space-2);
+      border-radius: var(--space-1); }
+      .page.team .hero .description .talks .talk .tags, .page.team .hero .description .talks .talk .language {
+        margin-right: 1ch; }
+      .page.team .hero .description .talks .talk .tags {
+        white-space: nowrap;
+        align-self: center; }
+      .page.team .hero .description .talks .talk.tag- {
+        display: none; }
+
 /* FAQ */
 @media (max-width: 44.99em) {
   .page.faq .hero .description, .page.fr-faq .hero .description {