Permalink
Browse files

Mobile first, and adding additional image

  • Loading branch information...
1 parent 2512ccf commit 8b717846f160bddea4388585d14b6c8f1aa8fdf0 @jakearchibald committed Dec 4, 2011
Showing with 58 additions and 27 deletions.
  1. +21 −6 css/base.css
  2. +37 −21 index.html
View
@@ -6,6 +6,10 @@ a {
color: #369;
text-decoration: none;
}
+img {
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+}
/* Gallery */
.gallery,
.gallery li {
@@ -32,21 +36,26 @@ a {
.gallery img {
vertical-align: middle;
display: block;
-
+ }
+/* Video intro */
+ .video-intro {
+ max-width: 100%;
+ }
+/* Cheap & tacky fade-in-when-loaded */
+ .js img {
+ opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
- .js .gallery img {
- opacity: 0;
- }
- .js .gallery img.loaded {
+ .js img.loaded {
opacity: 1;
}
/* Responsive stuff */
- .gallery-test {
+ .gallery-test,
+ .video-intro-test {
width: 1px;
}
@media all and (min-width: 640px) {
@@ -58,11 +67,17 @@ a {
width: 30%;
float: right;
}
+ .video-intro-test {
+ width: 2px;
+ }
}
@media all and (min-width: 926px) {
.gallery-test {
width: 2px;
}
+ .video-intro-test {
+ width: 3px;
+ }
.gallery a:link,
.gallery a:visited {
height: 240px;
View
@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Can’t Hug Every Cat</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
@@ -82,52 +83,52 @@
<ul class="gallery">
<li>
<a href="http://www.flickr.com/photos/jimmiehomeschoolmom/3037941702/">
- <img src="http://farm4.staticflickr.com/3251/3037941702_295f176804_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3251/3037941702_295f176804_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/aspis7/5335089843/">
- <img src="http://farm6.staticflickr.com/5210/5335089843_0fb074a82d_m.jpg" alt="">
+ <img src="http://farm6.staticflickr.com/5210/5335089843_0fb074a82d_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/crouchy69/2102378443/">
- <img src="http://farm3.staticflickr.com/2220/2102378443_de397a3812_m.jpg" alt="">
+ <img src="http://farm3.staticflickr.com/2220/2102378443_de397a3812_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/salim/2513167287/">
- <img src="http://farm3.staticflickr.com/2264/2513167287_396a2d26d2_m.jpg" alt="">
+ <img src="http://farm3.staticflickr.com/2264/2513167287_396a2d26d2_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/r_sykes/465083342/">
- <img src="http://farm1.staticflickr.com/178/465083342_1c7491e321_m.jpg" alt="">
+ <img src="http://farm1.staticflickr.com/178/465083342_1c7491e321_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/calliope/99406992/">
- <img src="http://farm1.staticflickr.com/19/99406992_e707b07e5c_m.jpg" alt="">
+ <img src="http://farm1.staticflickr.com/19/99406992_e707b07e5c_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/calliope/39922637/">
- <img src="http://farm1.staticflickr.com/25/39922637_5aaa73b10d_m.jpg" alt="">
+ <img src="http://farm1.staticflickr.com/25/39922637_5aaa73b10d_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/23975475@N04/3505555396/">
- <img src="http://farm4.staticflickr.com/3330/3505555396_337e060d47_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3330/3505555396_337e060d47_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/falcifer/5622229768/">
- <img src="http://farm6.staticflickr.com/5262/5622229768_43eacfe5d0_m.jpg" alt="">
+ <img src="http://farm6.staticflickr.com/5262/5622229768_43eacfe5d0_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/darkestivy/3138926194/">
- <img src="http://farm4.staticflickr.com/3287/3138926194_44ede02a8e_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3287/3138926194_44ede02a8e_s.jpg" alt="">
</a>
</li>
</ul>
@@ -144,52 +145,52 @@
<ul class="gallery">
<li>
<a href="http://www.flickr.com/photos/anna_debenham/2581322728/">
- <img src="http://farm4.staticflickr.com/3137/2581322728_8a26c96fbc_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3137/2581322728_8a26c96fbc_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/kingarthur10/2382169428/">
- <img src="http://farm4.staticflickr.com/3238/2382169428_a899e8801c_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3238/2382169428_a899e8801c_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/j_t_h/5804084357/">
- <img src="http://farm3.staticflickr.com/2565/5804084357_1477f75660_m.jpg" alt="">
+ <img src="http://farm3.staticflickr.com/2565/5804084357_1477f75660_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/meowr/4215656759/in/photostream/">
- <img src="http://farm3.staticflickr.com/2525/4215656759_3aa9f3e8ee_m.jpg" alt="">
+ <img src="http://farm3.staticflickr.com/2525/4215656759_3aa9f3e8ee_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/justinbaeder/4180899850/">
- <img src="http://farm3.staticflickr.com/2589/4180899850_832f62c0e4_m.jpg" alt="">
+ <img src="http://farm3.staticflickr.com/2589/4180899850_832f62c0e4_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/davezilla/3160376564/">
- <img src="http://farm4.staticflickr.com/3091/3160376564_6a6de301b6_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3091/3160376564_6a6de301b6_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/dolescum/3567895070/">
- <img src="http://farm4.staticflickr.com/3338/3567895070_1379546beb_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3338/3567895070_1379546beb_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/ampm/3481540500/">
- <img src="http://farm4.staticflickr.com/3313/3481540500_c846c62863_m.jpg" alt="">
+ <img src="http://farm4.staticflickr.com/3313/3481540500_c846c62863_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/lmmnfrsh/318274955/">
- <img src="http://farm1.staticflickr.com/125/318274955_5815cee446_m.jpg" alt="">
+ <img src="http://farm1.staticflickr.com/125/318274955_5815cee446_s.jpg" alt="">
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/a440/478903398/">
- <img src="http://farm1.staticflickr.com/217/478903398_8eed1af6aa_m.jpg" alt="">
+ <img src="http://farm1.staticflickr.com/217/478903398_8eed1af6aa_s.jpg" alt="">
</a>
</li>
</ul>
@@ -199,6 +200,11 @@
<aside role="complementary">
<h1>My favourite cat videos</h1>
+ <script class="video-intro-hide">document.write('<' + '!--')</script><noscript>
+ <a href="http://www.flickr.com/photos/major_clanger/3690964841/">
+ <img class="video-intro" src="http://farm3.staticflickr.com/2624/3690964841_3f157fa6ba_t.jpg" alt="">
+ </a>
+ </noscript><!---->
<article>
<a href="http://www.youtube.com/watch?v=fzzjgBAaWZw">
<h1>Stalking cat</h1>
@@ -262,12 +268,22 @@
responsiveGallery({
scriptClass: 'gallery-hide',
testClass: 'gallery-test',
- initialSuffix: '_m.jpg',
+ initialSuffix: '_s.jpg',
suffixes: {
'1': '_s.jpg',
'2': '_m.jpg'
}
});
+ responsiveGallery({
+ scriptClass: 'video-intro-hide',
+ testClass: 'video-intro-test',
+ initialSuffix: '_t.jpg',
+ suffixes: {
+ '1': '_t.jpg',
+ '2': '_m.jpg',
+ '3': '.jpg'
+ }
+ });
</script>
</body>
</html>

0 comments on commit 8b71784

Please sign in to comment.