Skip to content

Commit

Permalink
Mobile first, and adding additional image
Browse files Browse the repository at this point in the history
  • Loading branch information
@jakearchibald
jakearchibald committed Dec 4, 2011
1 parent 2512ccf commit 8b71784
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 27 deletions.
27 changes: 21 additions & 6 deletions css/base.css
View file
Expand Up @@ -6,6 +6,10 @@ a {
color: #369;
text-decoration: none;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
/* Gallery */
.gallery,
.gallery li {
Expand All @@ -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) {
Expand All @@ -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;
Expand Down
58 changes: 37 additions & 21 deletions index.html
View file
Expand Up @@ -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">
Expand Down Expand Up @@ -82,52 +83,52 @@ <h1>Cats Asleep</h1>
<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>
Expand All @@ -144,52 +145,52 @@ <h1>Cats not asleep</h1>
<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>
Expand All @@ -199,6 +200,11 @@ <h1>Cats not asleep</h1>

<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>
Expand Down Expand Up @@ -262,12 +268,22 @@ <h1>Cat gets angry and stands up</h1>
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.