From c50c3a8a1add46364a31b8ac8e5a18c5b91b4a8d Mon Sep 17 00:00:00 2001
From: Brandon Tilley <brandon@brandontilley.com>
Date: Thu, 26 Dec 2013 10:35:27 -0800
Subject: [PATCH] (site) Fix wrapping on examples page on mobile

---
 site/public/css/planetaryjs.less | 7 +++++++
 site/public/examples/index.ejs   | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/site/public/css/planetaryjs.less b/site/public/css/planetaryjs.less
index 1fe2325..09a42d7 100644
--- a/site/public/css/planetaryjs.less
+++ b/site/public/css/planetaryjs.less
@@ -152,6 +152,13 @@ canvas#homepage-globe-canvas {
   img {
     width: 200px;
     height: 200px;
+    float: left;
+    margin-right: 20px;
+
+    @media screen and (max-width: 768px) {
+      display: block;
+      float: none;
+    }
   }
 }
 
diff --git a/site/public/examples/index.ejs b/site/public/examples/index.ejs
index 35c9b25..6b41b13 100644
--- a/site/public/examples/index.ejs
+++ b/site/public/examples/index.ejs
@@ -4,7 +4,7 @@
 
 <div class='ui top attached segment example-segment'>
   <div>
-    <a href='/examples/basic.html'><img src='/images/ex-basic.png' style='float: left; margin-right: 20px;'></a>
+    <a href='/examples/basic.html'><img src='/images/ex-basic.png'></a>
     <a href='/examples/basic.html'><h2><i class='icon black globe'></i>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 red horizontal label'>plugins: earth</span>
@@ -14,7 +14,7 @@
 
 <div class='ui attached segment example-segment'>
   <div>
-    <a href='/examples/rotating.html'><img src='/images/ex-rotating.png' style='float: left; margin-right: 20px;'></a>
+    <a href='/examples/rotating.html'><img src='/images/ex-rotating.png'></a>
     <a href='/examples/rotating.html'><h2><i class='icon black basic desk globe'></i>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 red horizontal label'>plugins: earth, pings, drag, zoom</span>
@@ -25,7 +25,7 @@
 
 <div class='ui bottom attached segment example-segment'>
   <div>
-    <a href='/examples/quake.html'><img src='/images/ex-quake.png' style='float: left; margin-right: 20px;'></a>
+    <a href='/examples/quake.html'><img src='/images/ex-quake.png'></a>
     <a href='/examples/quake.html'><h2><i class='icon black bullseye'></i>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 red horizontal label'>plugins: earth, pings, drag, zoom</span>