TOUT §!

Calvein · Apr 27, 2011 · 2485b19 · 2485b19
1 parent ec68e8e
commit 2485b19
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 128 deletions.
diff --git a/README b/README
diff --git a/css/style.css b/css/style.css
@@ -64,7 +64,7 @@ input, select { vertical-align: middle; }
  */
 
 body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
-select, input, textarea, button { font:99% sans-serif; }
+select, input, textarea, button { font:99%; }
 
 /* Normalize monospace sizing:
    en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
@@ -179,6 +179,7 @@ body {
 	width: 1000px;
 	margin: 0 auto;
 	background: #00101D url(http://www.steaw-webdesign.com/wp-content/themes/steaw-wd/hab/wall.jpg) no-repeat top center;
+	font-family: Georgia, Constantina, 'Nimbus Roman No9 L', serif;
 }
 
 header {
@@ -187,21 +188,17 @@ header {
 }
 
 .logo {
-	background: url(../img/logo.png) no-repeat top left;
 	display: block;
+	position: absolute;	
 	height: 140px;
+	width: 120px;
+	top: 8px;
 	left: 10px;
 	overflow: hidden;
-	position: absolute;
-	text-indent: -290486px;
-	top: 8px;
-	width: 120px;
 }
 
-.logo a {
-	display: block;
-	height: 140px;
-	width: 120px;
+.logo img {
+	display: none;
 }
 
 .description {
@@ -212,76 +209,32 @@ header {
 	line-height: 20px;
 	position: absolute;
 	top: 120px;
-
-	font-family: 'Georgia', serif;
 	font-weight: normal;
 }
 
-.nav {
-	border-bottom: 1px solid #042F49;
-	bottom: 25px;
-	font-family: Arial,Verdana,sans-serif;
-	font-weight: bold;
+hr {
 	position: absolute;
+	width: 370px;
+	margin: 0 20px 0 0;
+	bottom: 25px;
 	right: 0;
-	text-transform: uppercase;
-	margin-right: 20px;
-
-	width: 460px;
-}
-
-.nav li {
-	display: inline;
-}
-
-.nav a {
-	border-bottom: 1px solid #042F49;
-	color: #899EAB;
-	float: right;
-	height: 20px;
-	line-height: 20px;
-	margin-left: 50px;
-	padding-bottom: 10px;
-	position: relative;
-	right: 0;
-	top: 1px;
-
-	font-size: 14px;
-	text-decoration: none;	
-}
-
-.nav a.on {
-	border-bottom-width: 5px;
-	color: white;
-	padding-bottom: 6px;
-	text-decoration: none;
-}
-
-.nav a:hover, .nav a:focus {
-	border-bottom-width: 5px;
-	color: white;
-	padding-bottom: 6px;
-	text-decoration: none;
-
-	outline: none;
+	border: 1px solid #042F49;
+	border-width: 0 0 1px;
 }
 
-
 /**
  * Slideshow
  */
 
-section {
+#slides-container {
 	position: relative;
-	width: 960px;
-	height: 380px;
-	padding: 20px;
 }
 
 #slides {
+	position: relative;
 	width: 960px;
 	height: 380px;
-	position: relative;
+	margin: 20px auto;
 	-webkit-perspective: 800;
 	-moz-perspective: 800;
 	-ms-perspective: 800;
