117 lines
3.0 KiB
React
117 lines
3.0 KiB
React
import React from 'react'
|
|
import cx from 'classnames'
|
|
import { Image } from './Image'
|
|
|
|
export const PersonCard = ({ picture, name, url, profile }) => (
|
|
<div className="PersonCard">
|
|
<style jsx>{`
|
|
.PersonCard {
|
|
--person-card-width: 30%;
|
|
--person-card-height: 24em;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
margin-bottom: var(--double-margin);
|
|
|
|
width: var(--person-card-width);
|
|
min-width: 10em;
|
|
max-width: 30em;
|
|
}
|
|
|
|
.PersonCard > a {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.PersonCard-Picture {
|
|
position: relative;
|
|
border-radius: 10px;
|
|
|
|
width: 100%;
|
|
height: var(--person-card-height);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.PersonCard-Picture img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
object-fit: cover;
|
|
transition: all 150ms ease-out;
|
|
}
|
|
|
|
.PersonCard-Title, .PersonCard-Body {
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: var(--single-margin);
|
|
box-sizing: border-box;
|
|
color: white;
|
|
text-align: center;
|
|
text-shadow: 0 0 3px #000;
|
|
}
|
|
|
|
.PersonCard-Title {
|
|
top: 0;
|
|
}
|
|
|
|
.PersonCard-Body {
|
|
bottom: 0;
|
|
}
|
|
|
|
.PersonCard:hover img {
|
|
width: 105%;
|
|
height: 105%;
|
|
top: -2.5%;
|
|
left: -2.5%;
|
|
}
|
|
|
|
|
|
// Tablet
|
|
|
|
@media screen and (min-width: var(--tablet-min-width)) and (max-width: var(--tablet-max-width)) {
|
|
.PersonCard {
|
|
--person-card-height: 20em;
|
|
}
|
|
|
|
@media screen and (orientation: portrait) {
|
|
}
|
|
}
|
|
|
|
|
|
// Mobile
|
|
|
|
@media (max-width: 31.25em) {
|
|
.PersonCard {
|
|
--person-card-width: 100%;
|
|
}
|
|
}
|
|
`}</style>
|
|
|
|
<a className="invisible" href={url}>
|
|
<div className="PersonCard-Picture">
|
|
<picture>
|
|
<img
|
|
className={cx({ opa: false })}
|
|
alt={''}
|
|
src={picture.src}
|
|
srcSet={picture.set.map(({ url, density }) => `${url} ${density}x`)}
|
|
/>
|
|
</picture >
|
|
</div>
|
|
|
|
<div className="PersonCard-Title">
|
|
{name[0]} {name[1]} {name[2]}
|
|
</div>
|
|
|
|
<div className="PersonCard-Body">
|
|
{profile.position}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
)
|