Team : 4 profiles per row

Made image clickable as part of the link
This commit is contained in:
Yves Gatesoupe 2021-11-10 18:04:29 +01:00
parent 91aa807499
commit 6c22617395
4 changed files with 33 additions and 19 deletions

View File

@ -4,9 +4,9 @@
<ol class="[ member-list__items ]" reversed> <ol class="[ member-list__items ]" reversed>
{% for item in teamListItems %} {% for item in teamListItems %}
<li class="member-list__item"> <li class="member-list__item">
<a href="{{ item.data.url }}" class="">
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}"> <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
<a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp; <span class="member-name btn btn-primary">{{ item.data.name }}</span>
<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> </a>
<p>{{ item.data.position }}</p> <p>{{ item.data.position }}</p>
{% if item.data.positionInternal %} {% if item.data.positionInternal %}

View File

@ -4,9 +4,9 @@
<ol class="[ member-list__items ]" reversed> <ol class="[ member-list__items ]" reversed>
{% for item in teamListItems %} {% for item in teamListItems %}
<li class="member-list__item"> <li class="member-list__item">
<a href="{{ item.data.url }}" class="">
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}"> <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
<a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp; <span class="member-name btn btn-primary">{{ item.data.name }}</span>
<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> </a>
<p>{{ item.data.position }}</p> <p>{{ item.data.position }}</p>
{% if item.data.positionInternal %} {% if item.data.positionInternal %}
@ -16,9 +16,7 @@
{% endfor %} {% endfor %}
<li class="member-list__item info"> <li class="member-list__item info">
<p>Vous êtes porteur dun projet entrepreneurial en numérique et nouvelles technologies ?</p> <p>Vous êtes porteur dun projet entrepreneurial en numérique et nouvelles technologies ?</p>
<a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous <a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous</a>
<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="#fff"/></svg>
</a>
</li> </li>
</ol> </ol>
{% endif %} {% endif %}

View File

@ -1,6 +1,6 @@
--- ---
name: 'Yves Gatesoupe' name: 'Yves Gatesoupe'
position: 'Designer Web' position: 'Développeur Web'
positionInternal: 'Membre' positionInternal: 'Membre'
date: '2020-06-01' date: '2020-06-01'
profile: '/images/profiles/yg-profile.jpg' profile: '/images/profiles/yg-profile.jpg'
@ -14,7 +14,7 @@ tags:
- dev - dev
--- ---
Je suis designer web indépendant depuis janvier 2020. Je suis développeur web indépendant depuis janvier 2020.
Jai construit mon expérience en tant que développeur web front end pour Orange Business Services en contribuant notamment à la mise en place du Bootstrap Orange [Boosted](https://boosted.orange.com) qui est un framework aux couleurs de la marque avec un focus sur laccessibilité numérique. Jai construit mon expérience en tant que développeur web front end pour Orange Business Services en contribuant notamment à la mise en place du Bootstrap Orange [Boosted](https://boosted.orange.com) qui est un framework aux couleurs de la marque avec un focus sur laccessibilité numérique.

View File

@ -6,10 +6,10 @@
&__items { &__items {
margin-top: 4rem; margin-top: 4rem;
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto; grid-template-rows: auto;
grid-column-gap: 1.5rem; grid-column-gap: 2rem;
grid-row-gap: 6rem; grid-row-gap: 4rem;
} }
&__item { &__item {
@ -18,14 +18,31 @@
align-items: center; align-items: center;
color: var(--color-dark); color: var(--color-dark);
> p {
text-align: center;
}
> .btn {
text-align: center;
}
> a {
display: flex;
flex-direction: column;
text-decoration: none;
}
img { img {
border-radius: 50%; border-radius: 50%;
height: 17rem; height: auto;
width: auto; width: 100%;
padding: 0 1rem;
+ .btn { + .btn {
margin-top: -1.5rem; margin-top: -1.5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
text-align: center;
align-self: center;
+ p { + p {
font-size: 1.125rem; font-size: 1.125rem;
@ -38,13 +55,12 @@
flex-direction: column; flex-direction: column;
background-color: var(--color-white); background-color: var(--color-white);
color: var(--color-dark); color: var(--color-dark);
padding: 2rem;
font-size: 1.5rem;
font-weight: 600; font-weight: 600;
p { p {
font-size: 1.2rem;
text-align: center; text-align: center;
margin: 1rem 0 3.125rem; margin: 2rem 0 3.125rem;
} }
} }
} }