<div id="modal-" class="person-modal modal" aria-hidden>
<div class="modal__overlay modal__trigger" data-id="modal-"></div>
<div class="modal__window">
<button class="modal__close modal__trigger" data-id="modal-"></button>
<div class="modal__content">
<aside class="person-modal__aside stack-l">
<div class="person-item person-item--">
<figure>
<img src="/images/team/.png" alt="">
</figure>
<h3></h3>
<h4></h4>
</div>
<div class="person-modal__links">
</div>
</aside>
<div class="person-modal__bio stack-l">
</div>
</div>
</div>
</div>
<div id="modal-{{loop.index}}" class="person-modal modal" aria-hidden>
<div class="modal__overlay modal__trigger" data-id="modal-{{loop.index}}"></div>
<div class="modal__window">
<button class="modal__close modal__trigger" data-id="modal-{{loop.index}}"></button>
<div class="modal__content">
<aside class="person-modal__aside stack-l">
{% include '@person-item' %}
<div class="person-modal__links">
{% if person.links.email %}
<a href={{ person.links.email }} target="_blank" class="profile__icon"><img src="/images/icon/email.svg"></a>
{% endif %}
{% if person.links.linkedin %}
<a href={{ person.links.linkedin }} target="_blank" class="profile__icon"><img src="/images/icon/linkedin.svg"></a>
{% endif %}
{% if person.links.twitter %}
<a href={{ person.links.twitter }} target="_blank" class="profile__icon"><img src="/images/icon/twitter.svg"></a>
{% endif %}
</div>
</aside>
<div class="person-modal__bio stack-l">
{{person.bio}}
</div>
</div>
</div>
</div>
/* No context defined for this component. */
/* Structural Styles */
.person-modal .modal__content {
display: flex;
flex-direction: column;
@include breakpoint($large) { flex-direction: row; }
}
/* Visual Styles */
.person-modal .modal__content {
background-color: var(--colors-white);
box-shadow: 8px 8px 32px hsla(var(--black-hsl), .2);
padding: var(--s2);
}
.person-modal__aside {
flex: 5;
text-align: center;
@include breakpoint($large) { max-width: 40ch; }
}
.person-modal__bio {
max-width: 70ch;
flex: 8;
@include breakpoint($large) { padding-left: var(--s2); }
}
.person-modal__links > * {
vertical-align: top;
}
.person-modal__links > * + * {
margin-left: var(--s1);
}
@include breakpoint($small-only) {
.person-modal .modal__window {
max-width: 96vw;
}
.person-modal .person-item figure {
--n: 1;
--d: 1;
// width: 300px;
margin-left: auto;
margin-right: auto;
}
}
There are no notes for this item.