Member page
This commit is contained in:
Yves Gatesoupe
parent
c56f8659d7
commit
48507837ee
@ -5,29 +5,34 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<main id="main-content" tabindex="-1">
|
<main id="main-content" tabindex="-1">
|
||||||
<section class="[ wrapper member ]">
|
<section class="[ wrapper member ]">
|
||||||
<article class="[ member__wrapper ]">
|
<article>
|
||||||
<div>
|
<h1>{{ name }}</h1>
|
||||||
<h1>{{ name }}</h1>
|
<p class="position">{{ position }}</p>
|
||||||
<h2>{{ position }}</h2>
|
{% if positionInternal %}
|
||||||
<div class="member__bio">{{ content | safe }}</div>
|
<p>{{ positionInternal }}</p>
|
||||||
{% if personalSite %}
|
{% endif %}
|
||||||
<p>
|
<div class="[ member__wrapper ]">
|
||||||
<span>site perso :</span>
|
<div class="member__info">
|
||||||
<a href="{{ personalSite }}" class="social">{{ personalSite }}</a>
|
<img src="{{ profile }}" alt="photo de {{ name }}">
|
||||||
</p>
|
{% if personalSite %}
|
||||||
{% endif %}
|
<p>
|
||||||
{% if socialTwitter %}
|
<strong>site web :</strong>
|
||||||
<a href="{{ socialTwitter }}" class="social">Twitter</a>
|
<a href="{{ personalSite }}" class="highlight">{{ personalSite }}</a>
|
||||||
{% endif %}
|
</p>
|
||||||
{% if socialLinkedin %}
|
{% endif %}
|
||||||
<a href="{{ socialLinkedin }}" class="social">Linkedin</a>
|
{% if socialMastodon %}
|
||||||
{% endif %}
|
<a href="{{ socialMastodon }}" class="social" title="mastodon"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.956 18.293c3.007-.36 5.625-2.212 5.954-3.905.519-2.667.476-6.508.476-6.508 0-5.207-3.411-6.733-3.411-6.733C18.255.357 15.302.025 12.233 0h-.075c-3.068.025-6.02.357-7.74 1.147 0 0-3.41 1.526-3.41 6.733 0 .315-.003.647-.004.993-.005.96-.01 2.024.018 3.136.123 5.091.933 10.11 5.64 11.355 2.171.575 4.035.695 5.535.613 2.722-.151 4.25-.972 4.25-.972l-.09-1.974s-1.945.613-4.13.538c-2.163-.074-4.448-.233-4.798-2.89a5.448 5.448 0 01-.048-.745s2.124.519 4.816.642c1.647.076 3.19-.096 4.759-.283zm2.406-3.705V8.283c0-1.288-.328-2.312-.987-3.07-.68-.757-1.57-1.145-2.674-1.145-1.278 0-2.246.491-2.885 1.474l-.623 1.043-.622-1.043c-.64-.983-1.608-1.474-2.886-1.474-1.104 0-1.994.388-2.674 1.146-.659.757-.987 1.781-.987 3.07v6.303h2.498V8.47c0-1.29.543-1.945 1.628-1.945 1.2 0 1.802.777 1.802 2.312v3.35h2.483v-3.35c0-1.535.601-2.312 1.801-2.312 1.086 0 1.629.655 1.629 1.945v6.119h2.497z" fill="#282156"/></svg></a>
|
||||||
{% if socialMastodon %}
|
{% endif %}
|
||||||
<a href="{{ socialMastodon }}" class="social">Mastodon</a>
|
{% if socialTwitter %}
|
||||||
{% endif %}
|
<a href="{{ socialTwitter }}" class="social" title="twitter"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 4.309a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616 2c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 2.901a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.292a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.309z" fill="#282156"/></svg></a>
|
||||||
</div>
|
{% endif %}
|
||||||
<div>
|
{% if socialLinkedin %}
|
||||||
<img src="{{ profile }}" alt="profile de {{ name }}">
|
<a href="{{ socialLinkedin }}" class="social" title="linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#282156"/></svg></a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="member__bio">
|
||||||
|
{{ content | safe }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<a class="return-link" href="/equipe">Voir tous les membres</a>
|
<a class="return-link" href="/equipe">Voir tous les membres</a>
|
||||||
|
|||||||
@ -53,3 +53,12 @@ main {
|
|||||||
color: var(--color-selection-text);
|
color: var(--color-selection-text);
|
||||||
background-color: var(--color-selection-bg);
|
background-color: var(--color-selection-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
color: var(--color-dark);
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -20,12 +20,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--color-dark);
|
color: var(--color-dark);
|
||||||
|
|
||||||
// a,
|
|
||||||
// a:visited {
|
|
||||||
// text-decoration: none;
|
|
||||||
// color: var(--color-dark);
|
|
||||||
// }
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 17rem;
|
height: 17rem;
|
||||||
|
|||||||
@ -1,27 +1,61 @@
|
|||||||
.member {
|
.member {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 20rem;
|
margin-top: 8rem;
|
||||||
|
margin-bottom: 16rem;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: .6fr .4fr;
|
grid-template-columns: .4fr .6fr;
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
grid-column-gap: 1.5rem;
|
grid-column-gap: 1.5rem;
|
||||||
grid-row-gap: 0;
|
grid-row-gap: 0;
|
||||||
margin-top: 8rem;
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
img {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 16rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
|
||||||
|
+ .social {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__bio {
|
&__bio {
|
||||||
margin-top: 2.5rem;
|
position: relative;
|
||||||
|
|
||||||
+ p,
|
+ p,
|
||||||
p + p {
|
p + p {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
&::before {
|
||||||
font-weight: 600;
|
content: '';
|
||||||
}
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='221' height='138' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M220.5 137.5h-99v-77L160 0h49.5l-22 55h33v82.5zm-121 0H.5v-77L39 0h49.5l-22 55h33v82.5z' fill='%23F1F0F6'/%3E%3C/svg%3E");
|
||||||
|
width: 221px;
|
||||||
|
height: 138px;
|
||||||
|
z-index: -1;
|
||||||
|
top: -6rem;
|
||||||
|
left: -1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,6 +63,7 @@
|
|||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
margin-top: 2rem;
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|||||||
@ -35,11 +35,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited {
|
|
||||||
color: var(--color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
+ figure,
|
+ figure,
|
||||||
+ p {
|
+ p {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -71,7 +66,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
|
|
||||||
li + li {
|
li + li {
|
||||||
margin-left: -2rem;
|
margin-left: -2rem;
|
||||||
|
|||||||
@ -11,7 +11,7 @@ module.exports = function(value, outputPath) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const document = DOM.window.document;
|
const document = DOM.window.document;
|
||||||
const articleImages = [...document.querySelectorAll('main section:not(.process-cae, .presentation) article img, .intro img')];
|
const articleImages = [...document.querySelectorAll('main section:not(.process-cae, .presentation, .member) article img, .intro img')];
|
||||||
const articleHeadings = [
|
const articleHeadings = [
|
||||||
...document.querySelectorAll('main article h2, main article h3')
|
...document.querySelectorAll('main article h2, main article h3')
|
||||||
];
|
];
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user