Tweaked footer. Hopefully fixed the top margin problems stemming from…

… absolute positioning
kicool · Jan 27, 2011 · eba30ed · eba30ed
1 parent 2a4ae40
commit eba30ed
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 31 deletions.
diff --git a/css/themes/basic.css b/css/themes/basic.css
@@ -1,20 +1,22 @@
 @import "../reset.css";
 
-/* Base font size */
 html {
 	height: 100%;
 }
+
 body {
 	font-size: 100%;
 	color: #222;
 }
+
 h1, h2, h3, h4, h5 {
 	font-weight: bold;
 	margin: .25em 0;
 }
 
 h1 {
 	font-size: 3em;
+	margin-top: 0;
 }
 
 h2 {
@@ -26,23 +28,50 @@ p {
 	line-height: 1.25em;
 }
 
+em {
+	font-style: normal;
+	color: #888;
+}
+
+footer {
+	min-width: 40em;
+	width: 80%;
+	margin: 1em auto;
+	font-size: 1em;
+	text-align: right;
+}
+
+footer p {
+	color: #ccc;
+}
+
 .slide-container {
 	position: relative;
 	overflow: hidden;
 	height: 100%;
 }
 
+.slide-view-module {
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+	min-width: 40em;
+	min-height: 20em;
+}
+
 .slide {
 	font-size: 200%;
 	top: 0;
 	left: 10%;
 	width: 80%;
+	min-height: 5em;
 	margin: 0 auto;
 	opacity: .25;
 }
 
 .slide-current {
 	opacity: 1;
+	z-index: 1;
 }
 
 .slide ul {

diff --git a/css/themes/gray/theme.css b/css/themes/gray/theme.css
@@ -1,5 +1,9 @@
 @import "../basic.css";
 
+.slide-container {
+	margin-top: 4em;
+}
+
 .slide {
 	font-size: 250%;
 }
@@ -36,18 +40,8 @@
 	margin-bottom: .75em;
 }
 
-.slide footer {
-	font-size: .5em;
-	margin-top: 2em;
-	text-align: right;
-}
-
-.slide footer p {
-	color: #ccc;
-}
-
 .slide .slide-layout-title {
-	margin-top: 15%;
+	padding-top: 2em;
 }
 
 @media screen and (max-device-width: 480px) {
@@ -67,8 +61,5 @@
 	.slide li {
 		font-size: 1.25em;
 	}
-
-	.slide footer {
-		font-size: .75em;
-	}
+
 }
diff --git a/hc/PresentationController.js b/hc/PresentationController.js
@@ -77,25 +77,34 @@ define([], function() {
 	}
 
 	return function SlideController(slideView) {
+		body.className += " presentation-loading";
 
 		window.onkeyup = function(e) {
-			var key = (window.event) ? event.keyCode : e.keyCode;
+			var key = (window.event) ? event.keyCode : e.keyCode,
+				ret = true;
 			switch(key) {
-				case 8:
-				case 37:
-				case 38:
+				case 37: // Left arrow
+				// case 38: // Up arrow, used for keyboard scrolling
 					slideView.prev().then(success);
+					stopEvent(e);
+					ret = false;
 					break;
-				case 32:
-				case 39:
-				case 40:
+				case 32: // Space
+				case 39: // Right arrow
+				// case 40: // Down arrow, used for keyboard scrolling
 					slideView.next().then(success);
+					stopEvent(e);
+					ret = false;
 					break;
 			}
+
+			return ret;
 		};
 
 		// Goto first slide
-		slideView.go(getHash());
+		slideView.go(getHash()).then(function() {
+			body.className = body.className.replace(/presentation-loading/g, "");
+		});
 
 		if('onhashchange' in window) {
 			window.onhashchange = function(e) {

diff --git a/index.html b/index.html
@@ -27,6 +27,12 @@
 	<!-- <link rel="shortcut icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
 
+	<style type="text/css">
+		.presentation-loading * {
+			visibility: hidden;
+		}
+	</style>
+
 	<script src="modernizr-1.6.min.js" type="text/javascript" charset="utf-8"></script>
 
 	<script type="text/javascript" src="require.js"></script>
@@ -38,7 +44,7 @@
 				'hc/PresentationController',
 				// 'cssx/css!css/themes/hovercraft/theme.css',
 				'cssx/css!css/themes/gray/theme.css',
-				'cssx/css!css/themes/fly.css'
+				'cssx/css!css/themes/fade.css'
 			],
 			function(Model, View, Controller) {
 				var slides = View(document.getElementsByClassName('slide-container')[0], Model('slides', true));
@@ -47,7 +53,7 @@
 	</script>
 </head>
 
-<body class="slide-theme-hovercraft">
+<body class="slide-theme-hovercraft presentation-loading">
 
 	<div>
 		<header>
@@ -59,7 +65,9 @@
 		</div>
 
 		<footer>
-
+			<p class="slide-no-touch">Use <em>left/right arrows, or space</em> to move between slides</p>
+			<p class="slide-touch"><em>Touch near the right and left edges</em> of your screen to move between slides</p>
+			<p>Copyright &copy; 2011 Brian Cavalier</p>
 		</footer>
 	</div>
 

diff --git a/slides/0.html b/slides/0.html
@@ -1,8 +1,4 @@
 <div class="slide-layout-title">
 	<h1>Slides</h1>
 	<h2>Presentations with HTML</h2>
-	<footer>
-		<p class="slide-no-touch">Use <em>left/right arrows, or space</em> to move between slides</p>
-		<p class="slide-touch"><em>Touch near the right and left edges</em> of your screen to move between slides</p>
-	</footer>
 </div>