Permalink
Browse files

tweaked slideshow

  • Loading branch information...
1 parent 8fd1356 commit c036ae91b598b0afaa3860f2bd4f62804a7d501e @bbelderbos committed Mar 20, 2012
Showing with 35 additions and 15 deletions.
  1. +2 −1 .gitignore
  2. +26 −7 css/style.css
  3. +4 −4 footer.html
  4. +1 −3 header.html
  5. +2 −0 js/scripts.js
View
@@ -1,2 +1,3 @@
+.htaccess
.DS_Store
-experiment/*/*
+experiment/*
View
@@ -12,8 +12,13 @@ h2 {
font-size: 1.5em;
}
#title {
- font-size: 1.2em;
- padding: 10px 5px;
+ float: right;
+ width: 364px;
+ color: #fff;
+ background-color: #666;
+ font-size: 1em;
+ padding: 3px 8px;
+ margin: 10px 5px;
}
h2#fbHeader {
color: #666;
@@ -46,11 +51,21 @@ input.tweet, #selectAll, .ckBoxStyle {
height: 15px;
}
.submit {
- background-color: #666;
color: #fff;
width: 140px;
border: none;
}
+.submit, #title {
+ background: #000; /* Old browsers */
+ background: -moz-linear-gradient(top, #000 0%, #666 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#666)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #000 0%,#666 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #000 0%,#666 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, #000 0%,#666 100%); /* IE10+ */
+ background: linear-gradient(top, #000 0%,#666 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#666',GradientType=0 ); /* IE6-9 */
+}
+
.submit:hover {
color: #000;
background-color: #ccc;
@@ -86,7 +101,7 @@ input.tweet, #selectAll, .ckBoxStyle {
clear: both;
margin: 4px;
}
-#twitter li, #twitter, #feedback, input, textarea, #slideshowWrapper {
+#twitter li, #twitter, #feedback, input, textarea, #slideshowWrapper, #title {
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
#twitter #tweets li {
@@ -128,11 +143,15 @@ input.tweet, #selectAll, .ckBoxStyle {
#slideshowWrapper {
border: 1px solid #eee;
- width: 950px; height: 280px;
- clear: both; margin: 20px auto;
+ width: 950px; height: 285px;
+ clear: both; margin: 40px auto;
+}
+#slideshow {
+ clear: both;
}
+
#footer {clear: both; width: 940px;
- margin: 50px auto 0 auto; padding: 10px 5px;
+ margin: 20px auto 0 auto; padding: 10px 5px;
border-top: 1px dashed #f1f1f1; }
#shareHome {position: absolute; top: 10px; right: 110px;
View
@@ -2,13 +2,13 @@
<?php if(!$_GET): ?>
<div id="slideshowWrapper">
- <h2>3 Simple Steps:</h2>
+ <h2 style="float: left;">It only takes 3 simple steps:</h2>
<div id="title"></div>
<div id="slideshow" class="pics">
<img src="img/step1.jpg" alt="Step 1: Choose the tweets for your digest" />
- <img src="img/step2.jpg" alt="Step 2: Copy the generated html to clipboard" />
- <img src="img/step3.jpg" alt="Step 2 (II): Other options you can copy over" />
- <img src="img/step4.jpg" alt="Step 3. Paste the html code in your blog post, here an example of my blog" />
+ <img src="img/step2.jpg" alt="Step 2: Copy the generated html to your clipboard" />
+ <img src="img/step3.jpg" alt="Step 2/2: Include/ copy over Javascript and/or hashtags" />
+ <img src="img/step4.jpg" alt="Step 3. Use the html code in your blog or site, for example:" />
</div>
</div>
<?php endif; ?>
View
@@ -24,16 +24,14 @@
<link rel="shortcut icon" href="img/ico_png.png" />
</head>
<body>
- <?php if(!$_GET): ?>
- <div id="fb-root"></div>
+ <div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=295206020548504";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
- <?php endif; ?>
<h1><a href="index.php" title="go home"><img src="img/banner.png" alt="Twitter Digest: an easy way to compile a digest of your latest tweets for export to your site or blog"></a></h1>
View
@@ -1,6 +1,8 @@
$(document).ready(function() {
$('#slideshow').cycle({
+ delay: 3000,
+ speed: 500,
before: onBefore
})

0 comments on commit c036ae9

Please sign in to comment.