Merge pull request #3578 from Leaflet/redesign

Website Redesign
2015-07-01 18:25:18 +03:00 · 2015-07-01 18:25:18 +03:00 · 3d5b8ec393
commit 3d5b8ec393
parent 461f497905 e238451684
37 changed files with 2538 additions and 644 deletions
--- a/.gitignore
+++ b/.gitignore
@ -9,6 +9,5 @@ _site
 _site
 coverage/
 *.js.html
-index.html
 .mailmap
 Gemfile.lock
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -21,7 +21,7 @@

 	{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{% endcapture %}

-	<link rel="icon" type="image/png" href="{{ root }}docs/images/favicon.png" />
+	<link rel="shortcut icon" type="image/x-icon" href="{{ root }}docs/images/favicon.ico" />

 	<link href="http://leafletjs.com/atom.xml" type="application/atom+xml" rel="alternate" title="Leaflet Dev Blog Atom Feed" />

--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -1,7 +1,8 @@
 ---
-layout: default
+layout: v2
 root: ../../../
 post: true
+bodyclass: post-page
 ---

 <p><a href="../../../blog.html">&larr; Back to the list of blog posts</a></p>
--- a/_layouts/tutorial.html
+++ b/_layouts/tutorial.html
@ -1,9 +1,9 @@
 ---
-layout: default
+layout: v2
 root: ../
 tutorial: true
 ---

-<p><a href="../examples.html">&larr; Back to the list of tutorials</a></p>
+<p class="tutorials-back"><a href="../examples.html">&larr; Tutorials</a></p>

 {{ content }}
--- a/_layouts/v2.html
+++ b/_layouts/v2.html
@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+<head>
+	{% capture title %}{% if page.title %}{{ page.title }} - {% elsif post.title %}{{ post.title }} - {% endif %}{% endcapture %}
+
+	<title>{{ title }}Leaflet - a JavaScript library for interactive maps</title>
+
+	<meta charset="utf-8" />
+
+	{% if title == '' %}
+	<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
+	<meta property="og:description" content="Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps." />
+	<meta property="og:image" content="http://leafletjs.com/docs/images/logo.png" />
+
+	<meta itemprop="name" content="Leaflet">
+	<meta itemprop="description" content="Leaflet — a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.">
+	<meta itemprop="image" content="http://leafletjs.com/docs/images/logo.png">
+	{% endif %}
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{% endcapture %}
+
+	<link rel="shortcut icon" type="image/x-icon" href="{{ root }}docs/images/favicon.ico" />
+
+	<link href="http://leafletjs.com/atom.xml" type="application/atom+xml" rel="alternate" title="Leaflet Dev Blog Atom Feed" />
+
+	<link rel="stylesheet" href="{{ root }}docs/css/normalize.css" />
+	<link rel="stylesheet" href="{{ root }}docs/css/main.css" />
+
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,300' rel='stylesheet' type='text/css'>
+
+	<script src="{{ root }}docs/highlight/highlight.pack.js"></script>
+	<link rel="stylesheet" href="{{ root }}docs/highlight/styles/github-gist.css" />
+
+	<!-- Leaflet -->
+	<link rel="stylesheet" href="{{ root }}dist/leaflet.css" />
+	<script src="{{ root }}dist/leaflet.js"></script>
+
+	{% if page.css %}<style>{{ page.css }}</style>{% endif %}
+
+	<script>
+		CM_ATTR = '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 © <a href="http://cloudmade.com">CloudMade</a>';
+
+		CM_URL = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/{styleId}/256/{z}/{x}/{y}.png';
+
+    MB_ATTR = '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 © <a href="http://mapbox.com">Mapbox</a>';
+    MB_URL = 'http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';
+
+		OSM_URL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+		OSM_ATTRIB = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+	</script>
+</head>
+<body{% if page.bodyclass %} class="{{ page.bodyclass }}"{% endif %}>
+
+<h1><a href="http://leafletjs.com"><img src="{{ root }}docs/images/logo.png" alt="Leaflet" width="300" /></a></h1>
+<h3 class="tagline">an open-source JavaScript library<br> for mobile-friendly interactive maps</h3>
+
+<ul class="nav">
+	<li>
+		{% if page.title == nil %}
+			<span>Overview</span>
+		{% else %}
+			<a href="{{ root }}index.html">Overview</a>
+		{% endif %}
+	</li>
+	<li>
+		{% if page.title == 'Tutorials' %}
+			<span>Tutorials</span>
+		{% else %}
+			<a href="{{ root }}examples.html"{% if page.tutorial == true %} class="active"{% endif %}>Tutorials</a>
+		{% endif %}
+	</li>
+	<li>
+		{% if page.title == 'Documentation' %}
+			<span>Docs</span>
+		{% else %}
+			<a href="{{ root }}reference.html">Docs</a>
+		{% endif %}
+	</li>
+	<li>
+		{% if page.title == 'Download' %}
+			<span>Download</span>
+		{% else %}
+			<a href="{{ root }}download.html">Download</a>
+		{% endif %}
+	</li>
+	<li>
+		{% if page.title == 'Plugins' %}
+			<span>Plugins</span>
+		{% else %}
+			<a href="{{ root }}plugins.html">Plugins</a>
+		{% endif %}
+	</li>
+	<li>
+		{% if page.title == 'Blog' %}
+			<span>Blog</span>
+		{% else %}
+			<a href="{{ root }}blog.html"{% if page.post == true %} class="active"{% endif %}>Blog</a>
+		{% endif %}
+	</li>
+</ul>
+
+<div class="container">
+
+
+{{ content }}
+
+<div class="footer">
+	<p>&copy; 2015 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>. Maps &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors.</p>
+</div>
+
+</div>
+
+<nav class="ext-links">
+  <a class="ext-link twitter" href="http://twitter.com/LeafletJS" title="Follow LeafletJS on Twitter"><img alt="Follow LeafletJS on Twitter" src="{{root}}docs/images/twitter-round.png" width="46" /></a>
+  <a class="ext-link github" href="http://github.com/Leaflet/Leaflet" title="View Source on GitHub"><img alt="View Source on GitHub" src="{{root}}docs/images/github-round.png" width="46" /></a>
+  <a class="ext-link forum" href="https://groups.google.com/forum/#!forum/leaflet-js" title="Ask for help on the Leaflet forum"><img alt="Official Leaflet forum" src="{{root}}docs/images/forum-round.png" width="46" /></a>
+</nav>
+
+<script>
+	hljs.configure({tabReplace: '    '});
+
+	(function () {
+		var codes = document.getElementsByTagName('code'),
+			parentClass;
+
+		for (var i = 0, len = codes.length; i < len; i++) {
+			if (!codes[i].className) {
+				parentClass = codes[i].parentNode.className;
+				if (parentClass) {
+					codes[i].className = parentClass;
+				} else if (codes[i].innerHTML.match(/^\s*&lt;/)) {
+					codes[i].className = 'xml';
+				} else {
+					codes[i].className = 'javascript';
+				}
+			}
+		}
+	})();
+
+	(function () {
+		var headers = document.getElementsByTagName('h2');
+
+		for (var i = 0, len = headers.length; i < len; i++) {
+			if (headers[i].id) {
+				headers[i].onclick = function() {
+					window.location.hash = '#' + this.id;
+				};
+			}
+		}
+	})();
+
+	hljs.initHighlighting();
+</script>
+
+<script>
+	var _gaq = _gaq || [];
+	_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
+	_gaq.push([ '_trackPageview' ]);
+
+	(function() {
+		var ga = document.createElement('script');
+		ga.type = 'text/javascript';
+		ga.async = true;
+		ga.src = ('https:' == document.location.protocol ? 'https://ssl'
+				: 'http://www')
+				+ '.google-analytics.com/ga.js';
+		var s = document.getElementsByTagName('script')[0];
+		s.parentNode.insertBefore(ga, s);
+	})();
+</script>
+
+<script type="text/javascript" src="{{ root }}docs/js/docs.js"></script>
+</body>
+</html>
--- a/_posts/2015-07-01-leaflet-is-alive-and-kicking.md
+++ b/_posts/2015-07-01-leaflet-is-alive-and-kicking.md
@ -0,0 +1,21 @@
+---
+layout: post
+title: Leaflet is Alive and Kicking, Stay Tuned for 1.0!
+description: Leaflet 0.7 Released &mdash; with IE11 touch support, upscaling tiles and tons of other improvements and bugfixes! Meanwhile, I've joined the MapBox team full-time.
+author: Vladimir Agafonkin
+authorsite: http://agafonkin.com/en
+---
+
+I know this blog hasn't been updated for a long time &mdash; 1.5 years actually! But that's just because I'm a lazy blogger, and there has been _a lot_ going on with Leaflet during this time despite the lack of blog posts and major releases.
+
+We're on the finishing line of releasing Leaflet 1.0 &mdash; the biggest and greatest Leaflet release _ever_. The latest stable version, 0.7.3, is already perfect, so you won't believe how much awesome stuff we've managed to pack into the upcoming release &mdash; 914 commits later! But I'll leave that for a separate `1.0-beta1` blog post after we fix [that one last issue](https://github.com/Leaflet/Leaflet/pull/3307).
+
+Meanwhile, I'm happy to present you the new redesigned [Leaflet website](http://leafletjs.com/)! Now finally mobile-friendly, simple, clean, minimal and modern, just like the library itself. Also notice the floating menu when scrolling down the [Docs](/reference.html) and [Plugins](/plugins.html) pages, a highly requested feature that'll make navigation much easier. Big thanks to [Rowan Hogan](https://github.com/rowanhogan) for the help with the new design!
+
+P.S. I recently made a quirky 13-minute video for the [Geospatial World Forum](http://www.geospatialworldforum.org/), sharing the fun story behind Leaflet and how it became what it is today. Watch it and share it with your geofriends so that we can make the GIS world fun again!
+
+Love,<br />
+Vladimir.
+
+<iframe width="640" height="480" src="https://www.youtube.com/embed/NLbyHffKQuU" frameborder="0" allowfullscreen></iframe>
+
--- a/atom.xml
+++ b/atom.xml
@ -1,5 +1,4 @@
 ---
-layout: nil
 title: Leaflet Developer Blog Atom Feed
 ---
 <?xml version="1.0" encoding="utf-8"?>
--- a/blog.md
+++ b/blog.md
@ -1,6 +1,7 @@
 ---
-layout: default
+layout: v2
 title: Blog
+bodyclass: blog-page
 ---

 ## Leaflet Developer Blog
@ -11,10 +12,10 @@ The main place for all important Leaflet-related news, tutorials, tips and devel

 {% for post in site.posts %}
 <div class="clearfix">
-	<div class="span-3 post-date">
+	<div class="post-date">
 		{{ post.date | date_to_string }}
 	</div>
-	<div class="span-17 last">
+	<div class="post-info">
 		<h3 class="post-title"><a href="{{ post.url | replace_first: '/', '' }}">{{ post.title }}</a></h3>
 		<p>{{ post.description }} <span class="quiet">&hellip;</span></p>
 	</div>
--- a/docs/css/main.css
+++ b/docs/css/main.css
--- a/docs/css/normalize.css
+++ b/docs/css/normalize.css
@ -0,0 +1,425 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/docs/css/screen.css
+++ b/docs/css/screen.css
@ -28,21 +28,9 @@ h1 a {
 	margin-left: -10px;
 	margin-bottom: 8px;
 	text-decoration: none;
-
 	-webkit-transition: 0.8s all;
-
-	/*-webkit-animation-duration: 2s;
-	-webkit-animation-delay: 15s;
-	-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(1.5); }
-}
-
 h1 a:hover, h1 a:focus {
 	-webkit-filter: hue-rotate(-70deg) saturate(1.5);
 }
--- a/docs/highlight/highlight.pack.js
+++ b/docs/highlight/highlight.pack.js
--- a/docs/highlight/styles/github-gist.css
+++ b/docs/highlight/styles/github-gist.css
@ -0,0 +1,211 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.hljs {
+  display: block;
+  background:#f8f8f8;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.bash .hljs-shebang,
+.java .hljs-javadoc,
+.javascript .hljs-javadoc {
+  color: #969896;
+}
+
+.hljs-string,
+.apache .hljs-sqbracket,
+.coffeescript .hljs-subst,
+.coffeescript .hljs-regexp,
+.cpp .hljs-preprocessor,
+.c .hljs-preprocessor,
+.javascript .hljs-regexp,
+.json .hljs-attribute,
+.makefile .hljs-variable,
+.markdown .hljs-value,
+.markdown .hljs-link_label,
+.markdown .hljs-strong,
+.markdown .hljs-emphasis,
+.markdown .hljs-blockquote,
+.nginx .hljs-regexp,
+.nginx .hljs-number,
+.objectivec .hljs-preprocessor .hljs-title,
+.perl .hljs-regexp,
+.php .hljs-regexp,
+.xml .hljs-value,
+.less .hljs-built_in,
+.scss .hljs-built_in {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.css .hljs-at_rule,
+.css .hljs-important,
+.http .hljs-request,
+.ini .hljs-setting,
+.java .hljs-javadoctag,
+.javascript .hljs-tag,
+.javascript .hljs-javadoctag,
+.nginx .hljs-title,
+.objectivec .hljs-preprocessor,
+.php .hljs-phpdoc,
+.sql .hljs-built_in,
+.less .hljs-tag,
+.less .hljs-at_rule,
+.scss .hljs-tag,
+.scss .hljs-at_rule,
+.scss .hljs-important,
+.stylus .hljs-at_rule,
+.go .hljs-typename,
+.swift .hljs-preprocessor {
+  color: #a71d5d;
+}
+
+.apache .hljs-common,
+.apache .hljs-cbracket,
+.apache .hljs-keyword,
+.bash .hljs-literal,
+.bash .hljs-built_in,
+.coffeescript .hljs-literal,
+.coffeescript .hljs-built_in,
+.coffeescript .hljs-number,
+.cpp .hljs-number,
+.cpp .hljs-built_in,
+.c .hljs-number,
+.c .hljs-built_in,
+.cs .hljs-number,
+.cs .hljs-built_in,
+.css .hljs-attribute,
+.css .hljs-hexcolor,
+.css .hljs-number,
+.css .hljs-function,
+.http .hljs-literal,
+.http .hljs-attribute,
+.java .hljs-number,
+.javascript .hljs-built_in,
+.javascript .hljs-literal,
+.javascript .hljs-number,
+.json .hljs-number,
+.makefile .hljs-keyword,
+.markdown .hljs-link_reference,
+.nginx .hljs-built_in,
+.objectivec .hljs-literal,
+.objectivec .hljs-number,
+.objectivec .hljs-built_in,
+.php .hljs-literal,
+.php .hljs-number,
+.python .hljs-number,
+.ruby .hljs-prompt,
+.ruby .hljs-constant,
+.ruby .hljs-number,
+.ruby .hljs-subst .hljs-keyword,
+.ruby .hljs-symbol,
+.sql .hljs-number,
+.puppet .hljs-function,
+.less .hljs-number,
+.less .hljs-hexcolor,
+.less .hljs-function,
+.less .hljs-attribute,
+.scss .hljs-preprocessor,
+.scss .hljs-number,
+.scss .hljs-hexcolor,
+.scss .hljs-function,
+.scss .hljs-attribute,
+.stylus .hljs-number,
+.stylus .hljs-hexcolor,
+.stylus .hljs-attribute,
+.stylus .hljs-params,
+.go .hljs-built_in,
+.go .hljs-constant,
+.swift .hljs-built_in,
+.swift .hljs-number {
+  color: #0086b3;
+}
+
+.apache .hljs-tag,
+.cs .hljs-xmlDocTag,
+.css .hljs-tag,
+.xml .hljs-title,
+.stylus .hljs-tag {
+  color: #63a35c;
+}
+
+.bash .hljs-variable,
+.cs .hljs-preprocessor,
+.cs .hljs-preprocessor .hljs-keyword,
+.css .hljs-attr_selector,
+.css .hljs-value,
+.ini .hljs-value,
+.ini .hljs-keyword,
+.javascript .hljs-tag .hljs-title,
+.makefile .hljs-constant,
+.nginx .hljs-variable,
+.xml .hljs-tag,
+.scss .hljs-variable {
+  color: #333333;
+}
+
+.bash .hljs-title,
+.coffeescript .hljs-title,
+.cpp .hljs-title,
+.c .hljs-title,
+.cs .hljs-title,
+.css .hljs-id,
+.css .hljs-class,
+.css .hljs-pseudo,
+.ini .hljs-title,
+.java .hljs-title,
+.javascript .hljs-title,
+.makefile .hljs-title,
+.objectivec .hljs-title,
+.perl .hljs-sub,
+.php .hljs-title,
+.python .hljs-decorator,
+.python .hljs-title,
+.ruby .hljs-parent,
+.ruby .hljs-title,
+.xml .hljs-attribute,
+.puppet .hljs-title,
+.less .hljs-id,
+.less .hljs-pseudo,
+.less .hljs-class,
+.scss .hljs-id,
+.scss .hljs-pseudo,
+.scss .hljs-class,
+.stylus .hljs-class,
+.stylus .hljs-id,
+.stylus .hljs-pseudo,
+.stylus .hljs-title,
+.swift .hljs-title,
+.diff .hljs-chunk {
+  color: #795da3;
+}
+
+.coffeescript .hljs-reserved,
+.coffeescript .hljs-attribute {
+  color: #1d3e81;
+}
+
+.diff .hljs-chunk {
+  font-weight: bold;
+}
+
+.diff .hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.diff .hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.markdown .hljs-link_url {
+  text-decoration: underline;
+}
--- a/docs/highlight/styles/github.css
+++ b/docs/highlight/styles/github.css
@ -5,9 +5,10 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 */

 pre code {
-  display: block; padding: 0.5em;
+  display: block;
+  padding: 0.5em;
  color: #000;
-  background: #f8f8ff
+  background: #f5f5f5;
 }

 code .comment,
--- a/docs/images/choropleth.png
+++ b/docs/images/choropleth.png
--- a/docs/images/custom-icons.png
+++ b/docs/images/custom-icons.png
--- a/docs/images/favicon.ico
+++ b/docs/images/favicon.ico
--- a/docs/images/favicon.png
+++ b/docs/images/favicon.png
--- a/docs/images/forum-round.png
+++ b/docs/images/forum-round.png
--- a/docs/images/forum.png
+++ b/docs/images/forum.png
--- a/docs/images/geojson.png
+++ b/docs/images/geojson.png
--- a/docs/images/github-round.png
+++ b/docs/images/github-round.png
--- a/docs/images/github.png
+++ b/docs/images/github.png
--- a/docs/images/layers-control.png
+++ b/docs/images/layers-control.png
--- a/docs/images/logo.png
+++ b/docs/images/logo.png
--- a/docs/images/logos.png
+++ b/docs/images/logos.png
--- a/docs/images/mobile.png
+++ b/docs/images/mobile.png
--- a/docs/images/quick-start.png
+++ b/docs/images/quick-start.png
--- a/docs/images/twitter-round.png
+++ b/docs/images/twitter-round.png
--- a/docs/js/docs.js
+++ b/docs/js/docs.js
@ -0,0 +1,52 @@
+
+var tocCopy = document.createElement('div');
+tocCopy.id = 'toc-copy';
+
+var toc = document.querySelector('#toc');
+
+if (toc) {
+  tocCopy.innerHTML = toc.innerHTML;
+  document.getElementsByClassName('container')[0].appendChild(tocCopy);
+
+  var menus = document.querySelectorAll('#toc-copy ul');
+
+  for (var i = 0; i < menus.length; i++) {
+    menus[i].addEventListener('mouseover', function() {
+      this.previousElementSibling.classList.add('hover')
+    });
+
+    menus[i].addEventListener('mouseout', function() {
+      this.previousElementSibling.classList.remove('hover')
+    });
+  }
+
+  var labels = document.querySelectorAll('#toc-copy h4');
+
+  for (var i = 0; i < labels.length; i++) {
+    labels[i].addEventListener('click', function() {
+      this.classList.toggle('active')
+    });
+  }
+
+  tocCopy.addEventListener('click', function(e) {
+    if (e.target.nodeName != 'H4') {
+      this.classList.toggle('active');
+    }
+  });
+
+  var scrollPos = function scrollPos () {
+    var scroll = window.scrollY;
+
+    if (scroll >= (toc.offsetHeight + toc.offsetTop)) {
+      document.body.classList.add('scrolled');
+    } else {
+      document.body.classList.remove('scrolled');
+    }
+  }
+
+  scrollPos();
+
+  window.addEventListener('scroll', function(e) {
+    scrollPos();
+  });
+}
--- a/download.md
+++ b/download.md
@ -1,6 +1,7 @@
 ---
-layout: default
+layout: v2
 title: Download
+bodyclass: download-page
 ---

 ## Download Leaflet
@ -53,7 +54,7 @@ Here are the steps to set it up:
 1. [Download and install Node](http://nodejs.org)
 2. Run the following commands in the command line:

- <pre><code class="no-highlight">npm install -g jake
+ <pre><code>npm install -g jake
 npm install</code></pre>

 Now that you have everything installed, run `jake build` inside the Leaflet directory.
--- a/examples.md
+++ b/examples.md
@ -1,6 +1,7 @@
 ---
-layout: default
+layout: v2
 title: Tutorials
+bodyclass: examples
 ---

 ## Leaflet Tutorials
--- a/features.html
+++ b/features.html
@ -1,149 +0,0 @@
---
-layout: default
-title: Features
---
-
-<h2>Leaflet Features</h2>
-
-<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It should still satisfy the needs of the vast majority of map apps developers while being easily extended by <a href="plugins.html">third-party plugins</a>.</p>
-
-<hr />
-
-<div class="span-20" id="features">
-	<div class="span-6">
-
-		<h3>Available Map Layers</h3>
-
-		<ul>
-			<li>Tile layers</li>
-			<li>Markers</li>
-			<li>Popups</li>
-			<li>Vector layers<span class="quiet">: polylines, polygons, circles, rectangles, circle markers</li>
-			<li>GeoJSON layers</li>
-			<li>Image overlays</li>
-			<li>WMS layers</li>
-			<li>Layer groups</li>
-		</ul>
-
-
-		<h3>Interaction Features</h3>
-
-		<h4>General</h4>
-
-		<ul>
-			<li>Drag panning with inertia</li>
-		</ul>
-
-		<h4>On Desktop Browsers</h4>
-
-		<ul>
-			<li>Scroll wheel zoom</li>
-			<li>Double click zoom</li>
-			<li>Zoom to area <span class="quiet">(shift-drag)</span></li>
-			<li>Keyboard navigation <span class="quiet"><nobr>(with arrows and <code>+/-</code> keys)</nobr></span></li>
-		</ul>
-
-
-		<h4>On Mobile Browsers</h4>
-
-		<ul>
-			<li>Multi-touch zoom <nobr><span class="quiet">(iOS, Android 4+, Win8)</span></nobr></li>
-			<li>Double tap zoom</li>
-		</ul>
-
-		<h4>For Layers</h4>
-
-		<ul>
-			<li>Various events<span class="quiet">: click (tap), mouseover, contextmenu, etc.</span></li>
-			<li>Marker dragging</li>
-		</ul>
-
-		<!--<li>Vector layers editing</li>-->
-	</div>
-
-	<div class="span-9">
-
-		<h3>Visual Features</h3>
-
-		<ul>
-			<li>Zoom animation <span class="quiet">(<nobr>for all layers</nobr>, including tile layers, markers and vector layers)</span></li>
-			<li>Panning animation</li>
-			<li>Smooth continuous zoom on modern mobile devices</li>
-			<li>Tile and popup fade animation</li>
-			<li>Very nice default design for markers, popups and other map controls</li>
-			<li>Retina resolution support for tile layers and markers</li>
-		</ul>
-
-
-		<h3>Customization Features</h3>
-
-		<ul>
-			<li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
-			<li>Image- and HTML-based markers</li>
-			<li><span class="quiet">A simple interface for implementing</span> custom map layers</li>
-			<li><span class="quiet">The same for</span> custom map controls</li>
-			<li>Custom map projections <span class="quiet">(with <code>EPSG:4326</code>, <code>EPSG:3857</code> and <code>EPSG:3395</code> out of the box)</span></li>
-			<li>Powerful OOP facilities <span class="quiet">for extending existing classes</span></p>
-		</ul>
-
-		<h3>Performance Features</h3>
-
-		<ul>
-			<li>Hardware acceleration on iOS <span class="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
-			<li>Utilizing CSS3 features <span class="quiet">like Transitions, Transforms, requestAnimationFrame where possible</span> to make panning and zooming really smooth</li>
-			<li>Smart polyline/polygon rendering <span class="quiet">with dynamic clipping and simplification makes it responsive even when displaying objects with thousands of points</span></li>
-			<li>Modular design and a build system<span class="quiet"> allow you to reduce the library size by leaving out features you don't need</span></li>
-			<li>Tap delay elimination on mobile devices<span class="quiet"> makes controls and layers respond to taps immediately</span></li>
-		</ul>
-
-	</div>
-
-	<div class="span-5 last">
-
-		<h3>Map Controls</h3>
-
-		<ul>
-			<li>Zoom buttons</li>
-			<li>Attribution</li>
-			<li>Layer switcher</li>
-			<li>Scale</li>
-		</ul>
-
-
-		<h3>Browser Support</h3>
-
-		<h4>On Desktop</h4>
-
-		<ul>
-			<li>Chrome</li>
-			<li>Firefox</li>
-			<li>Safari 5+</li>
-			<li>Opera 12+</li>
- 			<li>IE 7&ndash;11</li>
- 		</ul>
-
-		<h4>On Mobile</h4>
-
- 		<ul>
- 			<li>Safari for iOS 3&ndash;7+</li>
-			<li>Android browser 2.2+,&nbsp;3.1+,&nbsp;4+</li>
-			<li>Chrome for Android 4+ and iOS</li>
-			<li>Firefox for Android</li>
-			<li>Other WebKit browsers <span class="quiet">(webOS, Blackberry 7+, etc.)</span></li>
-			<li>IE10/11 for Win8 devices</li>
-		</ul>
-
-
-		<h3>Misc</h3>
-
-		<ul>
-			<li>Extremely lightweight <span class="quiet">&mdash; around 34 KB of gzipped JS code</span></li>
-			<li>No external dependencies</li>
-			<li>Keeps your JS environment clean<span class="quiet"> &mdash; no global or native prototypes pollution</span></li>
-		</ul>
-	</div>
-</div>
-
-<hr />
-
-<p>If you find some feature really missing in Leaflet, please vote for it on the <a href="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>
--- a/index.html
+++ b/index.html
@ -0,0 +1,199 @@
+---
+layout: v2
+---
+
+<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
+Weighing just about <abbr title="33 KB gzipped &mdash; that's 123 KB minified and 218 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.">33 KB of JS</abbr>,
+it&nbsp;has all the mapping <a href="#features">features</a> most developers ever need.</p>
+
+<p>Leaflet is designed with <em>simplicity</em>, <em>performance</em> and <em>usability</em> in mind.
+It works efficiently across all major desktop and mobile platforms,
+can be extended with lots of <a href="plugins.html">plugins</a>,
+has a beautiful, easy to use and <a title="Leaflet API reference" href="reference.html">well-documented API</a>
+and a simple, readable&nbsp;<a title="Leaflet source code repository on GitHub" href="https://github.com/Leaflet/Leaflet">source code</a> that is a&nbsp;joy to
+<a title="A guide to contributing to Leaflet" href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribute</a> to.</p>
+
+<div id="map" class="map map-home" style="height: 300px; margin-top: 50px"></div>
+
+<p>Here we create a map in the <code>'map'</code> div, add <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, and then add a marker with some text in a popup:</p>
+
+<pre class="basic-code javascript"><code>var map = L.map('map').setView([51.505, -0.09], 13);
+
+L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+    attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
+}).addTo(map);
+
+L.marker([51.5, -0.09]).addTo(map)
+    .bindPopup('A pretty CSS3 popup.&lt;br&gt; Easily customizable.')
+    .openPopup();</code></pre>
+
+<p>Learn more with the <a href="examples/quick-start.html">quick start guide</a>, check out <a href="examples.html">other tutorials</a>,
+or head straight to the <a href="reference.html">API documentation</a>.
+If you have any questions, take a look at the <a href="https://github.com/Leaflet/Leaflet/blob/master/FAQ.md">FAQ</a> first.</p>
+
+
+</div>
+
+<h2 class="usedby-title">Trusted by the best</h2>
+<div class="usedby">
+  <div class="container">
+    <a class="logo logo-github" href="https://github.com">GitHub</a>
+    <a class="logo logo-foursquare" href="http://foursquare.com">foursquare</a>
+    <a class="logo logo-pinterest" href="https://www.pinterest.com">Pinterest</a>
+    <a class="logo logo-facebook" href="https://www.facebook.com/">Facebook</a>
+    <a class="logo logo-evernote" href="https://evernote.com">Evernote</a>
+    <a class="logo logo-etsy" href="https://www.etsy.com/">Etsy</a>
+    <a class="logo logo-flickr" href="https://www.flickr.com/">Flickr</a>
+    <a class="logo logo-500px" href="https://500px.com">500px</a>
+    <a class="logo logo-datagov" href="http://www.data.gov/">Data.gov</a>
+    <a class="logo logo-european-commission" href="http://ec.europa.eu/">European Commission</a>
+    <a class="logo logo-wpost" href="https://www.washingtonpost.com">The Washington Post</a>
+    <a class="logo logo-ftimes" href="http://www.ft.com">Financial Times</a>
+    <a class="logo logo-npr" href="http://www.npr.org">NPR</a>
+    <a class="logo logo-usatoday" href="http://www.usatoday.com">USA Today</a>
+    <a class="logo logo-nps" href="http://www.nps.gov/">National Park Service</a>
+    <a class="logo logo-ign" href="http://ign.com">IGN.com</a>
+  </div>
+</div>
+
+<div class="container">
+
+<h2 id="features">Features</h2>
+
+<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>.</p>
+
+<div class="features clearfix">
+    <h3>Layers Out of the Box</h3>
+
+    <ul>
+        <li>Tile layers, WMS</li>
+        <li>Markers, Popups</li>
+        <li>Vector layers<span class="quiet">: polylines, polygons, circles, rectangles</li>
+        <li>Image overlays</li>
+        <li>GeoJSON</li>
+    </ul>
+
+
+    <h3>Interaction Features</h3>
+
+    <ul>
+        <li>Drag panning with inertia</li>
+        <li>Scroll wheel zoom</li>
+        <li>Pinch-zoom on mobile</li>
+        <li>Double click zoom</li>
+        <li>Zoom to area <span class="quiet">(shift-drag)</span></li>
+        <li>Keyboard navigation</li>
+        <li>Events<span class="quiet">: click, mouseover, etc.</span></li>
+        <li>Marker dragging</li>
+    </ul>
+
+    <h3>Visual Features</h3>
+
+    <ul>
+        <li>Zoom and pan animation</li>
+        <li>Tile and popup fade animation</li>
+        <li>Very nice default design <span class="quiet">for markers, popups and map controls</span></li>
+        <li>Retina resolution support</li>
+    </ul>
+
+
+    <h3>Customization Features</h3>
+
+    <ul>
+        <li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
+        <li>Image- and HTML-based markers</li>
+        <li><span class="quiet">A simple interface for</span> custom map layers and controls</li>
+        <li>Custom map projections <span class="quiet">(with <code>EPSG:3857/4326/3395</code> out of the box)</span></li>
+        <li>Powerful OOP facilities <span class="quiet">for extending existing classes</span></p>
+    </ul>
+
+    <h3>Performance Features</h3>
+
+    <ul>
+        <li>Hardware acceleration on mobile <span class="quiet"> makes it feel as smooth as native apps</span></li>
+        <li>Utilizing CSS3 features <span class="quiet">to make panning and zooming really smooth</span></li>
+        <li>Smart polyline/polygon rendering <span class="quiet">with dynamic clipping and simplification makes it very fast</span></li>
+        <li>Modular build system<span class="quiet"> for leaving out features you don't need</span></li>
+        <li>Tap delay elimination on mobile</li>
+    </ul>
+
+    <h3>Map Controls</h3>
+
+    <ul>
+        <li>Zoom buttons</li>
+        <li>Attribution</li>
+        <li>Layer switcher</li>
+        <li>Scale</li>
+    </ul>
+
+
+    <h3>Browser Support</h3>
+
+    <h4>Desktop</h4>
+
+    <ul>
+        <li>Chrome</li>
+        <li>Firefox</li>
+        <li>Safari 5+</li>
+        <li>Opera 12+</li>
+        <li>IE 7&ndash;11</li>
+    </ul>
+
+    <h4>Mobile</h4>
+
+    <ul>
+        <li>Safari for iOS 7+</li>
+        <li>Android browser 2.2+,&nbsp;3.1+,&nbsp;4+</li>
+        <li>Chrome for mobile</li>
+        <li>Firefox for mobile</li>
+        <li>IE10+ for Win8 devices</li>
+    </ul>
+
+
+    <h3>Misc</h3>
+
+    <ul>
+        <li>Extremely lightweight</li>
+        <li>No external dependencies</li>
+    </ul>
+</div>
+
+<p>If you find some feature really missing in Leaflet, first check if there's a <a href="plugins.html">plugin for it</a>. If not, please vote for the feature on the <a href="https://leaflet.uservoice.com">Leaflet UserVoice page</a>.</p>
+
+<h2>Getting Involved</h2>
+
+<p>Lets create the best mapping library that will ever exist! Leaflet is developed by <a href="http://agafonkin.com">Vladimir Agafonkin</a> of <a href="http://mapbox.com">Mapbox</a> with a team of dedicated <a href="https://github.com/Leaflet/Leaflet/graphs/contributors">contributors</a>.
+<a href="https://github.com/Leaflet/Leaflet">Pull requests</a> are always welcome.
+However, there are many more ways to get involved with the development of Leaflet.</p>
+
+<p>You can help the project tremendously by discovering and <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs">reporting bugs</a>, <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation">improving documentation</a>,
+helping others on the <a href="https://groups.google.com/forum/#!forum/leaflet-js">Leaflet forum</a>
+and <a href="https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>,
+showing your support for your favorite feature suggestions on <a href="http://leaflet.uservoice.com">Leaflet UserVoice page</a>,
+tweeting to <a href="http://twitter.com/LeafletJS">@LeafletJS</a>
+and spreading the word about Leaflet among your colleagues and friends.</p>
+
+<p>Check out the <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribution guide</a> for more information on getting involved with Leaflet development.</p>
+
+<div class="social-buttons">
+    <iframe src="http://ghbtns.com/github-btn.html?user=Leaflet&amp;repo=Leaflet&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
+
+    <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%2Fleafletjs.com&amp;layout=button_count&amp;show_faces=false&amp;width=93&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:93px; height:20px;" allowTransparency="true"></iframe>
+</div>
+
+<script>
+	var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+		osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+	var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
+
+	L.marker([51.504, -0.159])
+		.addTo(map)
+		.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
+		.openPopup();
+</script>
--- a/index.md
+++ b/index.md
@ -1,98 +0,0 @@
---
-layout: default
---
-
-<!-- <p class="notice">November 18, 2013 &mdash; <a href="2013/11/18/leaflet-0-7-released-plans-for-future.html">Leaflet 0.7 Release, MapBox &amp; Plans for Future</a> (Blog Post)</p> -->
-
-Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps.
-It is developed by [Vladimir Agafonkin][] with a&nbsp;team of dedicated [contributors][].
-Weighing just about <abbr title="33 KB gzipped &mdash; that's 123 KB minified and 218 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.">33 KB of JS</abbr>,
-it has all the [features][] most developers ever need for online maps.
-
-Leaflet is designed with _simplicity_, _performance_ and _usability_ in mind.
-It works efficiently across all major desktop and mobile platforms out of the box,
-taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.
-It can be extended with a huge amount of [plugins][],
-has a beautiful, easy to use and [well-documented API][]
-and a simple, readable [source code][] that is a&nbsp;joy to [contribute][] to.
-
-{: .usedby}
-Used by:
-[Flickr](http://flickr.com/map)
-[foursquare](https://foursquare.com/)
-[Pinterest](http://pinterest.com)
-[craigslist](http://t.co/V4EiURIA)
-[Data.gov](http://data.gov)
-[IGN](http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim)
-[Wikimedia](http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/)
-[OSM](http://openstreetmap.org)
-[Meetup](http://www.meetup.com/)
-[WSJ](http://projects.wsj.com/campaign2012/maps/)
-[Mapbox](http://mapbox.com)
-[CartoDB](http://cartodb.com)
-[GIS Cloud](http://www.giscloud.com/)
-...
-
-<div id="map" class="map" style="height: 300px"></div>
-
-In this basic example, we create a map with <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to &mdash; use whatever works for you, it's open source!">tiles of our choice</abbr>, add a marker and bind a popup with some text to it:
-
-	// create a map in the "map" div, set the view to a given place and zoom
-	var map = L.map('map').setView([51.505, -0.09], 13);
-
-	// add an OpenStreetMap tile layer
-	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-		attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-	}).addTo(map);
-
-	// add a marker in the given location, attach some popup content to it and open the popup
-	L.marker([51.5, -0.09]).addTo(map)
-		.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
-		.openPopup();
-
-Learn more with the [quick start guide](examples/quick-start.html), check out [other tutorials](examples.html), or head straight to the [API documentation](reference.html). <br>
-If you have any questions, take a look at the [FAQ](https://github.com/Leaflet/Leaflet/blob/master/FAQ.md) first.
-
-
-## Getting Involved
-
-Third-party patches are absolutely essential on our quest to create the best mapping library that will ever exist.
-However, they're not the only way to get involved with the development of Leaflet.
-You can help the project tremendously by discovering and [reporting bugs][], [improving documentation][],
-helping others on the [Leaflet forum](https://groups.google.com/forum/#!forum/leaflet-js)
-and [GitHub issues](https://github.com/Leaflet/Leaflet/issues),
-showing your support for your favorite feature suggestions on [Leaflet UserVoice page](http://leaflet.uservoice.com),
-tweeting to [@LeafletJS](http://twitter.com/LeafletJS)
-and spreading the word about Leaflet among your colleagues and friends.
-
-Check out the [contribution guide][contribute] for more information on getting involved with Leaflet development.
-
-  [Vladimir Agafonkin]: http://agafonkin.com/en
-  [contributors]: https://github.com/Leaflet/Leaflet/graphs/contributors
-  [features]: features.html
-  [plugins]: plugins.html
-  [well-documented API]: reference.html "Leaflet API reference"
-  [source code]: https://github.com/Leaflet/Leaflet "Leaflet GitHub repository"
-  [hosted on GitHub]: http://github.com/Leaflet/Leaflet
-  [contribute]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md "A guide to contributing to Leaflet"
-  [reporting bugs]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs
-  [improving documentation]: https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation
-  [@mourner]: http://github.com/mourner
-  [GitHub issues page]: http://github.com/Leaflet/Leaflet/issues
-  [Leaflet UserVoice page]: http://leaflet.uservoice.com
-  [@LeafletJS]: http://twitter.com/LeafletJS
-  [Leaflet mailing list]: https://groups.google.com/group/leaflet-js
-
-
-<script>
-	var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-		osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-		osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
-
-	var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
-
-	L.marker([51.504, -0.159])
-		.addTo(map)
-		.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
-		.openPopup();
-</script>
--- a/plugins.md
+++ b/plugins.md
@ -1,16 +1,18 @@
 ---
-layout: default
+layout: v2
 title: Plugins
 bodyclass: plugins-page
 ---

+## Leaflet Plugins
+
 While Leaflet is meant to be as lightweight as possible, and focuses on a core set of features, an easy way to extend its functionality is to use third-party plugins. Thanks to the awesome community behind Leaflet, there are literally hundreds of nice plugins to choose from.

 ---

 <div id="toc" class="clearfix">
-	<div class="span-4">
-		<h4>Tile & image layers</h4>
+	<div class="toc-col">
+		<h4>Tile &amp; image layers</h4>

 		<ul>
 			<li> <a href='#basemap-providers'>Basemap providers</a></li>
@ -30,11 +32,11 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
 			<li> <a href='#data-providers'>Data providers</a></li>
 		</ul>
 	</div>
-	<div class="span-4">
+	<div class="toc-col">

 		<h4>Overlay Display</h4>
 		<ul>
-			<li><a href="#markers--renderers">Markers & renderers</a></li>
+			<li><a href="#markers--renderers">Markers &amp; renderers</a></li>
 			<li><a href="#overlay-animations">Overlay animations</a></li>
 			<li><a href="#clusteringdecluttering">Clustering/decluttering</a></li>
 			<li><a href="#heatmaps">Heatmaps</a></li>
@ -43,12 +45,12 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
 		<h4>Overlay interaction</h4>
 		<ul>
 			<li><a href="#edit-geometries">Edit geometries</a></li>
-			<li><a href="#time--elevation">Time & elevation</a></li>
-			<li><a href="#search--popups">Search & popups</a></li>
+			<li><a href="#time--elevation">Time &amp; elevation</a></li>
+			<li><a href="#search--popups">Search &amp; popups</a></li>
 			<li><a href="#areaoverlay-selection">Area/overlay selection</a></li>
 		</ul>
 	</div>
-	<div class="span-5">
+	<div class="toc-col">
 		<h4>Map interaction</h4>
 		<ul>
 			<li><a href="#layer-switching-controls">Layer switching controls</a></li>
@ -64,7 +66,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
 			<li><a href="#geolocation">Geolocation</a></li>
 		</ul>
 	</div>
-	<div class="span-4">
+	<div class="toc-col">
 		<h4>Miscellaneous</h4>
 		<ul>
 			<li><a href="#geoprocessing">Geoprocessing</a></li>
@ -152,7 +154,7 @@ Ready-to-go basemaps, with little or no configuration at all.
 		</td><td>
 			Provides easy setup of the tile layers from <a href="http://kartverket.no/Kart/Gratis-kartdata/Cache-tjenester/">Kartverket</a> (The Norwegian Mapping Authority)
 		</td><td>
-			<a href="https://github.com/knreise">Kultur og naturreise / Atle Frenvik Sveen</a>
+			<a href="https://github.com/knreise">Kultur og naturreise</a> / <a href="https://github.com/atlefren">Atle Frenvik Sveen</a>
 		</td>
 	</tr>
 	<tr>
@ -491,7 +493,7 @@ Load your own data from various GIS formats.
 		<td>
 			<a href="https://github.com/mapbox/leaflet-omnivore">leaflet-omnivore</a>
 		</td><td>
-			Loads & converts CSV, KML, GPX, TopoJSON, WKT formats for Leaflet.
+			Loads &amp; converts CSV, KML, GPX, TopoJSON, WKT formats for Leaflet.
 		</td><td>
 			<a href="https://github.com/mapbox">Mapbox</a>
 		</td>
@ -783,7 +785,7 @@ These plugins provide new markers or news ways of converting abstract data into
 		<td>
 			<a href="https://github.com/lvoogdt/Leaflet.awesome-markers">Leaflet.Awesome-Markers</a>
 		</td><td>
-			Colorful, iconic & retina-proof markers based on the Font Awesome icons/Twitter Bootstrap icons
+			Colorful, iconic &amp; retina-proof markers based on the Font Awesome icons/Twitter Bootstrap icons
 		</td><td>
 			<a href="http://www.lennardvoogdt.nl">Lennard Voogdt</a>
 		</td>
@ -956,7 +958,7 @@ When you are displaying a lot of data, these plugins will make your map look cle
 		<td>
 			<a href="https://github.com/MazeMap/Leaflet.LayerGroup.Collision">Leaflet.LayerGroup.Collision</a>
 		</td><td>
-			Provides collision detection for groups of markers. Unlike clustering, this takes into account the shape & size of the markers.
+			Provides collision detection for groups of markers. Unlike clustering, this takes into account the shape &amp; size of the markers.
 		</td><td>
 			<a href="https://github.com/IvanSanchez">Iván Sánchez Ortega</a>,
 			<a href="https://github.com/MazeMap">MazeMap</a>
--- a/reference.html
+++ b/reference.html