@@ -292,6 +245,7 @@ section {
 	-ms-perspective-origin: center right;
 	-o-perspective-origin: center right;
 	perspective-origin: center right;
+	overflow: hidden;
 }
 
 .slide {
@@ -304,7 +258,6 @@ section {
 	-ms-transition: -ms-transform .7s;
 	-o-transition: -o-transform .7s;
 	transition: transform .7s;
-	font-family: Georgia, Constantina, 'Nimbus Roman No9 L', serif;
 }
 
 .slide a {
@@ -345,15 +298,16 @@ section {
 
 .slide figcaption {
 	display: none;
+	padding-left: 15px;
 	-webkit-transition: all .3s;
+	-moz-transition: all .3s;
+	-ms-transition: all .3s;
+	-o-transition: all .3s;
+	transition: all .3s;
 }
 
 .slide.active figcaption {
 	display: block;
-	position: absolute;
-	width: 100%;
-	bottom: 85px;
-	left: 15px;
 }
 
 .slide a:hover figcaption, .slide a:focus figcaption {
@@ -364,7 +318,7 @@ section {
 button {
 	display: block;
 	position: absolute;
-	bottom: 94px;
+	bottom: 75px;
 	right: 45px;
 	padding: 0;
 	margin: 0;
@@ -378,6 +332,19 @@ button {
 	-webkit-touch-callout: none;
 }
 
+button:active {
+	outline: none;
+	bottom: 74px;	
+}
+
+a {
+	position: relative;
+}
+
+a:active {
+	top: 1px;
+}
+
 /**
  * Non-semantic helper classes: please define your styles before this section.
  */

diff --git a/img/kitty-1.jpg b/img/kitty-1.jpg
diff --git a/img/kitty-2.jpg b/img/kitty-2.jpg
diff --git a/img/kitty-3.jpg b/img/kitty-3.jpg
diff --git a/img/kitty-4.jpg b/img/kitty-4.jpg
diff --git a/img/kitty-5.jpg b/img/kitty-5.jpg
diff --git a/img/kitty-6.jpg b/img/kitty-6.jpg
diff --git a/img/kitty-7.jpg b/img/kitty-7.jpg
diff --git a/img/kitty-8.jpg b/img/kitty-8.jpg
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -15,67 +15,70 @@
 
 	<link rel="stylesheet" href="css/style.css">
 
-	<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
+	<script src="js/modernizr-1.7.min.js"></script>
 </head>
 <body>
 	<header>
-		<p class="logo"><a href="http://www.steaw-webdesign.com">Steaw Web Design – webdesign</a></p>
-		<h1 class="description">CSS 3D slideshow by <a href="http://twitter.com/calvein">Calvein</a> - original in flash by <a href="http://www.steaw-webdesign.com/">Steaw</a></h1>
-		<ul class="nav">
-			<li><a href="#">Tout</a></li>
-			<li><a href="#">Du</a></li>
-			<li><a href="#" class="on">Rien</a></li>
-		</ul>
+		<a href="http://www.steaw-webdesign.com" class="logo"><img src="http://www.steaw-webdesign.com/wp-content/themes/steaw-wd/hab/logo.png" alt="Steaw Web Design – webdesign"></a>
+		<h1 class="description">CSS 3D slideshow by <a href="http://twitter.com/calvein">Calvein</a> - original in flash by <a href="http://www.steaw-webdesign.com/">Steaw</a>. Get <a href="https://github.com/Calvein/CSS-3D-Slideshow">the code!</a></a></h1>
+		<hr>
 	</header>
 
-	<section>
+	<div id="slides-container">
 		<div id="slides">
 			<figure class="slide active invisible">
 				<a href="#1">
-					<img src="http://placekitten.com/460/260">
-					<figcaption>1 test test test test</figcaption>
+					<img src="img/kitty-1.jpg" alt="KITTY">
+					<figcaption>First kitty</figcaption>
 				</a>
 			</figure>
 			<figure class="slide invisible">
 				<a href="#2">
-					<img src="http://placekitten.com/g/460/260">
-					<figcaption>2 test test test test</figcaption>
+					<img src="img/kitty-2.jpg" alt="KITTY">
+					<figcaption>Second kitty</figcaption>
 				</a>
 			</figure>
 			<figure class="slide invisible">
 				<a href="#3">
-					<img src="http://placekitten.com/460/260">
-					<figcaption>3 test test test test</figcaption>
+					<img src="img/kitty-3.jpg" alt="KITTY">
+					<figcaption>Third kitty</figcaption>
 				</a>
 			</figure>
 			<figure class="slide invisible">
 				<a href="#4">
-					<img src="http://placekitten.com/g/460/260">
-					<figcaption>4 test test test test</figcaption>
+					<img src="img/kitty-4.jpg" alt="KITTY">
+					<figcaption>Fourth kitty</figcaption>
 				</a>
 			</figure>
 			<figure class="slide invisible">
 				<a href="#5">
-					<img src="http://placekitten.com/460/260">
-					<figcaption>5 test test test test</figcaption>
+					<img src="img/kitty-5.jpg" alt="KITTY">
+					<figcaption>Sixth kitty</figcaption>
 				</a>
 			</figure>
 			<figure class="slide invisible">
 				<a href="#6">
-					<img src="http://placekitten.com/g/460/260">
-					<figcaption>6 test test test test</figcaption>
+					<img src="img/kitty-6.jpg" alt="KITTY">
+					<figcaption>Seventh kitty</figcaption>
 				</a>
 			</figure>
 			<figure class="slide invisible">
 				<a href="#7">
-					<img src="http://placekitten.com/460/260">
-					<figcaption>7 test test test test</figcaption>
+					<img src="img/kitty-7.jpg" alt="KITTY">
+					<figcaption>Eighth kitty</figcaption>
+				</a>
+			</figure>
+			<figure class="slide invisible">
+				<a href="#8">
+					<img src="img/kitty-8.jpg" alt="KITTY">
+					<figcaption>8 kitty</figcaption>
 				</a>
 			</figure>
 		</div>
 		<button>▶</button>
-	</section>
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
+	</div>
+	<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>-->
+	<script src="http://code.jquery.com/jquery-1.6rc1.js"></script>
 	<script src="js/script.js"></script>
 </body>
 </html>
diff --git a/js/modernizr-1.7.min.js b/js/modernizr-1.7.min.js