Ensure all images are squares
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
61338101a0
commit
662ae2fe66
|
@ -1,14 +1,15 @@
|
||||||
.container {
|
.container {
|
||||||
max-width: calc(126rem / 16);
|
width: calc(126rem / 16);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 100%;
|
width: calc(118rem / 16);
|
||||||
border-radius: 50%;
|
height: calc(118rem / 16);
|
||||||
margin: 0 auto;
|
|
||||||
|
clip-path: circle();
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,7 +30,8 @@
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.img {
|
.img {
|
||||||
width: 100%;
|
width: calc(126rem / 16);
|
||||||
|
height: calc(126rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.caption {
|
.caption {
|
||||||
|
|
|
@ -18,11 +18,12 @@
|
||||||
max-width: calc(126rem / 16);
|
max-width: calc(126rem / 16);
|
||||||
max-height: calc(126rem / 16);
|
max-height: calc(126rem / 16);
|
||||||
|
|
||||||
clip-path: circle(50%);
|
clip-path: circle();
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100%;
|
width: calc(126rem / 16);
|
||||||
|
height: calc(126rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
@ -112,10 +113,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popupImage {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popupName {
|
.popupName {
|
||||||
color: var(--primary-accent);
|
color: var(--primary-accent);
|
||||||
margin: calc(24rem / 16) 0 0 0;
|
margin: calc(24rem / 16) 0 0 0;
|
||||||
|
|
|
@ -28,7 +28,7 @@ function TeamMemberInfo({
|
||||||
<>
|
<>
|
||||||
<div className={styles.picture}>
|
<div className={styles.picture}>
|
||||||
<Image
|
<Image
|
||||||
className={isPopup ? styles.popupImage : styles.image}
|
className={styles.image}
|
||||||
src={image}
|
src={image}
|
||||||
alt={`Picture of ${name}`}
|
alt={`Picture of ${name}`}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue