Team page design update

This commit is contained in:
Yves Gatesoupe 2020-07-14 20:10:42 +02:00
parent 7fd377388a
commit 9b865e1711
5 changed files with 32 additions and 32 deletions

View File

@ -6,13 +6,16 @@
<ol class="[ member-list__items ]" reversed>
{% for item in teamListItems %}
<li class="member-list__item">
<a href="{{ item.data.url }}">
<div class="img-wrapper">
<img src=" {{ item.data.profile }}" alt="profil de {{ item.data.title}}">
</div>
<h3 class="">{{ item.data.name }}</h3>
<p>{{ item.data.position }}</p>
{# <div class="img-wrapper"> #}
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
{# </div> #}
<a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
</a>
<p>{{ item.data.position }}</p>
{% if item.data.positionInternal %}
<p>{{ item.data.positionInternal }}</p>
{% endif %}
</li>
{% endfor %}
<li class="member-list__item info">

View File

@ -12,7 +12,7 @@
</div>
<div class="side-info">
{# <figure> #}
<img src="/images/crew.svg" alt="équipage astrolabe" loading="lazy" style="width: 80%">
<img src="/images/crew-join.svg" alt="équipage astrolabe" loading="lazy" style="width: 70%">
{# </figure> #}
<a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
@ -57,7 +57,7 @@
</li>
{% endfor %}
</ul>
<a role="button" href="/equipe" class="btn btn-secondary">Voir l'équipe</a>
<a role="button" href="/equipe" class="btn btn-primary">Voir l'équipe</a>
</div>
</article>
</div>

View File

@ -5,5 +5,5 @@ layout: 'layouts/team.njk'
teamListHeading: 'L''équipe Astrolabe'
---
Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019.
Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019.<br>
Ils mettent le fruit de ce travail commun à disposition des membres de la coopérative.

View File

@ -15,6 +15,9 @@
}
&__item {
display: flex;
flex-direction: column;
align-items: center;
color: var(--color-dark);
a,
@ -23,34 +26,33 @@
color: var(--color-dark);
}
.img-wrapper {
overflow: hidden;
max-height: 22rem;
}
img {
border-radius: 50%;
height: 17rem;
width: auto;
h3 {
margin-top: 1rem;
font-size: 1.375rem;
+ .btn {
margin-top: -1.5rem;
margin-bottom: .5rem;
+ p {
font-size: 1.125rem;
}
}
}
&.info {
display: flex;
flex-direction: column;
background-color: var(--color-secondary);
color: var(--color-white);
background-color: var(--color-white);
color: var(--color-dark);
padding: 2rem;
font-size: 1.75rem;
font-size: 1.5rem;
font-weight: 600;
.btn {
align-self: flex-start;
margin-top: auto;
p {
text-align: center;
margin: 1rem 0 3.125rem;
}
}
}

View File

@ -5,7 +5,7 @@
grid-template-rows: auto;
grid-column-gap: 2.125rem;
grid-row-gap: 2.125rem;
margin-bottom: 10rem;
margin-bottom: 16rem;
&:nth-child(2n + 1) {
.content {
@ -22,11 +22,6 @@
grid-column: 2;
grid-row: 1;
}
figure {
grid-column: 1;
grid-row: 1;
}
}
}