pascaline.grondein/SiteWebAstrolabe
1
0
Fork 0
forked from AstrolabeCAE/SiteWebAstrolabe
Code Pull Requests Activity

Team : 4 profiles per row

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/_includes/partials/components/member-list-simple.njk
View File

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

8
src/_includes/partials/components/member-list.njk
View File

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

4
src/members/yves-gatesoupe.md
View File

@ -1,6 +1,6 @@
---
name: 'Yves Gatesoupe'
position: 'Designer Web'
position: 'Développeur Web'
positionInternal: 'Membre'
date: '2020-06-01'
profile: '/images/profiles/yg-profile.jpg'
@ -14,7 +14,7 @@ tags:
- dev
---
Je suis designer web indépendant depuis janvier 2020.
Je suis développeur web indépendant depuis janvier 2020.
J’ai 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 l’accessibilité numérique.

32
src/scss/components/_member-list.scss
View File

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