Mercurial > mozilla-the-big-picture

annotate mbp.html @ 37:ddab6ae20001

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
author Atul Varma <varmaa@toolness.com>
date Fri, 11 Dec 2009 16:18:38 -0800
parents 9c34b211740a
children 496e8bb45290
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
1 <html>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
2 <head>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
3 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
4 <base target="_blank" />
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
5 <link rel="stylesheet" type="text/css" media="all"
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
6 href="mbp.css" />
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
7 <title>Mozilla: The Big Picture</title>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
8 </head>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
9 <body>
33
66b3a6fcd3b8 Replaced local jquery.js with google cdn version.
Atul Varma <varmaa@toolness.com>
parents: 27
diff changeset
10 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
27
7b2058439e99 moved js to the top
Atul Varma <varmaa@toolness.com>
parents: 24
diff changeset
11 <script src="mbp.js"></script>
13
317fba5f0d11 Added header and 'countdown' timer as images load.
Atul Varma <varmaa@toolness.com>
parents: 11
diff changeset
12 <div id="countdown"></div>
8
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
13 <div id="container" style="display: none;">
13
317fba5f0d11 Added header and 'countdown' timer as images load.
Atul Varma <varmaa@toolness.com>
parents: 11
diff changeset
14 <h1>mozilla: the big picture</h1>
8
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
15 <div class="mbp-entry">
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
16 <a class="link"
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
17 href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
18 <img width="580" height="647"
8
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
19 src="http://creative.mozilla.org/images/designs/0/346/346_lg.jpg"
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
20 style="clip: rect(136, 375, 261, 250);"/>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
21 </a>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
22 <div class="title">Pocketfox</div>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
23 <div class="date">11.6.09</div>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
24 <div class="caption">Yaroslaff Chekunov's winning entry for the
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
25 Mozilla Creative Collective's “Firefox Goes Mobile” Design Challenge
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
26 is now the official emblem for the upcoming mobile version of
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
27 Firefox.</div>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
28 </div>
10
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
29 <div class="mbp-entry">
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
30 <a class="link"
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
31 href="http://www.flickr.com/photos/nois3lab/4088072729/in/set-72157622640597827/">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
32 <img width="3720" height="2480"
10
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
33 src="http://farm3.static.flickr.com/2567/4088072729_0286a1611c_o.jpg"/>
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
34 <img width="500" height="333"
10
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
35 src="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513.jpg"
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
36 style="clip: rect(36, 293, 160, 169);"/>
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
37 </a>
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
38 <div class="title">Colosseo</div>
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
39 <div class="date">11.8.09</div>
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
40 <div class="caption">In this bold entry to the “Light the World
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
41 with Firefox” campaign, community members in Rome illuminated one of
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
42 the world's most venerated buildings.</div>
acef8b34542f added 'colloseo' entry
Atul Varma <varmaa@toolness.com>
parents: 8
diff changeset
43 </div>
11
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
44 <div class="mbp-entry">
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
45 <a class="link"
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
46 href="http://www.flickr.com/photos/rogeliocalamaya/4090865406/">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
47 <img width="663" height="848"
11
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
48 src="http://farm3.static.flickr.com/2778/4090865406_2cc961098e_o.jpg"/>
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
49 <img width="391" height="500"
11
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
50 src="http://farm3.static.flickr.com/2778/4090865406_76ed2868d9.jpg"
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
51 style="clip: rect(163, 240, 290, 113);"/>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
52 </a>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
53 <div class="title">Birthday</div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
54 <div class="date">11.9.09</div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
55 <div class="caption">Rogelio Calamaya's entry in the “Five Years of
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
56 Firefox” design challenge.</div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
57 </div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
58 <div class="mbp-entry">
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
59 <a class="link"
22
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
60 href="http://antennasoft.net/robcee/2009/11/12/firebug-1-5-new-features-revealed/">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
61 <img width="749" height="401"
22
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
62 src="http://farm3.static.flickr.com/2527/4098694166_44025231d6_o.png"
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
63 style="clip: rect(141, 133, 270, 4);"/>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
64 </a>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
65 <div class="title">Break</div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
66 <div class="date">11.12.09</div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
67 <div class="caption">Rob Campbell shows off Firebug's new
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
68 Break-on-XHR feature: “This is what happens when you tell Amazon
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
69 you're not interested in the Beatles.” </div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
70 </div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
71 <div class="mbp-entry">
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
72 <a class="link"
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
73 href="http://www.womoz.org/blog/?p=142">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
74 <img width="420" height="300"
22
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
75 src="http://womoz.org/wiki/lib/exe/fetch.php?cache=&media=logos:logo9.jpg"
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
76 style="clip: rect(48, 255, 250, 53);"/>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
77 </a>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
78 <div class="title">WoMoz</div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
79 <div class="date">11.19.09</div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
80 <div class="caption">Anamaria Stoica's submission was chosen as the new
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
81 logo for the Women &amp; Mozilla project.</div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
82 </div>
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
83 <div class="mbp-entry">
598f114aa96d rearranged entries in chronological order
Atul Varma <varmaa@toolness.com>
parents: 21
diff changeset
84 <a class="link"
11
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
85 href="http://blog.stephenhorlander.com/2009/11/20/sketch-day/">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
86 <img width="1172" height="906"
11
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
87 src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-large.jpg"/>
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
88 <img width="490" height="375"
11
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
89 src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-small.jpg"
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
90 style="clip: rect(16, 206, 197, 25);"/>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
91 </a>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
92 <div class="title">Sketch Day</div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
93 <div class="date">11.20.09</div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
94 <div class="caption">Stephen Horlander, visual designer extraordinaire,
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
95 sketches his thoughts on how a future version of Firefox may look
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
96 and feel.</div>
be1b9f573d9c added 'birthday' and 'sketch day' entries
Atul Varma <varmaa@toolness.com>
parents: 10
diff changeset
97 </div>
19
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
98 <div class="mbp-entry">
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
99 <a class="link"
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
100 href="http://www.azarask.in/blog/post/identity-in-the-browser-firefox/">
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
101 <img width="1000" height="1500"
19
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
102 src="http://farm3.static.flickr.com/2552/4128966575_9876fdb834_o.png"
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
103 style="clip: rect(411, 720, 573, 558);"/>
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
104 </a>
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
105 <div class="title">Identity</div>
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
106 <div class="date">11.24.09</div>
20
f9078818aa35 added 'break'
Atul Varma <varmaa@toolness.com>
parents: 19
diff changeset
107 <div class="caption">Aza Raskin, Mozilla's Head of User Experience,
f9078818aa35 added 'break'
Atul Varma <varmaa@toolness.com>
parents: 19
diff changeset
108 mocks up potential integrations of identity management directly into
f9078818aa35 added 'break'
Atul Varma <varmaa@toolness.com>
parents: 19
diff changeset
109 the browser.</div>
19
c015fca1d96f added 'identity'
Atul Varma <varmaa@toolness.com>
parents: 13
diff changeset
110 </div>
8
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
111 </div>
24
cbaef654b9da show full-size image on mouseover of thumbnail. increase darkness of countdown text.
Atul Varma <varmaa@toolness.com>
parents: 22
diff changeset
112 <br/>
37
ddab6ae20001 The best image for display is now chosen dynamically based on display resolution, rather than depending on the large/small CSS class metadata.
Atul Varma <varmaa@toolness.com>
parents: 35
diff changeset
113 <div id="big-picture"></div>
8
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
114 </body>
cd71f59b38f4 Added initial mozilla: the big picture page.
Atul Varma <varmaa@toolness.com>
parents:
diff changeset
115 </html>