layout: default
<!–
Last full read through 29/12/2020
############################################## # About Layout /_layouts/about.html ##############################################
–>
{% if site.data.copy.about.title %} {% assign strap = site.data.copy.about.title %} {% else %} {% assign strap = site.description %} {% endif %}
<div class=“hero hero-65”>
<div class="hero__overlay h-100"> {% picture {{ page.hero.file | prepend: 'content/' }} --img class="hero__image hero__image--fixed hero-65" --alt {{ page.hero.alt }} %}</div> <header class="hero__strap hero__strap--center image__filter--blur hero-65" aria-label="{{ strap }}"> <h1 aria-hidden="true" > {% assign n = strap.size | minus: 1 %} {%- for char in (0..n ) -%} <span style="animation-delay: {{ char | times: 40 | plus: 200 }}ms;">{{ strap | slice: char }}</span> {%- endfor -%}</h1> </header>
</div>
<!– exclude if no text is provided –> {% if site.data.copy.about.text %} <div class=“about__copy bg–env-100” id=“content”>
{% for item in site.data.copy.about[page.env].text %} <p class="about--copy" data-aos="fade-in"> {{ item.para }}</p> {% endfor %}
</div> {% endif %}
<div class=“embedded__video about–video”>
<!-- <h2>Watch our company video</h2> --> {% include vimeoPlayer.html id="493777125" %}
</div>
<div class=“about__team”>
<h2 class="bg--env-50 about__team--title">Meet the team</h2> <div class="team__head bg--env-50"> {% for menu in site.data.team.menu %} <h3 class="team__title team--js-script-{{ menu.script }}" id="team{{ menu.script }}" onclick="team{{ menu.script }}()"> <i class="{{ menu.icon }}"></i> <span class="title__title--text">{{ menu.name }}</span></h3> {% endfor %} </div> <div class="team__members" id="gaitq-team"> {% for member in site.data.team.members %} <div class=" single__member single__member--active {% assign ships = member.membership | split: ', ' %} {% for item in ships %} team--{{ item }} {% endfor %} "> <div class="single__member__image"> <img class="member--image" src=" {%- if member.image -%} {{ member.image | prepend: '/assets/images/content/people/' | relative_url }} {%- else -%} {{ 'team-placeholder.jpg' | prepend: '/assets/images/defaults/' | relative_url }} {%- endif -%}" alt="{{ member.name }} is the {{ member.position }}" /> </div> <div class="single__member__text"> <h2>{{ member.name }}</h2> <h2 class="member__position">{{ member.position }}</h2> {% if member.social %} <ul class="member__socials"> {% for socials in member.social %} <li> <a class="social--{{ socials.name }} social"href="{{ socials.url }}"> <i class="{{ socials.icon }}"></i></a> </li> {% endfor %} </ul> {% endif %} <p class="member__info">{{ member.alt }}</p> <!-- Only hide long member.alt, 100 char ~ 2 lines --> {% if member.alt.size > 100 %} <div class="info__conceal" ><p><i class="fas fa-angle-double-down"> </i></p></div> {% endif %} </div> </div> {% endfor %} </div>
</div>
<!–
–> <script>
/* On load we hide some members. '.single__member.single__member--active' is applied to all members, such that all members are 'display: flex' so in the event of no JS we see everyone. Removing '.single__member--active' defaults display to 'display: none'. */ /* get core .team__title and apply style */ const title = document.querySelectorAll(".team__title.team--js-script-core"); for(var i = 0; i < title.length; i++) title[i].classList.add('team__title--active'); /* get members that do not belong to '.team--core' and remove '.single__member--active' */ const members = document.querySelectorAll(".single__member:not(.team--core)"); for(var i = 0; i < members.length; i++) members[i].classList.remove('single__member--active');
</script>
<!–
For each team we need a script to handle click events on the team menu.
–> {% for menu in site.data.team.menu %}
<script>
function team{{ menu.script }}() { /* get all .single__member NOT requested and remove .single__member--active */ const requestedMembers = document.querySelectorAll(".single__member:not(.team--{{ menu.script }})"); for(var i = 0; i < requestedMembers.length; i++) requestedMembers[i].classList.remove('single__member--active'); /* get all the requested .single__member and add .single__member--active */ const hideMembers = document.querySelectorAll(".single__member.team--{{ menu.script }}"); for(var i = 0; i < hideMembers.length; i++) hideMembers[i].classList.add('single__member--active'); /* get all team__title NOT requested and remove .team__title--active */ const notTitle = document.querySelectorAll(".team__title:not(.team--js-script-{{ menu.script }})"); for(var i = 0; i < notTitle.length; i++) notTitle[i].classList.remove('team__title--active'); /* get team__title requested and add team__title--active */ const requestedTitle = document.querySelectorAll(".team__title.team--js-script-{{ menu.script }}"); for(var i = 0; i < requestedTitle.length; i++) requestedTitle[i].classList.add('team__title--active');
} </script> {% endfor %}
<script> /* Watch for clicks on more info and reveal text */ document.querySelectorAll('.info__conceal').forEach(function(el){
el.addEventListener('click', function() { this.classList.toggle('info__reveal'); var n = this.previousElementSibling; n.classList.toggle('member__info--reveal'); });
});
</script>