<div class="profile_component">
<div class="profile-square">
<img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div>
<div class="profile-details">
<h2>Homer Simpson</h2>
<div class="pronouns">
he/him/his
</div><!-- end pronouns -->
<div class="person-titles">
<div class="person-position">
<div class="profile_component--profile_title">Future CEO</div>
<div class="positions">
<div class="person-email">
<span class="fas fa-envelope">
<span class="sr-only">Email address:</span>
</span>
<a href="mailto:student227@lehigh.edu">student227@lehigh.edu</a>
</div>
<!-- end person-email -->
<div class="position_details">
<span class="fas fa-graduation-cap"><span class="sr-only">Degree Path:</span></span> B.S. Psychology
</div>
<div class="position_details">
<span class="fas fa-graduation-cap"><span class="sr-only">Degree Path:</span></span> M.S. Computer Science
</div>
</div><!-- end positions -->
</div><!-- end person-positions -->
</div><!-- end person-titles -->
</div><!-- end person-details -->
</div><!-- end person-profile -->
{% set heading_level = heading_level|default('h3') %}
{% if title is iterable %}
{% set titles = title %}
{% else %}
{% set titles = title is defined ? [title] : [] %}
{% endif %}
{% set websites = website is defined ? website : [] %}
{% if member is iterable %}
{% set members = member %}
{% else %}
{% set members = member is defined ? [member] : [] %}
{% endif %}
{% if degrees is not iterable %}
{% set degrees = degrees is defined ? [degrees] : [] %}
{% endif %}
{% if phone is iterable %}
{% set phones = phone %}
{% else %}
{% set phones = phone ? [phone] : [] %}
{% endif %}
{% if fax is iterable %}
{% set faxes = fax %}
{% else %}
{% set faxes = fax ? [fax] : [] %}
{% endif %}
{% if location is iterable %}
{% set locations = location %}
{% else %}
{% set locations = location ? [location] : [] %}
{% endif %}
<div class="profile_component">
{% block profile_image %}
{% if profile_image %}
{% include "@profile_image" %}
{% endif %}
{% endblock profile_image %}
<div class="profile-details">
{% block profile_name %}
{% if name %}
{% if name_link %}
<{{ heading_level}}><a href="{{ name_link }}">{{ name }}</a></{{ heading_level}}>
{% else %}
<{{ heading_level}}>{{ name }}</{{ heading_level}}>
{% endif %}
{% endif %}
{% endblock profile_name %}
{% block pronouns %}
{% if pronouns %}
<div class="pronouns">
{{ pronouns }}
</div><!-- end pronouns -->
{% endif %}
{% endblock pronouns %}
{% block person_positions %}
<div class="person-titles">
<div class="person-position">
{% for title in titles %}
<div class="profile_component--profile_title">{{ title }}</div>
{% endfor %}
<div class="positions">
{% if additional_info %}
<div class="position_details additional_info">{{ additional_info }}</div>
{% endif %}
{% for location in locations %}
<div class="position_details">
<div><span class="fas fa-map-marker-alt"><span class="sr-only">Location:</span></span> {{ location }}</div>
</div>
{% endfor %}
{% block person_info %}
{% if email %}
<div class="person-email">
<span class="fas fa-envelope">
<span class="sr-only">Email address:</span>
</span>
<a href="mailto:{{ email }}">{{ email }}</a>
</div>
<!-- end person-email -->
{% endif %}
{% endblock person_info %}
{% for phone in phones %}
<div class="position_details">
<div><span class="fas fa-phone"><span class="sr-only">Phone number:</span></span> {{ phone }}</div>
</div>
{% endfor %}
{% for fax in faxes %}
<div class="position_details">
<div><span class="fas fa-fax"><span class="sr-only">Fax number:</span></span> {{ fax }}</div>
</div>
{% endfor %}
{% for website in websites %}
<div class="position_details">
<span class="far fa-link"><span class="sr-only">Website:</span></span> <a href="{{ website.url }}"> {% if website.title %}{{ website.title }}{% else %}{{ website.url }}{% endif %}</a>
</div>
{% endfor %}
{% for member in members %}
<div class="position_details">
<span class="far fa-sitemap"><span class="sr-only">Member of:</span></span> {{ member }}
</div>
{% endfor %}
{% for degree in degrees %}
<div class="position_details">
<span class="fas fa-graduation-cap"><span class="sr-only">Degree Path:</span></span> {{ degree }}
</div>
{% endfor %}
{% if grad_year %}
<div class="position_details">
<span class="fas fa-user-graduate"><span class="sr-only">Graduation Year:</span></span>
{{ grad_year }}
</div>
{% endif %}
</div><!-- end positions -->
</div><!-- end person-positions -->
</div><!-- end person-titles -->
{% endblock person_positions %}
</div><!-- end person-details -->
</div><!-- end person-profile -->
{
"profile_image": {
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"name": "Homer Simpson",
"heading_level": "h2",
"pronouns": "he/him/his",
"email": "student227@lehigh.edu",
"title": "Future CEO",
"degrees": [
"B.S. Psychology",
"M.S. Computer Science"
]
}
.right-content {
.node--view-mode-person-teaser {
margin: $spacer 0;
}
}
.node--type-person {
overflow: hidden;
}
.profile_component {
margin: 0 0 $space_two 0;
@include media-breakpoint-up(sm) {
margin: 0 $space_two $space_two 0;
}
img {
max-width: 100%;
height: auto !important;
}
h2, h3 {
a {
font-weight: normal;
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
border-bottom: 2px solid $lehigh_brown;
border-bottom: 2px solid var(--lehigh_brown, $lehigh_brown);
.color-scheme-dark & {
color: $lehigh_brown_darkmode;
color: var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
border-bottom: 2px solid $lehigh_brown_darkmode;
border-bottom: 2px solid var(--lehigh_brown_darkmode, $lehigh_brown_darkmode);
}
&:hover,
&:focus {
color: $hyperlink;
color: var(--hyperlink, $hyperlink);
.color-scheme-dark & {
color: $hyperlink_darkmode;
color: var(--hyperlink_darkmode, $hyperlink_darkmode);
}
}
}
& + .person-titles > .person-position > .profile_component--profile_title {
border-top: unset;
}
}
.pronouns {
font-style: italic;
}
.person-email {
@extend %person-attribute;
a {
font-weight: normal;
&:hover,
&:focus {
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
.extlink {
display: none;
}
}
}
%person-attribute {
border-top: 1px solid $grey_light;
border-top: 1px solid var(--grey_light, $grey_light);
margin: $space_one_half 0;
padding: $space_one_half 0 0 0;
}
.position_details {
@extend %person-attribute;
}
}
.profile_component--profile_title {
@extend %person-attribute;
font-size: 1.25rem;
line-height: 1.2;
font-weight: 700;
}
.person_category {
clear: both;
}
.right-content {
.profile_pic_name {
img {
max-width: 75%;
}
.sidebar_information {
h2 {
font-size: 1.3rem;
a {
color: $base_font;
color: var(--base_font, $base_font);
border-bottom: 2px solid $base_font;
border-bottom: 2px solid var(--base_font, $base_font);
&:hover {
color: $hyperlink;
color: var(--hyperlink, $hyperlink);
}
}
}
.person-position {
padding-right: 0;
padding-left: 0;
flex: unset;
max-width: unset;
h3 {
font-size: 1.1rem;
}
}
}
}
}
No notes defined.