Permalink
Browse files

Slide examples and cleanup

  • Loading branch information...
chriscoyier committed Mar 7, 2011
1 parent 0325c89 commit 5e8264d348997ae37c8e4c94ef99498d48971590
@@ -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 {
View
@@ -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;
+}
View
Binary file not shown.
View
Binary file not shown.
View
@@ -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>
View
@@ -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>
View
@@ -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());
});
View
@@ -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.'
);
View
@@ -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-->
View
@@ -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-->
View
@@ -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-->

0 comments on commit 5e8264d

Please sign in to comment.