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 {
|
||||
max-width: calc(126rem / 16);
|
||||
width: calc(126rem / 16);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
width: calc(118rem / 16);
|
||||
height: calc(118rem / 16);
|
||||
|
||||
clip-path: circle();
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
@ -29,7 +30,8 @@
|
|||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.img {
|
||||
width: 100%;
|
||||
width: calc(126rem / 16);
|
||||
height: calc(126rem / 16);
|
||||
}
|
||||
|
||||
.caption {
|
||||
|
|
|
@ -18,11 +18,12 @@
|
|||
max-width: calc(126rem / 16);
|
||||
max-height: calc(126rem / 16);
|
||||
|
||||
clip-path: circle(50%);
|
||||
clip-path: circle();
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
width: calc(126rem / 16);
|
||||
height: calc(126rem / 16);
|
||||
}
|
||||
|
||||
.name {
|
||||
|
@ -112,10 +113,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.popupImage {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popupName {
|
||||
color: var(--primary-accent);
|
||||
margin: calc(24rem / 16) 0 0 0;
|
||||
|
|
|
@ -28,7 +28,7 @@ function TeamMemberInfo({
|
|||
<>
|
||||
<div className={styles.picture}>
|
||||
<Image
|
||||
className={isPopup ? styles.popupImage : styles.image}
|
||||
className={styles.image}
|
||||
src={image}
|
||||
alt={`Picture of ${name}`}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue