andy/planetary.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(site) Fix wrapping on examples page on mobile

Browse Source
This commit is contained in:
Brandon Tilley 2013-12-26 10:35:27 -08:00
parent 99a3a9374f
commit c50c3a8a1a
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
site/public/css/planetaryjs.less
View File

@ -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;
}
}
}

6
site/public/examples/index.ejs
View File

@ -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>