yaztown
diff --git a/‎app/css/app.css
Lines changed: 23 additions & 3 deletions b/‎app/css/app.css
Lines changed: 23 additions & 3 deletions
diff --git a/‎app/index.html
Lines changed: 4 additions & 1 deletion b/‎app/index.html
Lines changed: 4 additions & 1 deletion
diff --git a/‎app/js/controllers/indexController.js
Lines changed: 1 addition & 1 deletion b/‎app/js/controllers/indexController.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎app/js/directives/prism.js
Lines changed: 7 additions & 0 deletions b/‎app/js/directives/prism.js
Lines changed: 7 additions & 0 deletions
@@ -4,6 +4,17 @@ body {
 	padding-bottom: 20px;
 }
 
+/* Redefining bootstrap styles */
+.container .jumbotron,
+.nav-pills > li > a,
+.btn, .form-control, pre {
+	border-radius: 0;
+}
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+	background: #FFF;
+}
+
+
 /* Everything but the jumbotron gets side spacing for mobile first views */
 .header,
 .marketing,
@@ -84,7 +95,7 @@ body {
 .content .page {
 	position: absolute;
 	padding: 30px;
-	background: #EEE;
+	background: #CBE0CF;
 	text-align: left;
 	width: 100%;
 	height: 100%;
@@ -154,6 +165,8 @@ body {
 }
 .container .content .page-code .pre-html:after {
 	content: 'HTML';
+	top: -2px;
+	right: 10px;
 }
 .container .content .page-code .pre-css {
 	position: absolute;
@@ -166,11 +179,18 @@ body {
 }
 .container .content .page-code .pre-css:after {
 	content: 'CSS';
+	right: 9px;
 }
 .container .content .page-code .back {
 	position: absolute;
-	top: 0;
-	right: 8px;
+	top: -2px;
+	right: 12px;
+	font-size: 20px;
+}
+.container .content .page-code small {
+	position: absolute;
+	bottom: 1px;
+	color: #444;
 }
 
 
 
@@ -4,7 +4,8 @@
 	<meta charset="utf-8">
 	<title>ngView Animation Effects</title>
 	<link rel="stylesheet" href="css/bootstrap.min.css"/>
-	<link rel="stylesheet" href="css/app.css"/>	
+	<link rel="stylesheet" href="lib/prism/themes/prism.css" />
+	<link rel="stylesheet" href="css/app.css"/>
 </head>
 <body>
 
@@ -56,11 +57,13 @@ <h4>Animation Effect</h4>
 	<script src="lib/angular/angular.js"></script>
 	<script src="lib/angular/angular-route.min.js"></script>
 	<script src="lib/angular/angular-animate.min.js"></script>
+	<script src="lib/prism/prism.js"></script>
 	<script src="js/app.js"></script>
 	<script src="js/controllers/indexController.js"></script>
 	<script src="js/controllers/pageController.js"></script>
 	<script src="js/controllers/aboutController.js"></script>
 	<script src="js/controllers/codeController.js"></script>
 	<script src="js/directives/backAnimation.js"></script>
+	<script src="js/directives/prism.js"></script>
 </body>
 </html>
@@ -9,7 +9,7 @@ app.controller('indexController', ['$scope', '$route', function($scope, $route)
         {name: 'Fade in/out', className: 'fade'},
         {name: 'Flip', className: 'flip'},
 		{name: 'Rotate', className: 'rotate'},
-		{name: 'Slide+popin', className: 'slide-pop'}
+		{name: 'Slide + Pop in', className: 'slide-pop'}
     ];
 
 	$scope.effect = $scope.effects[0].className;
 
@@ -0,0 +1,7 @@
+app.directive('nagPrism', function() {
+	return {
+		link: function(scope, element) {
+			Prism.highlightElement(element.find('code')[0]);
+		}
+	};
+});