Refactor examples page

site/public/css/planetaryjs.less

@@ -144,8 +144,15 @@ canvas#homepage-globe-canvas {
   text-decoration: none;
 }
 
-.ui.menu .item.with-subitems {
-  // padding-bottom: 0.2em;
+.example-segment {
+  .horizontal.label {
+    margin-top: 5px;
+  }
+
+  img {
+    width: 200px;
+    height: 200px;
+  }
 }
 
 .ui.menu .item.contains-subitems {

site/public/examples/basic.ejs

@@ -1,3 +1,9 @@
+<div class="ui breadcrumb">
+  <a href='/examples/' class="section">Examples</a>
+  <i class="right arrow icon divider"></i>
+  <div class="active section">Basic Globe</div>
+</div>
+
 <h1>Basic Globe</h1>
 
 <p>This example shows the minimum code you need to render a basic representation of the planet Earth.</p>

site/public/examples/index.ejs

@@ -2,34 +2,37 @@
 
 <p>Sometimes you just need to see some code to get an idea started; here are a few examples of what you can build with Planetary.js.</p>
 
-<div class='ui three connected items examples'>
-  <div class='row'>
-    <a class='item' href='/examples/basic.html'>
-      <div class='content'>
-        <div class='name'>Basic Globe</div>
-        <p class='description'>It doesn't get any simpler than this:
-          just a static globe using built-in plugins and nothing
-          up our sleeves!</p>
-      </div>
-    </a>
-
-    <a class='item' href='/examples/rotating.html'>
-      <div class='content'>
-        <div class='name'>Rotating Globe</div>
-        <p class='description'>If there's one thing that's better than
-          a globe, it's a globe that rotates. This is the demo from the
-          homepage of Planetaryjs.com, and so includes a custom
-          auto-rotation plugin and zoom/drag integration.</p>
-      </div>
-    </a>
-
-    <a class='item' href='/examples/quake.html'>
-      <div class='content'>
-        <div class='name'>Earthquake Data</div>
-        <p class='description'>A visualization of 2013 seismic activity.
-          This demo shows the use of multiple custom plugins, D3
-          scales, fetching third party data, and DOM updates via D3.</p>
-      </div>
-    </a>
+<div class='ui segment example-segment'>
+  <div class='ui top attached purple label'>Level 1</div>
+  <div>
+    <a href='/examples/basic.html'><img src='/images/ex-basic.png' style='float: left; margin-right: 20px;'></a>
+    <a href='/examples/basic.html'><h2>Basic Globe</h2></a>
+    <p>It doesn't get any simpler than this: just a static globe, built using built-in plugins with nothing up our sleeves!</p>
+    <span class='ui teal horizontal label'>plugins: earth</span>
+    <span class='ui black horizontal label'>d3: projections</span>
+  </div>
+</div>
+
+<div class='ui segment example-segment'>
+  <div class='ui top attached orange label'>Level 2</div>
+  <div>
+    <a href='/examples/rotating.html'><img src='/images/ex-rotating.png' style='float: left; margin-right: 20px;'></a>
+    <a href='/examples/rotating.html'><h2>Rotating Globe with Pings</h2></a>
+    <p>If there's one thing that's better than a globe, it's a globe that rotates. This is the demo from the homepage of Planetaryjs.com, and so includes a custom auto-rotation plugin and zoom/drag integration.</p>
+    <span class='ui teal horizontal label'>plugins: earth, pings, drag, zoom</span>
+    <span class='ui orange horizontal label'>custom plugins</span>
+    <span class='ui black horizontal label'>d3: projections</span>
+  </div>
+</div>
+
+<div class='ui segment example-segment'>
+  <div class='ui top attached red label'>Level 3</div>
+  <div>
+    <a href='/examples/quake.html'><img src='/images/ex-quake.png' style='float: left; margin-right: 20px;'></a>
+    <a href='/examples/quake.html'><h2>2013 Seismic Activity Visualization</h2></a>
+    <p>A visualization of 2013 seismic activity. This demo shows the use of multiple custom plugins, D3 scales, fetching third party data, and DOM updates via D3.</p>
+    <span class='ui teal horizontal label'>plugins: earth, pings, drag, zoom</span>
+    <span class='ui orange horizontal label'>custom plugins</span>
+    <span class='ui black horizontal label'>d3: projections, scales, selections, events, external data</span>
   </div>
 </div>

site/public/examples/quake.ejs

@@ -1,6 +1,12 @@
-<h1>2013 Earthquake Data</h1>
+<div class="ui breadcrumb">
+  <a href='/examples/' class="section">Examples</a>
+  <i class="right arrow icon divider"></i>
+  <div class="active section">2013 Seismic Activity Visualization</div>
+</div>
 
-<p>This is a more advanced example of what can be built with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like the use of <a href='http://momentjs.com/'>Moment.js</a>, D3 scales, DOM manipulation, and loading external data.</p>
+<h1>2013 Seismic Activity Visualization</h1>
+
+<p>This is a more advanced example of what you can build with Planetary.js. The demo sets up a globe with some custom plugins (defined at the bottom of the JavaScript), and also demonstrates some non-Planetary.js-specific techniques, like the use of <a href='http://momentjs.com/'>Moment.js</a>, D3 scales, DOM manipulation, and loading external data.</p>
 
 <p><a href="/examples/quake/index.html">View the demo</a></p>
 

site/public/examples/rotating.ejs

@@ -1,4 +1,10 @@
-<h1>Basic Globe</h1>
+<div class="ui breadcrumb">
+  <a href='/examples/' class="section">Examples</a>
+  <i class="right arrow icon divider"></i>
+  <div class="active section">Rotating Globe with Pings</div>
+</div>
+
+<h1>Rotating Globe with Pings</h1>
 
 <p>This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.</p>