Commit 5a624161 authored by Martin Schoeler's avatar Martin Schoeler Committed by Gabriel Engel

Improve teams grid (#501)

* use grid instead of flex

* use 4 columns in grid

* [wip] improve css

* fix grids

* bump ver
parent b4b110f5
......@@ -253,9 +253,23 @@
}
.team-grid {
@include flexbox();
@include justify-content(space-between);
@include flex-wrap(wrap);
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 300px;
@media (max-width: 1000px) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 650px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 420px) {
grid-template-columns: repeat(1, 100%);
grid-auto-rows: 400px;
}
}
.team-description {
......@@ -295,39 +309,26 @@
}
.team-item {
position: relative;
border-radius: 2px;
overflow: hidden;
width: 100%;
margin-bottom: 1em;
@media screen and (min-width: 33em) {
width: calc(100% / 2 - 0.5em);
}
@media screen and (min-width: 60em) {
margin-bottom: 3em;
width: calc(100% / 3 - 1.5em);
}
}
.team-item__image {
padding-top: 120%;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
display: flex;
flex-direction: column-reverse;
justify-content: end;
}
.team-item__wrap {
position: absolute;
left: 0.5em;
bottom: 0.5em;
right: 0.5em;
background: rgba($space, 0.9);
border-radius: 2px;
padding: 1em;
height: 7.8em;
max-height: 7.8em;
transition: all 0.5s ease;
margin: 8px;
}
.team-button__toggle {
......@@ -362,13 +363,7 @@
}
.team-item__social {
height: 4em;
margin-top: 1em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1em;
border-top: 1px solid transparent;
transition: all 0.7s ease;
......@@ -397,9 +392,6 @@
height: 0.5em;
display: block;
transform: rotate(-45deg);
position: absolute;
top: 0.8em;
right: 0.5em;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transition: all 0.3s ease;
......
......@@ -23,7 +23,7 @@ theme: dark
{% for member in teamList %}
{% if member.country == "Brazil" %}
{% assign BrazilTeam = BrazilTeam | push: member %}
{% elsif member.country == "Uruguay" %}
{% assign UruguayTeam = UruguayTeam | push: member %}
......@@ -223,6 +223,8 @@ theme: dark
</div>
</section>
<div class="space--4"></div>
<section class="container">
<div class="card theme_box--dark-strong team-description">
<div class="wrap">
......@@ -246,56 +248,60 @@ theme: dark
{% else %}
style="background-image: url(/images/team/placeholder.png"
{% endif %}
></div>
<input class="team-button__toggle" id="team-button__{{ forloop.index }}" type="checkbox" />
>
<div class="team-item__wrap">
<h3 class="team-item__name theme_type--dark">
<strong>{{ member.name }}</strong>
<span><img src="/images/flags/{{ member.country | replace: ' ', '-' }}.png" alt="{{ member.country }}" /></span>
</h3>
<p class="team-item__role label--small theme_type--grey">{{ member.role }}</p>
{% if member.description %}
<label class="team-item__button" for="team-button__{{ forloop.index }}"></label>
<div class="team-item__bio">
{% for desc in member.description %}
<p>{{ desc }}</p>
{% endfor %}
</div>
{% endif %}
<div class="team-item__social">
{% if member.github_username %}
<a target="_blank" href="//github.com/{{ member.github_username }}" rel="noopener noreferrer">
<img src="/images/team/github.svg" alt="Github link" />
</a>
<h3 class="team-item__name theme_type--dark">
<strong>{{ member.name }}</strong>
<span><img src="/images/flags/{{ member.country | replace: ' ', '-' }}.png" alt="{{ member.country }}" /></span>
</h3>
<p class="team-item__role label--small theme_type--grey">{{ member.role }}</p>
{% if member.description %}
<label class="team-item__button" for="team-button__{{ forloop.index }}"></label>
<div class="team-item__bio">
{% for desc in member.description %}
<p>{{ desc }}</p>
{% endfor %}
</div>
{% endif %}
{% if member.twitter %}
<a target="_blank" href="//twitter.com/{{ member.twitter }}" rel="noopener noreferrer">
<img src="/images/team/twitter.svg" alt="Twitter link" />
</a>
{% endif %}
<div class="team-item__social">
{% if member.github_username %}
<a target="_blank" href="//github.com/{{ member.github_username }}" rel="noopener noreferrer">
<img src="/images/team/github.svg" alt="Github link" />
</a>
{% endif %}
{% if member.email %}
<a href="mailto:{{ member.email }}">
<img src="/images/team/email.svg" alt="{{ member.email }}" />
</a>
{% endif %}
{% if member.username %}
<a target="_blank" href="https://open.rocket.chat/direct/{{member.username}}">
<img src="/images/team/rocketchat.svg" alt="{{ member.username }}" />
</a>
{% endif %}
{% if member.twitter %}
<a target="_blank" href="//twitter.com/{{ member.twitter }}" rel="noopener noreferrer">
<img src="/images/team/twitter.svg" alt="Twitter link" />
</a>
{% endif %}
{% if member.email %}
<a href="mailto:{{ member.email }}">
<img src="/images/team/email.svg" alt="{{ member.email }}" />
</a>
{% endif %}
{% if member.username %}
<a target="_blank" href="https://open.rocket.chat/direct/{{member.username}}">
<img src="/images/team/rocketchat.svg" alt="{{ member.username }}" />
</a>
{% endif %}
</div>
</div>
</div>
</div>
<input class="team-button__toggle" id="team-button__{{ forloop.index }}" type="checkbox" />
</li>
{% endfor %}
{% capture modulo %}{{ teamList.size | modulo:3 }}{% endcapture %}
{% capture modulo %}{{ teamList.size | modulo:4 }}{% endcapture %}
{% if modulo != '0' %}
<li class="team-item empty"></li>
{% endif %}
</ul>
<section>
<div class="space--4"></div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment