minor style improvements, logo easter egg

_layouts/default.html

@@ -41,6 +41,30 @@
 		<h1><a href="http://leaflet.cloudmade.com">Leaflet</a></h1>
 		<h3 class="alt">An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
 
+		<div class="social-buttons">
+			<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="113px" height="20px"></iframe>
+
+			<!--<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="96px" height="20px"></iframe>-->
+
+			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade">Tweet</a>
+
+			<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
+			
+			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
+			<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&amp;layout=button_count&amp;show_faces=false&amp;width=430&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:87px; height:20px;" allowTransparency="true"></iframe>
+
+			<!--<div class="g-plusone" data-size="medium" data-href="http://leaflet.cloudmade.com/"></div>
+
+			<script type="text/javascript">
+			  (function() {
+			    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+			    po.src = 'https://apis.google.com/js/plusone.js';
+			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+			  })();
+			</script>-->
+		</div>
+
 		<ul class="nav clearfix">
 			<!-- <li><a class="cloudmade-link" href="http://cloudmade.com"></a></li> -->
 			<li>
@@ -97,31 +121,6 @@
 			<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub</a></li>
 		</ul>
 
-
-		<div class="social-buttons">
-			<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="113px" height="20px"></iframe>
-
-			<!--<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=CloudMade&amp;repo=Leaflet&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="96px" height="20px"></iframe>-->
-
-			<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://leaflet.cloudmade.com" data-text="Leaflet — an open-source JavaScript library for mobile-friendly interactive maps by @cloudmade" data-via="LeafletJS" data-related="CloudMade">Tweet</a>
-
-			<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
-			
-			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-
-			<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaflet.cloudmade.com&amp;layout=button_count&amp;show_faces=false&amp;width=430&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:87px; height:20px;" allowTransparency="true"></iframe>
-
-			<!--<div class="g-plusone" data-size="medium" data-href="http://leaflet.cloudmade.com/"></div>
-
-			<script type="text/javascript">
-			  (function() {
-			    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
-			    po.src = 'https://apis.google.com/js/plusone.js';
-			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
-			  })();
-			</script>-->
-		</div>
-
 		{{ content }}
 
 		<div class="footer">

docs/css/blueprint/screen.css

@@ -22,7 +22,7 @@ table, th, td {vertical-align:middle;}
 blockquote:before, blockquote:after, q:before, q:after {content:'';}
 blockquote, q {quotes:"" "";}
 a img {border:none;}
-:focus {outline:0;}
+/*:focus {outline:0;}*/
 
 /* typography.css */
 html {font-size:100.01%;}

docs/css/screen.css

@@ -30,7 +30,27 @@ h1 a {
 	margin-left: -10px;
 	margin-bottom: 8px;
 	text-decoration: none;
+
+	-webkit-transition: 0.8s all;
+
+	-webkit-animation-duration: 2s;
+	-webkit-animation-delay: 10s;
+	-webkit-animation-name: autumn;
+	-webkit-animation-iteration-count: 2;
+	-webkit-animation-direction: alternate;
 	}
+
+@-webkit-keyframes autumn {
+	from { -webkit-filter: none; }
+	to { -webkit-filter: hue-rotate(-70deg) saturate(2); }
+}
+
+h1 a:hover, h1 a:focus {
+	-webkit-filter: hue-rotate(-70deg) saturate(2);
+}
+
+
+
 h2 {
 	font-size: 1.8em;
 	font-weight: bold;
@@ -122,7 +142,7 @@ td {
 
 .nav {
 	padding: 0;
-	margin: 28px -13px 2.5em;
+	margin: 28px 0 2.5em;
 
 	list-style: none;
 	font-size: 1.2em;
@@ -131,9 +151,9 @@ td {
 
 	background-color: #ffffff;
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaebec)); /* Saf4+, Chrome */
-  background-image: -webkit-linear-gradient(top, #ffffff, #eaebec); /* Chrome 10+, Saf5.1+, iOS 5+ */
+	background-image: -webkit-linear-gradient(top, #ffffff, #eaebec); /* Chrome 10+, Saf5.1+, iOS 5+ */
-  background-image:    -moz-linear-gradient(top, #ffffff, #eaebec); /* FF3.6+ */
+	background-image:    -moz-linear-gradient(top, #ffffff, #eaebec); /* FF3.6+ */
-  background-image:      -o-linear-gradient(top, #ffffff, #eaebec); /* Opera 11.10+ */
+	background-image:      -o-linear-gradient(top, #ffffff, #eaebec); /* Opera 11.10+ */
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eff0f1'); /* IE6<45>IE9 */
 
 	border-radius: 10px;
@@ -144,6 +164,7 @@ td {
 	-moz-box-shadow: 0 0 8px #eee;
 	-webkit-box-shadow: 0 0 8px #eee;
 	}
+
 	.nav li a, .nav li span {
 		float: left;
 		padding: 0 13px;
@@ -161,31 +182,21 @@ td {
 	.nav li span {
 		color: #000;
 
-		background-color: #f8f9fa;
+		background-color: #e8e9ea;
-		background-image: -moz-linear-gradient(top, #f8f9fa, #d4d5d6);
+		background-color: #f3f4f5;
-		background-image: -o-linear-gradient(top, #f8f9fa, #d4d5d6);
+		background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f4f5), to(#cacbcc)); /* Saf4+, Chrome */
-		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f9fa),color-stop(1, #d4d5d6));
+		background-image: -webkit-linear-gradient(top, #f3f4f5, #cacbcc); /* Chrome 10+, Saf5.1+, iOS 5+ */
-		background-image: -webkit-linear-gradient(#f8f9fa, #d4d5d6);
+		background-image:    -moz-linear-gradient(top, #f3f4f5, #cacbcc); /* FF3.6+ */
-		background-image: linear-gradient(top, #f8f9fa, #d4d5d6);
+		background-image:      -o-linear-gradient(top, #f3f4f5, #cacbcc); /* Opera 11.10+ */
 		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f9fa', EndColorStr='#d4d5d6');
 	}
-	.nav li a:hover {
+	.nav li a:hover, .nav li a:focus {
 		color: black;
 
 		background-color: rgba(0,0,0,0.03);
 		
 		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8');
 	}
-	.nav li a.github-link {
-		background-image: url(../images/github.png); 
-		}
-	.nav li a.twitter-link {
-		background-image: url(../images/twitter.png);
-		}
-	.nav li a.forum-link {
-		padding-right: 12px;
-		background-image: url(../images/forum.png);
-	}
 	.nav li a.github-link,
 	.nav li a.twitter-link,
 	.nav li a.forum-link {
@@ -197,8 +208,20 @@ td {
 		padding-left: 30px;
 		padding-right: 10px;
 		filter: none;
-		background-position: 10px 12px;
+		background-position: 9px 12px;
 		}
+	.nav li a.github-link {
+		background-image: url(../images/github.png);
+		background-position: 10px 12px;
+		padding-left: 32px;
+		}
+	.nav li a.twitter-link {
+		background-image: url(../images/twitter.png);
+		}
+	.nav li a.forum-link {
+		padding-right: 12px;
+		background-image: url(../images/forum.png);
+	}
 	.nav li a.github-link:hover,
 	.nav li a.twitter-link:hover,
 	.nav li a.forum-link:hover {
@@ -210,10 +233,21 @@ td {
 	top: 0;
 	right: 0;
 	border: 0;
-	opacity: 0.4;
+	opacity: 0.3;
+
+	-webkit-filter: blur(1px);
+	-webkit-transform: scale(0.8);
+	-webkit-transform-origin: 100% 0;
+
+	-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
+     -moz-transition: all 0.3s ease-out;  /* FF4+ */
+       -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
+          transition: all 0.3s ease-out;
 	}
-a:hover #forkme {
+a:hover #forkme, a:focus #forkme {
 	opacity: 1;
+	-webkit-filter: none;
+	-webkit-transform: scale(1);
 	}
 
 #toc {