From 47308176ff4584416f2e5bb5f5cb6ea6f286e679 Mon Sep 17 00:00:00 2001
From: mourner <agafonkin@gmail.com>
Date: Tue, 14 Feb 2012 14:21:20 +0200
Subject: [PATCH] improve main example and wording on index/features, use a
 better OSM copyright

---
 docs/css/screen.css | 103 ++++++++++++++++++++++++--------------------
 features.html       |   4 +-
 index.html          |  27 ++++++------
 reference.html      |   1 +
 4 files changed, 74 insertions(+), 61 deletions(-)

diff --git a/docs/css/screen.css b/docs/css/screen.css
index c7fa71c5..6006b2ea 100644
--- a/docs/css/screen.css
+++ b/docs/css/screen.css
@@ -4,18 +4,18 @@ body {
 
 .container {
 	background: white;
-	
+
 	padding: 15px 40px 20px;
 	width: 790px;
-	
+
 	border: 1px solid #dfdfdf;
 	border-top: 0;
-	
+
 	box-shadow: 0 0 40px #e0e0e0;
 	-moz-box-shadow: 0 0 40px #e0e0e0;
 	-webkit-box-shadow: 0 0 40px #e0e0e0;
 	}
-	
+
 h1 {
 	display: block;
 	height: 0;
@@ -36,7 +36,7 @@ h2 {
 	background: #edeeef;
 	border-right: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
-	
+
 	color: white;
 
 	background-color: #b0de5c;
@@ -45,12 +45,12 @@ h2 {
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#b0de5c), to(#82cb00)); /* Saf4+, Chrome */
 	background-image: -webkit-linear-gradient(top, #b0de5c, #82cb00); /* Chrome 10+, Saf5.1+ */
 	background-image: linear-gradient(top, #b0de5c, #82cb00);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00'); /* IE6–IE9 */
-            
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#b0de5c', EndColorStr='#82cb00'); /* IE6�IE9 */
+
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 	-webkit-border-radius: 5px;
-	
+
 	text-shadow: -1px -1px 0 #999;
 	}
 h3 {
@@ -72,7 +72,7 @@ h3.alt {
 	font-style: italic;
 	font-weight: normal;
 	}
-	
+
 code {
 	font-family: "Courier New", monospace;
 	}
@@ -81,17 +81,17 @@ code {
 	border: 1px solid #ccc;
 	background: white;
 	color: #444;
-	
+
 	box-shadow: 0 0 15px #ddd;
 	-moz-box-shadow: 0 0 15px #ddd;
 	-webkit-box-shadow: 0 0 15px #ddd;
 	}
-	
-table { 
-	border-collapse: collapse; 
+
+table {
+	border-collapse: collapse;
 	}
-th { 
-	background:/*#e5ecf9;*/ #f3f3f3; 
+th {
+	background:/*#e5ecf9;*/ #f3f3f3;
 	}
 th, td {
 	padding: 4px 5px;
@@ -101,24 +101,24 @@ th, td {
 .nav {
 	padding: 0;
 	margin: 2em 0;
-	
+
 	list-style: none;
 	font-size: 1.2em;
 	border: 1px solid #dcddde;
 	overflow: hidden;
-	
+
 	background-color: #ffffff;
 	background-image: -moz-linear-gradient(top, #ffffff, #eff0f1); /* FF3.6 */
 	background-image: -o-linear-gradient(top, #ffffff, #eff0f1); /* Opera 11.10+ */
 	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #eff0f1)); /* Saf4+, Chrome */
 	background-image: -webkit-linear-gradient(#ffffff, #eff0f1); /* Chrome 10+, Saf5.1+ */
 	background-image: linear-gradient(top, #ffffff, #eff0f1);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eff0f1'); /* IE6–IE9 */
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eff0f1'); /* IE6�IE9 */
 
 	border-radius: 10px;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
-	
+
 	box-shadow: 0 0 8px #eee;
 	-moz-box-shadow: 0 0 8px #eee;
 	-webkit-box-shadow: 0 0 8px #eee;
@@ -136,23 +136,23 @@ th, td {
 		color: #000;
 
 		background-color: #f8f9fa;
-		background-image: -moz-linear-gradient(top, #f8f9fa, #d4d5d6); 
-		background-image: -o-linear-gradient(top, #f8f9fa, #d4d5d6); 
-		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f9fa),color-stop(1, #d4d5d6)); 
-		background-image: -webkit-linear-gradient(#f8f9fa, #d4d5d6); 
+		background-image: -moz-linear-gradient(top, #f8f9fa, #d4d5d6);
+		background-image: -o-linear-gradient(top, #f8f9fa, #d4d5d6);
+		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f9fa),color-stop(1, #d4d5d6));
+		background-image: -webkit-linear-gradient(#f8f9fa, #d4d5d6);
 		background-image: linear-gradient(top, #f8f9fa, #d4d5d6);
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f9fa', EndColorStr='#d4d5d6'); 
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f9fa', EndColorStr='#d4d5d6');
 	}
 	.nav li a:hover {
 		color: black;
-				
+
 		background-color: #eff0f1;
-		background-image: -moz-linear-gradient(top, #eff0f1, #f6f7f8); 
-		background-image: -o-linear-gradient(top, #eff0f1, #f6f7f8); 
-		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eff0f1),color-stop(1, #f6f7f8)); 
-		background-image: -webkit-linear-gradient(#eff0f1, #f6f7f8); 
+		background-image: -moz-linear-gradient(top, #eff0f1, #f6f7f8);
+		background-image: -o-linear-gradient(top, #eff0f1, #f6f7f8);
+		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eff0f1),color-stop(1, #f6f7f8));
+		background-image: -webkit-linear-gradient(#eff0f1, #f6f7f8);
 		background-image: linear-gradient(top, #eff0f1, #f6f7f8);
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8'); 
+		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eff0f1', EndColorStr='#f6f7f8');
 	}
 	.nav li a.github-link,
 	.nav li a.twitter-link {
@@ -177,18 +177,18 @@ th, td {
 	.nav li a.twitter-link {
 		background: url(http://twitter.com/phoenix/favicon.ico) 15px 12px no-repeat;
 		}
-	
+
 #forkme {
-	position: absolute; 
-	top: 0; 
-	right: 0; 
+	position: absolute;
+	top: 0;
+	right: 0;
 	border: 0;
 	opacity: 0.4;
 	}
 a:hover #forkme {
 	opacity: 1;
 	}
-	
+
 #toc {
 	padding-left: 20px;
 	}
@@ -199,14 +199,14 @@ a:hover #forkme {
 	#toc .colborder {
 		padding-right: 14px;
 		}
-		
+
 #map-class {
 	margin-top: 1em;
 	}
 a.nodocs {
 	color: #bbb;
 	}
-	
+
 #features {
 	margin-top: -1.5em;
 	}
@@ -216,27 +216,38 @@ a.nodocs {
 	.noimpl {
 		color: #bbb;
 		}
-		
+
 #map {
 	height: 300px;
 	border: 1px solid #ccc;
 	margin-bottom: 20px;
-	
-	/*box-shadow: 0px 0px 10px #ccc; 
-	-moz-box-shadow: 0px 0px 10px #ccc; 
-	-webkit-box-shadow: 0px 0px 10px #ccc;*/ 
+
+	/*box-shadow: 0px 0px 10px #ccc;
+	-moz-box-shadow: 0px 0px 10px #ccc;
+	-webkit-box-shadow: 0px 0px 10px #ccc;*/
 	}
-	
+
 h3 span {
 	color: #888;
 	}
-	
+
 .example-img {
-	float: left; 
+	float: left;
 	margin: 0 18px 18px 0;
 	padding: 1px;
 	}
 .bordered-img {
 	padding: 0;
 	border: 1px solid #ddd;
-	}
\ No newline at end of file
+	}
+
+.text-cut[class] {
+	font-size: 0;
+	color: white;
+}
+
+.text-cut:after {
+	content: attr(data-cut);
+	font-size: 12px;
+	color: #777;
+}
diff --git a/features.html b/features.html
index 89d6c2af..765822ab 100644
--- a/features.html
+++ b/features.html
@@ -136,8 +136,8 @@
 		 		</ul>
 				<h4>On mobile</h4>
 		 		<ul>
-		 			<li>Safari for iOS 3/4+</li>
-					<li>WebKit for Android 2.2+</li>
+		 			<li>Safari for iOS 3/4/5+</li>
+					<li>WebKit for&nbsp;Android 2.2+,&nbsp;3.1+,&nbsp;4+</li>
 					<li class="noimpl">webOS browser</li>
 					<li class="noimpl">Blackberry 6+</li>
 					<li class="noimpl">Windows Phone 7</li>
diff --git a/index.html b/index.html
index 2c490029..ef6413f2 100644
--- a/index.html
+++ b/index.html
@@ -55,14 +55,14 @@
 		</p>
 
 		<!-- <h3>About the library</h3> -->
-		<p>Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for <em>both desktop and mobile</em> web browsers, developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API.</p>
-		<p>It is built from the ground up to work efficiently and smoothly on both platforms, utilizing cutting-edge technologies included in HTML5. Its top priorities are usability, performance, small size, <a href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand. Find out more on the <a href="features.html">features</a> page.</p>
+		<p>Leaflet is a modern, lightweight open-source JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by <a href="http://cloudmade.com">CloudMade</a> to form the core of its next generation JavaScript API. Weighting just about 21kb of gzipped JS code, it still has all the <a href="features.html">features</a> you will ever need for you web mapping needs while providing a fast, smooth, pleasant user experience.</p>
+		<p>It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, utilizing cutting-edge technologies included in HTML5 and CSS3, focusing on usability, performance, small size, <a href="http://developer.yahoo.com/yui/articles/gbs/">A-grade</a> browser support, flexibility and easy to use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.</p>
 
 		<h3>Basic usage example</h3>
 		<div id="map"></div>
 		<script>
 			var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-				cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+				cloudmadeAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>',
 				cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
 
 			var map = new L.Map('map');
@@ -74,17 +74,18 @@
 			marker.bindPopup('A pretty CSS3 popup.<br />Easily customizable.').openPopup();
 		</script>
 
-		<p>Here we create a map with a CloudMade tile layer, add a marker and bind a popup with some text to it:</p>
-		<pre><code class="javascript">// create a CloudMade tile layer
-var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
-	cloudmadeAttribution = 'Map data &amp;copy; 2011 OpenStreetMap contributors, Imagery &amp;copy; 2011 CloudMade',
-	cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
-
-// initialize the map on the "map" div
+		<p>Here we create a map with tiles of our choice, add a marker and bind a popup with some text to it:</p>
+		<pre><code class="javascript">// initialize the map on the "map" div
 var map = new L.Map('map');
 
-// set the map view to a given center and zoom and add the CloudMade layer
-map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
+// create a CloudMade tile layer (or use other provider of your choice)
+var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/<span class="text-cut" data-cut="[your-API-key]">YOUR-API-KEY</span>/997/256/{z}/{x}/{y}.png', {
+	attribution: 'Map data &amp;copy; <span class="text-cut" data-cut="[&hellip;]">&lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery &copy; &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;</span>',
+	maxZoom: 18
+});
+
+// add the CloudMade layer to the map set the view to a given center and zoom
+map.addLayer(cloudmade).setView(new L.LatLng(51.505, -0.09), 13);
 
 // create a marker in the given location and add it to the map
 var marker = new L.Marker(new L.LatLng(51.5, -0.09));
@@ -97,7 +98,7 @@ marker.bindPopup("A pretty CSS3 popup.&lt;br /&gt;Easily customizable.").openPop
 
 		<h3>Contributing to Leaflet</h3>
 		<p>The project is <a href="http://github.com/CloudMade/Leaflet">hosted on GitHub</a>, waiting for your contributions — just send your pull requests to <a href="http://github.com/mourner">Vladimir Agafonkin</a> (Leaflet maintainer). Let's make the best library for maps that can possibly exist! </p>
-		<p>You can also help the project a lot by reporting bugs and discussing features on the <a href="http://github.com/CloudMade/Leaflet/issues">issues page</a> or tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a>.
+		<p>You can also help the project a lot by reporting bugs and discussing features on the <a href="http://github.com/CloudMade/Leaflet/issues">issues page</a>, tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a> or joining the <a href="https://groups.google.com/group/leaflet-js">Leaflet&nbsp;mailing&nbsp;list</a>.
 
 		<hr />
 		<p class="quiet">&copy; 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data &copy; 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
diff --git a/reference.html b/reference.html
index ddfcd59a..fcbfc238 100644
--- a/reference.html
+++ b/reference.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
 	<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Documentation</title>