-<style>
-body { font-family: monospace;
- color: #111111;
- width: 80%;
- margin: auto auto;
- text-align: center; }
-h3 { color: #008000; }
-h2 { color: #009900; }
-h4 {
- color: #00aa00;
- font-weight: 400; }
-a { color: #00CC00; }
-p {
- text-align: left;
- margin: auto auto;
- max-width: 800px; }
-section { padding: 30px 0px; }
-.person {
- width: 200px;
- display: inline-block;
- padding-right: 30px;
- text-align: center; }
-.person .photo {
- padding: 0px;
- margin: 0px; }
-.person .name {
- padding: 0px;
- margin: 0px; }
-.person .position {
- padding: 0px;
- margin: 0px; }
-
-/* line behind title
- see http://codepen.io/ericrasch/pen/Irlpm */
-h2 {
- position: relative;
- z-index: 1; }
-h2:before {
- border-top: 2px solid #dfdfdf;
- content:"";
- margin: 0 auto; /* this centers the line to the full width specified */
- position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
- top: 50%; left: 0; right: 0; bottom: 0;
- width: 95%;
- z-index: -1; }
-h2 span {
- /* to hide the lines from behind the text, you have to set the background color the same as the container */
- background: #fff;
- padding: 0 15px; }
-</style>
-
-<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
-
-<script>
-var linkColor = "#00CC00";
-var hoveredLinkColor = "#1aff1a";
-var textColor = "#111111";
-var h2Colour = "#008000";
-var h3Colour = "#009900";
-var h4Colour = "#00aa00";
-function linkify(element) {
- var previousImg = $(element).find("img").attr("src");
- var newImg = previousImg.replace("200", "-link200");
- $(element).find("img").attr("src", newImg);
- $(element).find(".name").css("text-decoration", "underline");
- $(element).find(".text").css("color", linkColor);
- $(element).find("h2").css("color", linkColor);
- $(element).find("h3").css("color", linkColor);
- $(element).find("h4").css("color", hoveredLinkColor); };
-function unlinkify(element) {
- var previousImg = $(element).find("img").attr("src");
- var newImg = previousImg.replace("-link200", "200");
- $(element).find("img").attr("src", newImg);
- $(element).find(".name").css("text-decoration", "none");
- $(element).find(".text").css("color", textColor);
- $(element).find("h2").css("color", h2Colour);
- $(element).find("h3").css("color", h3Colour);
- $(element).find("h4").css("color", h4Colour); };
-function fade(element, opacity) {
- $(element).css("opacity", opacity); };
-function fadeIn(element, ms) {
- var ms = ms ? ms : 0;
- setTimeout(function() { fade(element, 1); }, ms); };
-function fadeOut(element, ms) {
- var ms = ms ? ms : 0;
- setTimeout(function() { fade(element, 0.5); }, ms );};
-function animatePersonClickiness() {
- $(".person").hover(
- function() {
- fadeOut($(this).children(".photo"));
- linkify($(this)); },
- function() {
- fadeIn($(this).children(".photo"));
- unlinkify($(this)); } ); };
-$(document).ready( function() {
- animatePersonClickiness(); });
-</script>