From: Erin <erindb@stanford.edu>
Date: Tue, 15 Dec 2015 01:08:16 +0000 (-0800)
Subject: about page with new people format and clickiness
X-Git-Url: http://challenge-bot.com/repos/?p=challenge-bot;a=commitdiff_plain;h=3e21c0820e7be5c04724e7bafebef31dd30813e8

about page with new people format and clickiness
---

diff --git a/challenge-bot.com/images/danny-link200.png b/challenge-bot.com/images/danny-link200.png
new file mode 100644
index 0000000..5d7e4f3
Binary files /dev/null and b/challenge-bot.com/images/danny-link200.png differ
diff --git a/challenge-bot.com/images/erin-link200.png b/challenge-bot.com/images/erin-link200.png
new file mode 100644
index 0000000..30fa8bc
Binary files /dev/null and b/challenge-bot.com/images/erin-link200.png differ
diff --git a/challenge-bot.com/images/no-photo-link200.png b/challenge-bot.com/images/no-photo-link200.png
new file mode 100644
index 0000000..3d5c61a
Binary files /dev/null and b/challenge-bot.com/images/no-photo-link200.png differ
diff --git a/challenge-bot.com/images/no-photo200.png b/challenge-bot.com/images/no-photo200.png
index 2234e6f..ee02938 100644
Binary files a/challenge-bot.com/images/no-photo200.png and b/challenge-bot.com/images/no-photo200.png differ
diff --git a/challenge-bot.com/people.html b/challenge-bot.com/people.html
index 28210a4..f23082d 100644
--- a/challenge-bot.com/people.html
+++ b/challenge-bot.com/people.html
@@ -2,46 +2,134 @@
 
 <style>
 body { font-family: monospace;
-	   color: #111111;
-       width: 80%;
-       margin: auto auto;}
-h2 { color: #008000;}
-h3 { color: #009900;}
-a { color: #00CC00;}
-.person { min-height: 200px;
-	      max-width: 800px;
-	      padding-top: 20px;
-	      padding-bottom: 20px; }
-.person .photo { float: left;
-	             padding-right: 30px; }
-.person .text { margin: auto auto; }
+	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>
+
 <body>
 
-<h2>people</h2>
-
-<div class="person">
-	<img class="photo" src="images/danny200.png" alt="danny watson" />
-	<div class="text">
-		<h3 class="name">danny watson</h3>
-		<div class="bio">
-			<p>Daniel simulated a self driving car in a massive online class a few years ago. Since then he has worked towards making this happen in the real world. Along the way, he has learned a great deal about electronics, and mechanics. He now has a very solid understanding of a very basic robot.</p>
-			<p>He rock climbs, and makes robots.</p></div></div></div>
-
-<div class="person">
-	<img class="photo" src="images/erin200.png" alt="erin bennett" />
-	<div class="text">
-		<h3 class="name">erin bennett</h3>
-		<div class="bio">
-			<p>Erin learned to program in a Linguistics class, where she explored text corpora and drew pictures of finite state machines. A few years later while programming a remote-controlled robot, she implemented her first finite state machine. She was so happy, she made up a song about it.</p>
-			<p>She enjoys spending her time juggling, sleeping, drawing, coding, putting together robots, and making computational models of cognition and language.</p></div></div></div>
-
-<div class="person">
-	<img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
-	<div class="text">
-		<h3 class="name">shoshana berleant</h3>
-		<div class="bio">
-			<p>... is a cool person and does challenge-bot stuff</p></div></div></div>
+<h1>about challenge-bot</h1>
+
+<section>
+	<h2><span>what is challenge-bot?</span></h2>
+
+	<p>The <a href="http://challenge-bot.com">challenge-bot</a> course is an 8-hour long course where we walk you through the process of building your own robot, which you will keep. The goal of this class is to teach you the basics of robotics, get you excited about making stuff, and empower you to go out and create new robotics projects on your own after the class.</p></section>
+
+<section>
+	<h2><span>people</span></h2>
+	<div class="person">
+		<img class="photo" src="images/danny200.png" alt="danny watson" />
+		<div class="text">
+			<h3 class="name">danny watson</h3>
+			<h4 class="position">founder, instructor</h4></div></div>
+
+	<div class="person">
+		<img class="photo" src="images/erin200.png" alt="erin bennett" />
+		<div class="text">
+			<h3 class="name">erin bennett</h3>
+			<h4 class="position">co-founder</h4></div></div>
+
+	<div class="person">
+		<img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
+		<div class="text">
+			<h3 class="name">shoshana berleant</h3>
+			<h4 class="position">instructor</h4></div></div></section>
+
+<section>
+	<h2><span>contact us</span></h2>
+
+	For more information or to sign up for classes, contact <a href="mailto:ozzloy@gmail.com">Daniel Watson</a>.</section>
 
 </body>
\ No newline at end of file