Add page: Team (#475)

Co-authored-by: Beta Ziliani <[email protected]>

_data/top_sponsors.csv

@@ -0,0 +1,5 @@
+logo,name,url
+m.svg,Manas.tech,https://manas.tech
+sponsors/84.png,84 codes,https://www.84codes.com
+sponsors/nikola_motor_company.png,Nikola Motor Company,https://nikolamotor.com/
+sponsors/placeos.png,PlaceOs,https://place.technology/

_includes/components/profile-card.html

@@ -0,0 +1,19 @@
+<div class="profile-card" itemscope itemtype="https://schema.org/Person">
+  <strong class="name" itemprop="name">{{ include.profile.name }}</strong>
+  <span class="handle">@{{ include.profile.github_handle | default: include.slug }}</span>
+  <img src="/assets/authors/{{ include.slug }}.jpg" itemprop="image" alt="Photo of {{ include.profile.name }}" alt="Profile picture of {{ member[1].name }}" />
+
+  <div class="roles">
+    <span class="role" itemprop="jobTitle">{{ include.profile.role }}</span>
+    <span class="affiliation" itemprop="affiliation">{{ include.profile.affiliation }}</span>
+  </div>
+
+  <div class="profiles">
+    <a href="https://github.com/{{ include.profile.github_handle | default: include.slug }}" itemprop="url" title="{{ include.profile.github_handle | default: include.slug }} on GitHub" class="icon" aria-label="GitHub profile">
+      {% include icons/github.svg %}
+    </a>
+    <a href="https://forum.crystal-lang.org/u/{{ include.profile.forum_handle | default: include.slug }}" itemprop="url" title="{{ include.profile.forum_handle | default: include.slug }} on the Crystal Forum" class="icon" aria-label="Crystal Forum profile">
+      {% include icons/discourse.svg %}
+    </a>
+  </div>
+</div>

_includes/components/sponsorship.html

@@ -0,0 +1,24 @@
+<div class="topics">
+  <div class="topic">
+    <div class="topic-icon">
+      <img class="topic-icon" src="/assets/icons/favorite.svg" />
+    </div>
+    <strong>Sponsorship</strong>
+    <p>Become a Crystal sponsor in only 3 simple steps via OpenCollective</p>
+    <a href="#" class="hex wide"><span>Contribute</span></a>
+  </div>
+
+  <div class="topic">
+    <img class="topic-icon" src="/assets/icons/domain.svg" />
+    <strong class="ico building left">Enterprise support</strong>
+    <p>Sponsoring Crystal creates a great springboard for your brand</p>
+    <a href="#" class="hex wide"><span>Get Support</span></a>
+  </div>
+
+  <div class="topic">
+    <img class="topic-icon" src="/assets/icons/shuttle.svg" />
+    <strong class="ico shuttle left">Hire us for your project</strong>
+    <p>You can tap into the expertise of the very creators of the language to guide you in your implementation. </p>
+    <a href="#" class="hex wide"><span>Hire Us</span></a>
+  </div>
+</div>

_includes/components/top-sponsors.html

@@ -0,0 +1,18 @@
+<section>
+  <div class="full-width-rule">
+    <a href="/sponsors/" class="hex">
+      <span>Sponsors</span>
+    </a>
+  </div>
+
+  <p class="center">All this is only possible through our generous <a href="/sponsors/">sponsors</a> which help sustaining the project.</p>
+
+  <div class="top-sponsors">
+    {% for sponsor in site.data.top_sponsors %}
+      <a href="{{ sponsor.url }}" rel="nofollow sponsored">
+        <img src="/assets/{{ sponsor.logo }}" />
+        {{ sponsor.name }}
+      </a>
+    {% endfor %}
+  </div>
+</section>

_pages/team.md

@@ -0,0 +1,108 @@
+---
+title: Team
+description: >
+  Crystal is an open-source project based on the incredible efforts of a large
+  community. Meet the people behind Crystal.
+layout: page-wide
+---
+
+<section>
+  <h2 id="core">Core Team</h2>
+  <aside markdown="1">
+
+The Core Team manages the development of Crystal and its ecosystem.
+  </aside>
+
+  <div class="cards-list">
+    {% for member in site.data.team.core %}
+      {% if member[1].status == "active" %}
+        {% assign profile = member[1] %}
+        {% include components/profile-card.html profile=profile slug=member.first %}
+      {% endif %}
+    {% endfor %}
+  </div>
+</section>
+
+<section class="side-section">
+  <h3 id="alumni">Alumni</h3>
+  <aside markdown="1">
+These awesome people have served as core team members in the past. They are listed here to record and honor their contributions.
+  </aside>
+
+  <div class="cards-list">
+    {% for member in site.data.team.alumni %}
+      <div class="profile-mini" itemscope itemtype="https://schema.org/Person">
+        <img src="/assets/authors/{{ member[0] }}.jpg" alt="Profile picture of {{ member[1].name }}" />
+        <span class="name" itemprop="name">{{ member[1].name }}</span>
+        <a href="https://github.com/{{ member[1].github_handle | default: member[0] }}" itemprop="url" title="GitHub profile" class="ico github">@{{ member[1].github_handle | default: member[0] }}</a>
+      </div>
+    {% endfor %}
+  </div>
+</section>
+
+<hr class="full">
+
+<section class="side-section">
+  <h2 id="admins">Admins</h2>
+  <aside markdown="1">
+Some people help with administrative duties, for example related to the management of assets and infrastructure, and communications. They have access to some resources and may participate as representatives of Crystal, but are not Core Team members. They do not take part in project decisions.
+  </aside>
+
+  <div class="cards-list">
+    {% for member in site.data.team.admin %}
+      {% assign profile = member[1] %}
+      {% include components/profile-card.html profile=profile slug=member.first %}
+    {% endfor %}
+  </div>
+</section>
+
+<hr class="full">
+
+<section class="side-section">
+  <h2 id="moderators">Community Moderators</h2>
+  <aside id="join_us" markdown="1">
+
+Some experienced members of the community help moderating the community channels.
+They have the [Triage role](https://docs.github.com/en/organizations/managing-access-to-your-organizations-repositories/repository-permission-levels-for-an-organization)
+on GitHub which gives them the ability to assign labels, open & close issues/PRs, apply milestones, mark duplicates,
+assign issues/PRs and request reviews.
+  </aside>
+
+  <div class="cards-list">
+    {% for member in site.data.team.moderators %}
+      {% assign profile = member[1] %}
+      {% include components/profile-card.html profile=profile slug=member.first %}
+    {% else %}
+    <em>none</em>
+    {% endfor %}
+  </div>
+</section>
+
+<section class="bg-gray">
+  <p class="ico heart-black left">
+  </p>
+</section>
+
+> **NOTE:**
+> Community members with a good understanding of the processes and topics in the community are eligible to become moderators. If you would like to apply, please contact the core team at [[email protected]](mailto:[email protected]).
+
+<hr class="full">
+
+<section class="side-section">
+  <h2 id="contributors">Contributors</h2>
+  <aside markdown="1">
+Besides those that are explicitly named, this is a call out to
+[hundreds more contributors](https://github.com/crystal-lang/crystal/graphs/contributors)
+who put their work into the project.
+
+If you want to become a contributor, see our [Contributing Instructions](https://github.com/crystal-lang/crystal/blob/master/CONTRIBUTING.md) and [Code of Conduct](https://github.com/crystal-lang/crystal/blob/master/CODE_OF_CONDUCT.m).
+  </aside>
+  <div>
+    <img src="https://opencollective.com/crystal-lang/contributors.svg?width=960">
+  </div>
+</section>
+
+{% include components/top-sponsors.html %}
+
+{% include components/sponsorship.html %}
+

_sass/base/_layout.scss

@@ -1,4 +1,5 @@
 :root {
+  --padding-xs: clamp(0.5rem, 1.5%, 0.75rem);
   --padding-sm: clamp(1rem, 3%, 1.5rem);
   --padding-md: clamp(1.5rem, 6%, 3rem);
   --padding-lg: clamp(3rem, 12%, 6rem);
@@ -91,5 +92,5 @@ section:not([class]) {
 
 hr {
   border: none;
-  border-block-end: 1px solid var(--border-color);
+  border-block-end: 0.16ch solid var(--border-color);
 }

_sass/base/_typography.scss

@@ -1,6 +1,6 @@
 :root {
   --line-height-sm: 1.2;
-  --line-height-md: 1.6;
+  --line-height-md: 1.5;
   --line-height-lg: 1.8;
   --line-height-base: var(--line-height-lg);
   --line-height-heading: calc(3px + 2ex + 3px);