github · jordanmccullough · Dec 29, 2014 · Dec 29, 2014 · Dec 29, 2014 · Dec 29, 2014
diff --git 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
@@ -138,24 +133,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 +157,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
@@ -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>
@@ -67,7 +70,8 @@ <h4 class="modal-title" id="myModalLabel">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>
@@ -121,7 +125,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
@@ -2,15 +2,23 @@
 
 ---
 
+// Import external dependencies
 @import "octicons/octicons/sprockets-octicons.scss";
 @import "bootstrap-sass/lib/bootstrap.scss";
 
+
+body{
+	background: $body-bg;
+}
+
+// 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,38 +30,51 @@ table{
 	}
 }
 
-
+// Custom columns for hide/show of TOC
 .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;
 	}
 }
 
+// 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;
 	&:hover{
 		opacity: 1;
 	}
 }
-
 #toc{
   transition: margin 300ms;
 	font-size: .7em;
@@ -62,43 +83,19 @@ 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;
 	padding-top: 10px;
 }
 
-
+// Custom components
+.time-amount{
+	text-align: center;
+}
+.time-left{
+	font-size: 88px;
+}
 
 .timer-check{
 	visibility: hidden;
@@ -135,7 +132,6 @@ table{
 		width: 14px;
 		height: 14px;
 		box-shadow: 0 0 0 1px $gray-light;
-		// padding-top: 1px;
 	}
 }
 
@@ -218,74 +214,66 @@ 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;
 	}
 
-	#teacher-avatar{
-		img{
-			height: 300px;
-			width: 300px;
+	.slide{
+		h2{
+			font-size: 52px;
+		}
+		h3,h4{
+			font-size: 42px;
+		}
+		p,ul{
+			font-size: 20px;
+			color: $gray;
 		}
 	}
 
-	.teacher-name{
-		color: $brand-primary;
-		font-size: 300%;
-	}
+	#teacher{
+		.octicon{
+			color: $brand-primary;
+		}
+		span{
+			margin: auto 4px;
+		}
 
-	#teacher-username,#teacher-email, #teacher-organization, #teacher-location{
-		margin: auto .75em;
-		opacity: .6;
+		.teacher-badges{
+			margin-top: 10px;
+		}
 	}
 
-	.teacher-badges{
-		margin: 1em 0;
-		opacity: .5;
+	#teacher-avatar{
+		img{
+			height: 300px;
+			width: 300px;
+		}
 	}
 
 
 	.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;
 			font-size: 120%;
 			text-align: left;
 			margin: 0 auto;
-			background: #222;
-			color: #f9f9f9;
+			background: $gray-darker;
+			color: $gray-lighter;
 
 			code{
 				font-size: 1.5em;
 			}
 		}
 
-		ul,ol{
-			display: inline-block;
-			text-align: left;
-		}
-		.lab{
-			text-align: left;
-			ul, ol{
-					display: block;
-			}
-		}
 
 		.alignment{
 			display: table-cell;