CMTA Leadership Option2

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>

            <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/Martinez2.jpg" alt="Team member 1">
								<div class="cd-img-overlay"><span>View Bio</span></div>
							</figure>

							<div class="cd-member-info">
								Mark Martinez <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/ChrisRiley.jpg" alt="Team member 1">
								<div class="cd-img-overlay"><span>View Bio</span></div>
							</figure>

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

                </li>
            </ul>
        </div>
        <!-- cd-container -->
    </section>
    <!-- cd-team -->
    <div...

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 

-------------------------------- */
...

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');
        }
    });
});