CMTA Leadership - 2016

by freedawirl

HTML

<script src="http://www.portfolio.macmccrary.com/temp/modernizr.js"></script>
<link rel="stylesheet" href="portfolio.macmccrary.com/temp/reset.css">
<link rel="stylesheet" href="http://www.capmetro.org/css/re-brand.css">
<main>
  <header class="cd-section">
    <div class="cd-container">
      <h1>CapMetro Leadership</h1>

      <p>Executive team and Board members</p>
    </div>
    <!-- cd-container -->
  </header>
  <section id="cd-team" class="cd-section">
    <div class="cd-container">
      <h2>Our team</h2>
      <!-- cd-member-row-info 1-->
      <ul>
        <li>
          <a href="#0" data-type="member-1">
            <figure>
              <img src="http://www.capmetro.org/uploadedImages/Capmetro.org/About_Us/Leadership/LindaWatson.jpg" alt="Team member 1">
              <div class="cd-img-overlay"><span>View Bio</span></div>
            </figure>

            <div class="cd-member-info">
              Linda Watson <span>CEO</span>
            </div>
            <!-- cd-member-info -->
          </a>

        </li>
        <li>
          <a href="#0" data-type="member-2">
            <figure>
              <img src="http://www.capmetro.org/uploadedImages/Capmetro.org/About_Us/Leadership/Wade-Cooper-photo.jpg" alt="Team member 1">
              <div class="cd-img-overlay"><span>View Bio</span></div>
            </figure>

            <div class="cd-member-info">
              Wade Cooper <span>Chairmen</span>
            </div>
            <!-- cd-member-info -->
          </a>

        </li>
        <li>
          <a href="#0" data-type="member-3">
            <figure>
              <img src="http://www.capmetro.org/uploadedImages/Capmetro.org/About_Us/Leadership/silas.jpg" alt="Team member 1">
              <div class="cd-img-overlay"><span>View Bio</span></div>
            </figure>

            <div class="cd-member-info">
              Beverly Salinas <span>Vice Chair</span>
            </div>
            <!-- cd-member-info -->
          </a>

    ...

CSS

/* -------------------------------- 

Primary style

-------------------------------- */

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  color: #333;
  font-family: 'Droid Sans', sans-serif;
  background-color: #fff;
  /* prevent ie from showing the horizontal scrollbar */
  overflow-x: hidden;
}

body.overflow-hidden {
  /* when author bio is visible, the out-of-focus content won't scroll */
  overflow: hidden;
}

a {
  color: #0069aa;
}

a:hover {
  color: #f25f5c;
  text-decoration: none;
}

img {
  max-width: 100%;
}


/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */

.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}


/* -------------------------------- 

xnugget info 

-------------------------------- */

.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  top: 0;
  left: 0;
}

.cd-nugget-info a {
  position: relative;
  display: inline-block;
  padding: 0 1em;
  font-size: 14px;
  color: #fff;
  background-color: #f25f5c;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

.no-touch .cd-nugget-info a:hover {
  opacity: .8;
}

.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}

.cd-nugget-info span svg {
  display: block;
}

.cd-nugget-info .cd-nugget-info-arrow {
  fill: #fff;
}


/* -------------------------------- 

xcarbonads 

-------------------------------- */

#carbonads-container {
  position: fixed;
  right: 40px;
  top: 30px;
 ...

JavaScript

jQuery(document).ready(function($) {
  var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;

  //open team-member bio
  $('#cd-team').find('ul a').on('click', function(event) {
    event.preventDefault();
    var selected_member = $(this).data('type');
    $('.cd-member-bio.' + selected_member + '').addClass('slide-in');
    $('.cd-member-bio-close').addClass('is-visible');

    // firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if (is_firefox) {
      $('main').addClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
        $('body').addClass('overflow-hidden');
      });
    } else {
      $('main').addClass('slide-out');
      $('body').addClass('overflow-hidden');
    }

  });

  //close team-member bio
  $(document).on('click', '.cd-overlay, .cd-member-bio-close', function(event) {
    event.preventDefault();
    $('.cd-member-bio').removeClass('slide-in');
    $('.cd-member-bio-close').removeClass('is-visible');

    if (is_firefox) {
      $('main').removeClass('slide-out').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
        $('body').removeClass('overflow-hidden');
      });
    } else {
      $('main').removeClass('slide-out');
      $('body').removeClass('overflow-hidden');
    }
  });
});