Slide examples and cleanup

chriscoyier · Mar 7, 2011 · 5e8264d · 5e8264d
1 parent 0325c89
commit 5e8264d
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 25 deletions.
diff --git a/css/slide.css → css/framework.css b/css/slide.css → css/framework.css
@@ -1,5 +1,5 @@
 html { overflow-y: scroll; }
-html, body { overflow-x: hidden; }
+html, body { overflow-x: hidden; height: 100%; }
 body {
 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
     font-weight: 300;
@@ -13,7 +13,7 @@ body {
 header, footer, section, figure { display: block; }
 
 header { 
-	background: #686dd6; 
+	background: rgba(50,50,200,0.8); 
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -42,8 +42,11 @@ header section {
 	text-indent: -9999px;
 }
 #content {
- padding-top: 170px;
- padding-bottom: 80px;
+	height: 100%;
+}
+#content section {
+	padding-top: 170px;
+	padding-bottom: 80px;	
 }
 
 h1, h2, h3, h4, h5 {
@@ -52,7 +55,7 @@ h1, h2, h3, h4, h5 {
 }
 h1 {
 	font-size: 66px;
-	background: #2C2A25;
+	background: rgba(0,0,0,0.8);
 	color: white;
 	text-align: center;
 	position: fixed;
@@ -79,12 +82,12 @@ h2 {
 }
 
 h3 {
-	font-size: 26px;
+	font-size: 40px;
 	margin: 0 0 15px 0;
 }
 
 footer {
-	background: #2C2A25;
+	background: rgba(0,0,0,0.8);
 	padding: 10px;
 	position: fixed;
 	width: 100%;
@@ -105,12 +108,12 @@ footer select {
 
 #next {
 	position: absolute;
-	right: 30px;
+	right: 40px;
 	top: 0;
 }
 #previous {
 	position: absolute;
-	left: 30px;
+	left: 20px;
 	top: 0;
 }
 #next:after, #previous:after {
@@ -127,7 +130,7 @@ footer select {
 	border-left: 15px solid #999;
 }
 #previous:after {
-	right: 125%;
+	right: 120%;
 	border-right: 15px solid #999;
 }
 #next:hover, #previous:hover {
@@ -148,8 +151,11 @@ footer select {
 	left: -3500px;
 	position: relative;
 	-webkit-transition: all 1s ease;
+	-webkit-transition-property: left, opacity;
 	-moz-transition: all 1s ease;
+	-moz-transition-property: left, opacity;
 	-o-transition: all 1s ease;
+	-o-transition-property: left, opacity;
 }
 
 .loaded #content, .loaded h1 section {

diff --git a/css/slides.css b/css/slides.css
@@ -0,0 +1,29 @@
+.slide-1 {
+	background: url(../images/traintrack.jpg) center center no-repeat;
+}
+.slide-1 blockquote {
+	color: white;
+	font-size: 40px;
+	margin-top: 60px;
+	text-shadow: 0 2px 0 black;
+	font: italic 70px Baskerville;
+	text-align: center;
+
+}
+.slide-1 blockquote cite {
+	display: block;
+	font-size: 30px;
+	margin-top: 130px;
+}
+
+.slide-2 pre {
+	background: #333;
+	color: white;
+	padding: 30px;
+	font: 40px Monaco, MonoSpace;
+	margin: 0;
+}
+
+.slide-3 {
+	background: url(../images/sunflowers.jpg) center center no-repeat;
+}
diff --git a/images/sunflowers.jpg b/images/sunflowers.jpg
diff --git a/images/traintrack.jpg b/images/traintrack.jpg
diff --git a/includes/doctype.php b/includes/doctype.php
@@ -10,9 +10,8 @@
 	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
 
-	<link rel="stylesheet" href="../css/slide.css">
+	<link rel="stylesheet" href="../css/framework.css">
+	<link rel="stylesheet" href="../css/slides.css">
 </head>
 
-<body>
-
-	<div id="page-wrap">
+<body>
diff --git a/includes/footer.php b/includes/footer.php
@@ -30,8 +30,6 @@ function array_key_relative ($array, $current_key, $offset = 1) {
 		</section>
 	</footer>
 
-	</div><!--page-wrap-->
-
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 	<script src="../scripts/slide.js"></script>
 

diff --git a/scripts/slide.js b/scripts/slide.js
@@ -8,11 +8,11 @@ function gotoThere(link) {
 
 $("#previous, #next").click(function(e) {
 	$("html").addClass("leaving");
-	setTimeout(gotoThere, 300, this.href);
+	setTimeout(gotoThere, 400, this.href);
 	return false;
 });
 
 $("#jumper").change(function() {
  	$("html").addClass("leaving");
-	setTimeout(gotoThere, 300, $(this).val());
+	setTimeout(gotoThere, 400, $(this).val());
 });
diff --git a/setup.php b/setup.php
@@ -13,7 +13,7 @@
 	$pageNames = array(
 		'1-intro.php'         => 'This is my <strong>amazing</strong> first slide',
 		'2-whatever.php'      => 'You like <strong>code</strong> don\'t you?',
-		'3-graphic.php'       => '...others do not.'
+		'3-graphic.php'       => 'Thank you <strong>very</strong> much.'
 	);
 
 

diff --git a/slides/1-intro.php b/slides/1-intro.php
@@ -5,9 +5,18 @@
 	include_once("../includes/header.php"); 
 ?>
 
-<div id="content">
+<div id="content" class="slide-1">
+
+	<section>
 
-	<!-- Slide content goes here -->
+		<blockquote>
+			Children and dogs are as necessary to the welfare of the country as Wall Street and the railroads.
+			<cite>- Harry S Truman</cite>
+		</blockquote>
+
+		<p><a href="http://www.flickr.com/photos/dotdoubledot/2208867228/">Photo by Sandy Redding</a></p>
+
+	</section>
 
 </div><!--content-->
 

diff --git a/slides/2-whatever.php b/slides/2-whatever.php
@@ -5,9 +5,25 @@
 	include_once("../includes/header.php"); 
 ?>
 
-<div id="content">
+<div id="content" class="slide-2">
+
+	<section>
 
-	<!-- Slide content goes here -->
+		<h3>CSS Gradient Text</h3>
+
+		<pre><code>h1 {
+  font-size: 60px;
+  background: -webkit-gradient(linear, 
+	left top, 
+	left bottom, 
+	from (#eee), 
+	to   (#333)
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}</code></pre>
+
+	</section>
 
 </div><!--content-->
 

diff --git a/slides/3-graphic.php b/slides/3-graphic.php
@@ -5,9 +5,13 @@
 	include_once("../includes/header.php"); 
 ?>
 
-<div id="content">
+<div id="content" class="slide-3">
+
+	<section>
 
-	<!-- Slide content goes here -->
+		<!-- Slide content goes here -->
+
+	</section>
 
 </div><!--content-->