From 75663ac0b6ba0a93a1dff225fe5f451cb7df7d88 Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 13:10:17 -0700
Subject: [PATCH 1/8] Update Timer with Bootstrap modal, styling

---
 _javascript/curriculum.js    | 14 +++----
 _layouts/curriculum.html     | 31 +++++++++-------
 _stylesheets/curriculum.scss | 71 +++++++++---------------------------
 3 files changed, 40 insertions(+), 76 deletions(-)

diff --git a/_javascript/curriculum.js b/_javascript/curriculum.js
index f506ad70f..244204a8d 100644
--- a/_javascript/curriculum.js
+++ b/_javascript/curriculum.js
@@ -138,24 +138,18 @@ $(function(){
 
 	//Time toggle keybinding
 	$(".timer-label").click(function(){
-		$(".timer-wrapper").toggleClass("fade-out");
-		$(".timer-amount").show();
-		resetTimer();
-	});
-	$(".timer-exit").click(function(){
-		$(".timer-wrapper").toggleClass("fade-out");
-		$("#timer-check").removeAttr("checked");
-		// $(".timer-amount").();
 		resetTimer();
 	});
 	$("#start-stop").click(function(){
+
 		var timeLeftDisplay = $("#time-left")
 		var min = $("#minutes").attr("value");
 		var duration = min*60;
 
 		resetTimer();
 
-		$(".timer-amount").hide();
+		$(".time-amount").hide();
+		$("#start-stop").hide();
 
 		timeLeftInterval = setInterval(function(){
 			timeLeftDisplay.html( Math.floor((duration)/60) + ":" + (duration%60 < 10 ? "0"+duration%60:duration%60) );
@@ -168,6 +162,8 @@ $(function(){
 	});
 	function resetTimer(){
 		clearInterval(timeLeftInterval);
+		$("#start-stop").show();
+		$(".time-amount").show();
 		$("#time-left").html("");
 	}
 
diff --git a/_layouts/curriculum.html b/_layouts/curriculum.html
index be8a78429..bbaf67978 100644
--- a/_layouts/curriculum.html
+++ b/_layouts/curriculum.html
@@ -4,12 +4,12 @@
 ---
 
 <!-- Modal -->
-<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-        <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
+        <h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
       </div>
       <div class="modal-body">
         <table>
@@ -26,7 +26,7 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
             <td>Hide/show table of contents</td>
           </tr>
         </table>
-        
+
         <table>
           <tr>
             <th>URL Command</th>
@@ -48,16 +48,19 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
   </div>
 </div>
 
-<div class="timer-wrapper fade-out">
-  <div class="timer">
-    <div class="timer-exit"><span class="octicon octicon-x"></span></div>
-    <div class="timer-amount">
-      <input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
-      <!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
-      <button id="start-stop" type="submit" class="btn btn-default">Start</button>
-    </div>
-    <div class="timer-content">
-      <span class="time-left" id="time-left"></span>
+
+
+<!-- Modal -->
+<div class="modal fade" id="timerModal" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content text-center">
+      <input type="number" id="minutes" name="minutes" min="1" max="60" value="5" placeholder="min" class="form-control time-amount">
+      <div class="time-left" id="time-left"></div>
+
+      <div class="modal-footer">
+        <button id="start-stop" type="submit" class="btn btn-default">Start</button>
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
     </div>
   </div>
 </div>
@@ -121,7 +124,7 @@ <h4>Table of Contents</h4>
         <li>
           <div class="timer-toggle"></div>
           <input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
-          <label for="timer-check" class="timer-label">Timer</label>
+          <label for="timer-check" class="timer-label" data-toggle="modal" data-target="#timerModal">Timer</label>
         </li>
       </ul>
     </div>
diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index 8860591be..8bc972167 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -62,36 +62,6 @@ table{
 	}
 }
 
-
-.fade-out{
-	background: none !important;
-	margin-left: 100%;
-	position: fixed;
-	left: -35px !important;
-
-	.octicon{
-		font-size: 14px !important;
-	}
-
-	&.timer-wrapper{
-		background-color: none !important;
-	}
-
-	.timer{
-		margin: 0 0 !important;
-	}
-
-	.timer-toggle{
-		padding-left: 0px !important;
-		opacity: .3;
-		text-align: left !important;
-	}
-
-	.timer-amount{
-		visibility: hidden;
-	}
-}
-
 .display-controls{
 	border-top: solid 2px $gray-lighter;
 	margin-top: 5px;
@@ -99,6 +69,12 @@ table{
 }
 
 
+.time-amount{
+	text-align: center;
+}
+.time-left{
+	font-size: 88px;
+}
 
 .timer-check{
 	visibility: hidden;
@@ -135,7 +111,6 @@ table{
 		width: 14px;
 		height: 14px;
 		box-shadow: 0 0 0 1px $gray-light;
-		// padding-top: 1px;
 	}
 }
 
@@ -218,11 +193,11 @@ table{
 
 .deck{
 	position: relative;
-	font-size: 16px;
+	// font-size: 16px;
 
-	.mega-octicon{
-		font-size: 600%;
-	}
+	// .mega-octicon{
+	// 	font-size: 600%;
+	// }
 
 	#teacher-avatar{
 		img{
@@ -252,15 +227,15 @@ table{
 		background: #ffffff;
 		display: table;
 
-		h2,h3,h4,h5{
-			text-align: center;
-			font-size: 400%;
-		}
+		// h2,h3,h4,h5{
+		// 	text-align: center;
+		// 	font-size: 400%;
+		// }
 
-		h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
-			margin-left: 0;
-			margin-right: 0;
-		}
+		// h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
+		// 	margin-left: 0;
+		// 	margin-right: 0;
+		// }
 
 		pre{
 			width: 80%;
@@ -276,16 +251,6 @@ table{
 			}
 		}
 
-		ul,ol{
-			display: inline-block;
-			text-align: left;
-		}
-		.lab{
-			text-align: left;
-			ul, ol{
-					display: block;
-			}
-		}
 
 		.alignment{
 			display: table-cell;

From babae3700adf492a1818de3ffba8602cbf138f8c Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:00:38 -0700
Subject: [PATCH 2/8] Add comments to describe selector blocks

---
 _stylesheets/curriculum.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index 8bc972167..32c05cabc 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -2,15 +2,18 @@
 
 ---
 
+// Import external dependencies
 @import "octicons/octicons/sprockets-octicons.scss";
 @import "bootstrap-sass/lib/bootstrap.scss";
 
+// Incorporate Bootstrap table striping
 table{
 	@extend .table;
 	@extend .table-striped;
 	@extend .table-bordered;
 }
 
+// Octicon mixin
 @mixin octicon-link($char){
 	font: normal normal 1em octicons;
 	text-decoration: none;
@@ -22,7 +25,7 @@ table{
 	}
 }
 
-
+// Custom columns for hide/show of TOC
 .col-content, .col-toc{
 	transition: padding 300ms, opacity 200ms;
 }
@@ -68,7 +71,7 @@ table{
 	padding-top: 10px;
 }
 
-
+// Custom components
 .time-amount{
 	text-align: center;
 }

From 8a3d9f65e12517ec9ef38b0a910c1e5fb2adcff5 Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:00:53 -0700
Subject: [PATCH 3/8] Introduce default Bootstrap vars

---
 _stylesheets/curriculum.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index 32c05cabc..587e36a5c 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -6,6 +6,11 @@
 @import "octicons/octicons/sprockets-octicons.scss";
 @import "bootstrap-sass/lib/bootstrap.scss";
 
+
+body{
+	background: $body-bg;
+}
+
 // Incorporate Bootstrap table striping
 table{
 	@extend .table;

From 5d91bcf6843b0f72ed2a4c5378e1e76d41c3d177 Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:01:11 -0700
Subject: [PATCH 4/8] Include improved Octicon styling for slide uses

---
 _stylesheets/curriculum.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index 587e36a5c..bf90f8d55 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -53,7 +53,24 @@ table{
 	}
 }
 
+// Custom Octicon styling
+.mega-octicon{
+	font-size: 110px;
+	color: $brand-primary;
+
+	&:after{
+		content: "";
+		display: block;
+		width: 170px;
+		height: 170px;
+		border: solid 1px $gray-light;
+		border-radius: 50%;
+		padding: 20px;
+		margin-top: -142px;
+	}
+}
 
+// Table of contents
 #toc-wrapper{
 	opacity: .5;
 	transition: all 200ms;

From 5712401334805870c04b5c1ab6afcb9255db206b Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:02:09 -0700
Subject: [PATCH 5/8] Update slide heading, main text appearance

Reduce font weight for less heavy look, provide more contrast against
bolded text and Octicons
---
 _stylesheets/curriculum.scss | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index bf90f8d55..68ef96c66 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -218,11 +218,23 @@ table{
 
 .deck{
 	position: relative;
-	// font-size: 16px;
+	font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif;
+	font-weight: 300;
+	color: $gray-darker;
 
-	// .mega-octicon{
-	// 	font-size: 600%;
-	// }
+	h1,h2,h3,h4,h5,h6,p,ul,li{
+		font-weight: inherit;
+	}
+
+	h2{
+		font-size: 52px;
+	}
+	h3,h4{
+		font-size: 42px;
+	}
+	p{
+		font-size: 20px;
+	}
 
 	#teacher-avatar{
 		img{
@@ -249,19 +261,8 @@ table{
 
 	.slide{
 		width: 100%;
-		background: #ffffff;
 		display: table;
 
-		// h2,h3,h4,h5{
-		// 	text-align: center;
-		// 	font-size: 400%;
-		// }
-
-		// h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
-		// 	margin-left: 0;
-		// 	margin-right: 0;
-		// }
-
 		pre{
 			width: 80%;
 			padding: 2em;

From 72078b8eed313c20c350fb47b18e84bc19b0aeb1 Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:02:21 -0700
Subject: [PATCH 6/8] Cleanup excess white space

---
 _stylesheets/curriculum.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index 68ef96c66..490bbd3c9 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -34,19 +34,16 @@ table{
 .col-content, .col-toc{
 	transition: padding 300ms, opacity 200ms;
 }
-
 .col-toc{
 	position: fixed;
 	right: -16.66667%;
 	right: 0;
 	opacity: 0;
 }
-
 .shift-left{
 	&.col-content{
 		padding-right: 16.66667%;
 	}
-
 	&.col-toc{
 		right: 0;
 		opacity: 1;
@@ -78,7 +75,6 @@ table{
 		opacity: 1;
 	}
 }
-
 #toc{
   transition: margin 300ms;
 	font-size: .7em;

From e41a3d9754d1091acf8341453eba29350dc07be0 Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:46:52 -0700
Subject: [PATCH 7/8] Simplify GH-API injected teacher name

---
 _javascript/curriculum.js | 9 ++-------
 _layouts/curriculum.html  | 3 ++-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/_javascript/curriculum.js b/_javascript/curriculum.js
index 244204a8d..2674a95eb 100644
--- a/_javascript/curriculum.js
+++ b/_javascript/curriculum.js
@@ -20,13 +20,8 @@ $(function(){
 		{
 			url: "https://api.github.com/users/"+username,
 			success: function(data, textStatus, jqXHR){
-
-				$("<span/>",
-				{
-					class: "teacher-name",
-					text: data.name
-				}).appendTo("#teacher-name");
-
+				$("#teacher-name").html(data.name);
+				
 				$("<span/>",
 				{
 					text: data.login
diff --git a/_layouts/curriculum.html b/_layouts/curriculum.html
index bbaf67978..3482fb6a0 100644
--- a/_layouts/curriculum.html
+++ b/_layouts/curriculum.html
@@ -70,7 +70,8 @@ <h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
     <div class="alignment">
       <div id="teacher-avatar" class=""></div>
       <div class="" id="teacher-info">
-        <div id="teacher-name"></div>
+
+        <h3 id="teacher-name"></h3>
 
         <span id="teacher-username">
           <span class="octicon octicon-octoface"></span>

From a1772f5bcc5db613add65fad6537f1f87d73370d Mon Sep 17 00:00:00 2001
From: jordanmccullough <jordan@github.com>
Date: Mon, 29 Dec 2014 14:47:04 -0700
Subject: [PATCH 8/8] Cleanup teacher slide styles

---
 _stylesheets/curriculum.scss | 49 ++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/_stylesheets/curriculum.scss b/_stylesheets/curriculum.scss
index 490bbd3c9..9a083d9c2 100644
--- a/_stylesheets/curriculum.scss
+++ b/_stylesheets/curriculum.scss
@@ -222,14 +222,30 @@ table{
 		font-weight: inherit;
 	}
 
-	h2{
-		font-size: 52px;
-	}
-	h3,h4{
-		font-size: 42px;
+	.slide{
+		h2{
+			font-size: 52px;
+		}
+		h3,h4{
+			font-size: 42px;
+		}
+		p,ul{
+			font-size: 20px;
+			color: $gray;
+		}
 	}
-	p{
-		font-size: 20px;
+
+	#teacher{
+		.octicon{
+			color: $brand-primary;
+		}
+		span{
+			margin: auto 4px;
+		}
+
+		.teacher-badges{
+			margin-top: 10px;
+		}
 	}
 
 	#teacher-avatar{
@@ -239,21 +255,6 @@ table{
 		}
 	}
 
-	.teacher-name{
-		color: $brand-primary;
-		font-size: 300%;
-	}
-
-	#teacher-username,#teacher-email, #teacher-organization, #teacher-location{
-		margin: auto .75em;
-		opacity: .6;
-	}
-
-	.teacher-badges{
-		margin: 1em 0;
-		opacity: .5;
-	}
-
 
 	.slide{
 		width: 100%;
@@ -265,8 +266,8 @@ table{
 			font-size: 120%;
 			text-align: left;
 			margin: 0 auto;
-			background: #222;
-			color: #f9f9f9;
+			background: $gray-darker;
+			color: $gray-lighter;
 
 			code{
 				font-size: 1.5em;