More layout improvements

index.html

@@ -97,9 +97,15 @@
 				position: absolute;
 				left: 180px;
 				top: 0px;
-				margin: 28px 20px;
+				padding: 28px 20px;
 			}
 
+				#viewer #more {
+					position: absolute;
+					top: 32px;
+					right: 20px;
+				}
+
 				#viewer img {
 					display: block;
 					width: 50%;
@@ -172,6 +178,9 @@
 					position: absolute;
 					left: 0;
 					top: 56px;
+					width: 100%;
+					height: calc(100% - 56px);
+					overflow: auto;
 				}
 				#expandButton{
 					display: block;
@@ -292,86 +301,86 @@
 		<div id="viewer">
 
 			<h2>featured projects</h2>
-			<a href="https://plus.google.com/+ThreejsOrg" style="position:absolute;top:4px;right:0px;">submit project</a>
-
-			<a href="http://a-way-to-go.com/" target="_blank"><img src="files/projects/waytogo.png"></a>
-			<a href="http://www.urbangalaxyonline.com/" target="_blank"><img src="files/projects/urbangalaxyonline.jpg"></a>
-			<a href="http://www.leiainc.com/" target="_blank"><img src="files/projects/leiainc.png"></a>
-			<a href="http://www.heroforge.com/" target="_blank"><img src="files/projects/heroforge.png"></a>
-			<a href="http://www.bullseyesplayground.com/" target="_blank"><img src="files/projects/bullseyesplayground.jpg"></a>
-			<a href="http://christmasexperiments.com/" target="_blank"><img src="files/projects/christmasexperiments2014.png"></a>
-			<a href="http://cabbi.bo/" target="_blank"><img src="files/projects/cabbibo.png"></a>
-			<a href="http://thedivergentseries.com/" target="_blank"><img src="files/projects/thedivergentseries.png"></a>
-			<a href="http://mozvr.com/" target="_blank"><img src="files/projects/mozvr.jpg"></a>
-			<a href="http://peoplebehindthepixels.com/" target="_blank"><img src="files/projects/peoplebehindthepixels.jpg"></a>
-			<a href="http://brian.peiris.io/RiftSketch/" target="_blank"><img src="files/projects/riftsketch.jpg"></a>
-			<a href="http://pablotheflamingo.com/" target="_blank"><img src="files/projects/pablotheflamingo.jpg"></a>
-			<a href="http://www.shapespark.com/" target="_blank"><img src="files/projects/shapespark.png"></a>
-			<a href="http://witnessgotham.com/" target="_blank"><img src="files/projects/witnessgotham.jpg"></a>
-			<a href="http://autodesk360.com/" target="_blank"><img src="files/projects/a360.png"></a>
-			<a href="http://gisele.underarmour.com/" target="_blank"><img src="files/projects/gisele.jpg"></a>
-			<a href="http://cityofdrones.io/" target="_blank"><img src="files/projects/cityofdrones.png"></a>
-			<a href="https://www.g-star.com/en_nl/newdenimarrivals" target="_blank"><img src="files/projects/newdenimarrivals.png"></a>
-			<a href="https://www.batmanarkhamknight.com/en_US/batmobile" target="_blank"><img src="files/projects/batmanarkhamknight.jpg"></a>
-			<a href="http://potree.org/wp/demo/" target="_blank"><img src="files/projects/potree.jpg"></a>
-			<a href="http://www.overthetinyhills.com/" target="_blank"><img src="files/projects/overthetinyhills.jpg"></a>
-			<a href="http://vr.chromeexperiments.com/" target="_blank"><img src="files/projects/cardboard.jpg"></a>
-			<a href="http://timeinvariant.github.io/gorescript/play/" target="_blank"><img src="files/projects/gorescript.jpg"></a>
-			<a href="http://www.google.com/doodles/rubiks-cube" target="_blank"><img src="files/projects/rubiks-cube.jpg"></a>
-			<a href="http://www.georgeandjonathan.com/" target="_blank"><img src="files/projects/georgeandjonathan.jpg"></a>
-			<a href="http://www.nike.com/xp/b/genealogyofthefree/zoetrope.html" target="_blank"><img src="files/projects/genealogyofthefree.jpg"></a>
-			<a href="http://i-remember.fr/en" target="_blank"><img src="files/projects/iremember.png"></a>
-			<a href="http://ogreen.special-t.com/en/" target="_blank"><img src="files/projects/ogreen.jpg"></a>
-			<a href="http://verold.com/" target="_blank"><img src="files/projects/verold.png"></a>
-			<a href="http://carvisualizer.plus360degrees.com/classics/" target="_blank"><img src="files/projects/classics.png"></a>
-			<a href="http://photosynth.net/preview" target="_blank"><img src="files/projects/photosynth.png"></a>
-			<a href="http://helloracer.com/racer-s/" target="_blank"><img src="files/projects/racer-s.jpg"></a>
-			<a href="http://christmasexperiments.com/2013/" target="_blank"><img src="files/projects/christmasexperiments.jpg"></a>
-			<a href="http://middle-earth.thehobbit.com/" target="_blank"><img src="files/projects/thehobbit.jpg"></a>
-			<a href="http://asmallgame.com/kiddisco/" target="_blank"><img src="files/projects/kiddisco.jpg"></a>
-			<a href="http://gravitymovie.warnerbros.com/" target="_blank"><img src="files/projects/gravity.jpg"></a>
-			<a href="https://www.justareflektor.com/" target="_blank"><img src="files/projects/reflektor.jpg"></a>
-			<a href="http://clara.io/" target="_blank"><img src="files/projects/clara.png"></a>
-			<a href="http://hellorun.helloenjoy.com" target="_blank"><img src="files/projects/hellorun.jpg"></a>
-			<a href="http://acko.net/" target="_blank"><img src="files/projects/acko.jpg"></a>
-			<a href="http://advertising.apple.com/" target="_blank"><img src="files/projects/iad.png"></a>
-			<a href="http://cubeslam.com/" target="_blank"><img src="files/projects/cubeslam.jpg"></a>
-			<a href="http://hyperlapse.tllabs.io/" target="_blank"><img src="files/projects/hyperlapse.jpg"></a>
-			<a href="http://chrome.com/maze/" target="_blank"><img src="files/projects/wwmaze.jpg"></a>
-			<a href="http://antivj.com/paleodictyon_app/" target="_blank"><img src="files/projects/paleodictyon.jpg"></a>
-			<a href="http://www.findyourwaytooz.com/" target="_blank"><img src="files/projects/findyourwaytooz.jpg"></a>
-			<a href="http://voxeljs.com/" target="_blank"><img src="files/projects/voxeljs.jpg"></a>
-			<a href="http://christmasexperiments.com/2012/23/" target="_blank"><img src="files/projects/neverseenthesky.jpg"></a>
-			<a href="http://www.google.com/zeitgeist/2012/#explore" target="_blank"><img src="files/projects/zeitgeist2012.jpg"></a>
-			<a href="http://lab.sehsucht.de/" target="_blank"><img src="files/projects/zoetrope.jpg"></a>
-			<a href="http://www.pillandpillow.com/mvsw/site/" target="_blank"><img src="files/projects/mvsw.jpg"></a>
-			<a href="http://thecarpandtheseagull.thecreatorsproject.com/" target="_blank"><img src="files/projects/thecarpandtheseagull.jpg"></a>
-			<a href="http://workshop.chromeexperiments.com/stars/" target="_blank"><img src="files/projects/100000stars.jpg"></a>
-			<a href="http://theywilleatyou.com/" target="_blank"><img src="files/projects/theywilleatyou.jpg"></a>
-			<a href="http://blast.hellohikimori.com/" target="_blank"><img src="files/projects/blast.jpg"></a>
-			<a href="http://hexgl.bkcore.com/" target="_blank"><img src="files/projects/hexgl.jpg"></a>
-			<a href="http://workshop.chromeexperiments.com/projects/armsglobe/" target="_blank"><img src="files/projects/armsglobe.jpg"></a>
-			<a href="http://carvisualizer.plus360degrees.com/threejs/" target="_blank"><img src="files/projects/carvisualizer.jpg"></a>
-			<a href="http://www.chromeweblab.com/" target="_blank"><img src="files/projects/chromeweblab.jpg"></a>
-			<a href="http://lightgraffiti.littlesun.com/" target="_blank"><img src="files/projects/lightgraffiti.jpg"></a>
-			<a href="http://www.pajamaclubmusic.com/3d/" target="_blank"><img src="files/projects/tntfortwo.jpg"></a>
-			<a href="http://www.chaostoperfection.com/" target="_blank"><img src="files/projects/chaostoperfection.jpg"></a>
-			<a href="http://www.sketchpatch.net/labs/livecodelabIntro.html" target="_blank"><img src="files/projects/livecodelab.jpg"></a>
-			<a href="http://collinhover.github.com/kaiopua/" target="_blank"><img src="files/projects/kaiopua.jpg"></a>
-			<a href="http://chandlerprall.github.com/Physijs/" target="_blank"><img src="files/projects/physijs.jpg"></a>
-			<a href="http://www.playmapscube.com/" target="_blank"><img src="files/projects/googlecube.jpg"></a>
-			<a href="http://triggerrally.com/" target="_blank"><img src="files/projects/triggerrally.jpg"></a>
-			<!-- <a href="http://yagiz.me/zombiesvscow/" target="_blank"><img src="files/projects/zombiesvscow.jpg"></a> -->
-			<a href="http://blackjk3.github.com/threefab/" target="_blank"><img src="files/projects/threefab.jpg"></a>
-			<a href="http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html" target="_blank"><img src="files/projects/nyancat.jpg"></a>
-			<a href="http://idflood.github.io/ThreeNodes.js/" target="_blank"><img src="files/projects/threenodes.jpg"></a>
-			<!-- <a href="http://www.adidas.com/football/uk/pages/f50/" target="_blank"><img src="files/projects/f50.jpg"></a> -->
-			<a href="http://lights.helloenjoy.com/" target="_blank"><img src="files/projects/lights.jpg"></a>
-			<a href="http://inear.se/beanstalk/" target="_blank"><img src="files/projects/beanstalk.jpg"></a>
-			<!-- <a href="http://superfad.com/missioncontrol/" target="_blank"><img src="files/projects/missioncontrol.jpg"></a> -->
-			<a href="http://ro.me/" target="_blank"><img src="files/projects/rome.jpg"></a>
-			<a href="http://data-arts.appspot.com/globe" target="_blank"><img src="files/projects/globe.jpg"></a>
-			<a href="http://helloracer.com/webgl/" target="_blank"><img src="files/projects/helloracer.jpg"></a>
+			<a id="more" href="https://plus.google.com/+ThreejsOrg">more projects</a>
+
+			<a href="http://a-way-to-go.com/" target="_blank"><img src="files/projects/waytogo.png" width="200" height="150"></a>
+			<a href="http://www.urbangalaxyonline.com/" target="_blank"><img src="files/projects/urbangalaxyonline.jpg" width="200" height="150"></a>
+			<a href="http://www.leiainc.com/" target="_blank"><img src="files/projects/leiainc.png" width="200" height="150"></a>
+			<a href="http://www.heroforge.com/" target="_blank"><img src="files/projects/heroforge.png" width="200" height="150"></a>
+			<a href="http://www.bullseyesplayground.com/" target="_blank"><img src="files/projects/bullseyesplayground.jpg" width="200" height="150"></a>
+			<a href="http://christmasexperiments.com/" target="_blank"><img src="files/projects/christmasexperiments2014.png" width="200" height="150"></a>
+			<a href="http://cabbi.bo/" target="_blank"><img src="files/projects/cabbibo.png" width="200" height="150"></a>
+			<a href="http://thedivergentseries.com/" target="_blank"><img src="files/projects/thedivergentseries.png" width="200" height="150"></a>
+			<a href="http://mozvr.com/" target="_blank"><img src="files/projects/mozvr.jpg" width="200" height="150"></a>
+			<a href="http://peoplebehindthepixels.com/" target="_blank"><img src="files/projects/peoplebehindthepixels.jpg" width="200" height="150"></a>
+			<a href="http://brian.peiris.io/RiftSketch/" target="_blank"><img src="files/projects/riftsketch.jpg" width="200" height="150"></a>
+			<a href="http://pablotheflamingo.com/" target="_blank"><img src="files/projects/pablotheflamingo.jpg" width="200" height="150"></a>
+			<a href="http://www.shapespark.com/" target="_blank"><img src="files/projects/shapespark.png" width="200" height="150"></a>
+			<a href="http://witnessgotham.com/" target="_blank"><img src="files/projects/witnessgotham.jpg" width="200" height="150"></a>
+			<a href="http://autodesk360.com/" target="_blank"><img src="files/projects/a360.png" width="200" height="150"></a>
+			<a href="http://gisele.underarmour.com/" target="_blank"><img src="files/projects/gisele.jpg" width="200" height="150"></a>
+			<a href="http://cityofdrones.io/" target="_blank"><img src="files/projects/cityofdrones.png" width="200" height="150"></a>
+			<a href="https://www.g-star.com/en_nl/newdenimarrivals" target="_blank"><img src="files/projects/newdenimarrivals.png" width="200" height="150"></a>
+			<a href="https://www.batmanarkhamknight.com/en_US/batmobile" target="_blank"><img src="files/projects/batmanarkhamknight.jpg" width="200" height="150"></a>
+			<a href="http://potree.org/wp/demo/" target="_blank"><img src="files/projects/potree.jpg" width="200" height="150"></a>
+			<a href="http://www.overthetinyhills.com/" target="_blank"><img src="files/projects/overthetinyhills.jpg" width="200" height="150"></a>
+			<a href="http://vr.chromeexperiments.com/" target="_blank"><img src="files/projects/cardboard.jpg" width="200" height="150"></a>
+			<a href="http://timeinvariant.github.io/gorescript/play/" target="_blank"><img src="files/projects/gorescript.jpg" width="200" height="150"></a>
+			<a href="http://www.google.com/doodles/rubiks-cube" target="_blank"><img src="files/projects/rubiks-cube.jpg" width="200" height="150"></a>
+			<a href="http://www.georgeandjonathan.com/" target="_blank"><img src="files/projects/georgeandjonathan.jpg" width="200" height="150"></a>
+			<a href="http://www.nike.com/xp/b/genealogyofthefree/zoetrope.html" target="_blank"><img src="files/projects/genealogyofthefree.jpg" width="200" height="150"></a>
+			<a href="http://i-remember.fr/en" target="_blank"><img src="files/projects/iremember.png" width="200" height="150"></a>
+			<a href="http://ogreen.special-t.com/en/" target="_blank"><img src="files/projects/ogreen.jpg" width="200" height="150"></a>
+			<a href="http://verold.com/" target="_blank"><img src="files/projects/verold.png" width="200" height="150"></a>
+			<a href="http://carvisualizer.plus360degrees.com/classics/" target="_blank"><img src="files/projects/classics.png" width="200" height="150"></a>
+			<a href="http://photosynth.net/preview" target="_blank"><img src="files/projects/photosynth.png" width="200" height="150"></a>
+			<a href="http://helloracer.com/racer-s/" target="_blank"><img src="files/projects/racer-s.jpg" width="200" height="150"></a>
+			<a href="http://christmasexperiments.com/2013/" target="_blank"><img src="files/projects/christmasexperiments.jpg" width="200" height="150"></a>
+			<a href="http://middle-earth.thehobbit.com/" target="_blank"><img src="files/projects/thehobbit.jpg" width="200" height="150"></a>
+			<a href="http://asmallgame.com/kiddisco/" target="_blank"><img src="files/projects/kiddisco.jpg" width="200" height="150"></a>
+			<a href="http://gravitymovie.warnerbros.com/" target="_blank"><img src="files/projects/gravity.jpg" width="200" height="150"></a>
+			<a href="https://www.justareflektor.com/" target="_blank"><img src="files/projects/reflektor.jpg" width="200" height="150"></a>
+			<a href="http://clara.io/" target="_blank"><img src="files/projects/clara.png" width="200" height="150"></a>
+			<a href="http://hellorun.helloenjoy.com" target="_blank"><img src="files/projects/hellorun.jpg" width="200" height="150"></a>
+			<a href="http://acko.net/" target="_blank"><img src="files/projects/acko.jpg" width="200" height="150"></a>
+			<a href="http://advertising.apple.com/" target="_blank"><img src="files/projects/iad.png" width="200" height="150"></a>
+			<a href="http://cubeslam.com/" target="_blank"><img src="files/projects/cubeslam.jpg" width="200" height="150"></a>
+			<a href="http://hyperlapse.tllabs.io/" target="_blank"><img src="files/projects/hyperlapse.jpg" width="200" height="150"></a>
+			<a href="http://chrome.com/maze/" target="_blank"><img src="files/projects/wwmaze.jpg" width="200" height="150"></a>
+			<a href="http://antivj.com/paleodictyon_app/" target="_blank"><img src="files/projects/paleodictyon.jpg" width="200" height="150"></a>
+			<a href="http://www.findyourwaytooz.com/" target="_blank"><img src="files/projects/findyourwaytooz.jpg" width="200" height="150"></a>
+			<a href="http://voxeljs.com/" target="_blank"><img src="files/projects/voxeljs.jpg" width="200" height="150"></a>
+			<a href="http://christmasexperiments.com/2012/23/" target="_blank"><img src="files/projects/neverseenthesky.jpg" width="200" height="150"></a>
+			<a href="http://www.google.com/zeitgeist/2012/#explore" target="_blank"><img src="files/projects/zeitgeist2012.jpg" width="200" height="150"></a>
+			<a href="http://lab.sehsucht.de/" target="_blank"><img src="files/projects/zoetrope.jpg" width="200" height="150"></a>
+			<a href="http://www.pillandpillow.com/mvsw/site/" target="_blank"><img src="files/projects/mvsw.jpg" width="200" height="150"></a>
+			<a href="http://thecarpandtheseagull.thecreatorsproject.com/" target="_blank"><img src="files/projects/thecarpandtheseagull.jpg" width="200" height="150"></a>
+			<a href="http://workshop.chromeexperiments.com/stars/" target="_blank"><img src="files/projects/100000stars.jpg" width="200" height="150"></a>
+			<a href="http://theywilleatyou.com/" target="_blank"><img src="files/projects/theywilleatyou.jpg" width="200" height="150"></a>
+			<a href="http://blast.hellohikimori.com/" target="_blank"><img src="files/projects/blast.jpg" width="200" height="150"></a>
+			<a href="http://hexgl.bkcore.com/" target="_blank"><img src="files/projects/hexgl.jpg" width="200" height="150"></a>
+			<a href="http://workshop.chromeexperiments.com/projects/armsglobe/" target="_blank"><img src="files/projects/armsglobe.jpg" width="200" height="150"></a>
+			<a href="http://carvisualizer.plus360degrees.com/threejs/" target="_blank"><img src="files/projects/carvisualizer.jpg" width="200" height="150"></a>
+			<a href="http://www.chromeweblab.com/" target="_blank"><img src="files/projects/chromeweblab.jpg" width="200" height="150"></a>
+			<a href="http://lightgraffiti.littlesun.com/" target="_blank"><img src="files/projects/lightgraffiti.jpg" width="200" height="150"></a>
+			<a href="http://www.pajamaclubmusic.com/3d/" target="_blank"><img src="files/projects/tntfortwo.jpg" width="200" height="150"></a>
+			<a href="http://www.chaostoperfection.com/" target="_blank"><img src="files/projects/chaostoperfection.jpg" width="200" height="150"></a>
+			<a href="http://www.sketchpatch.net/labs/livecodelabIntro.html" target="_blank"><img src="files/projects/livecodelab.jpg" width="200" height="150"></a>
+			<a href="http://collinhover.github.com/kaiopua/" target="_blank"><img src="files/projects/kaiopua.jpg" width="200" height="150"></a>
+			<a href="http://chandlerprall.github.com/Physijs/" target="_blank"><img src="files/projects/physijs.jpg" width="200" height="150"></a>
+			<a href="http://www.playmapscube.com/" target="_blank"><img src="files/projects/googlecube.jpg" width="200" height="150"></a>
+			<a href="http://triggerrally.com/" target="_blank"><img src="files/projects/triggerrally.jpg" width="200" height="150"></a>
+			<!-- <a href="http://yagiz.me/zombiesvscow/" target="_blank"><img src="files/projects/zombiesvscow.jpg" width="200" height="150"></a> -->
+			<a href="http://blackjk3.github.com/threefab/" target="_blank"><img src="files/projects/threefab.jpg" width="200" height="150"></a>
+			<a href="http://dl.dropbox.com/u/6213850/WebGL/nyanCat/nyan.html" target="_blank"><img src="files/projects/nyancat.jpg" width="200" height="150"></a>
+			<a href="http://idflood.github.io/ThreeNodes.js/" target="_blank"><img src="files/projects/threenodes.jpg" width="200" height="150"></a>
+			<!-- <a href="http://www.adidas.com/football/uk/pages/f50/" target="_blank"><img src="files/projects/f50.jpg" width="200" height="150"></a> -->
+			<a href="http://lights.helloenjoy.com/" target="_blank"><img src="files/projects/lights.jpg" width="200" height="150"></a>
+			<a href="http://inear.se/beanstalk/" target="_blank"><img src="files/projects/beanstalk.jpg" width="200" height="150"></a>
+			<!-- <a href="http://superfad.com/missioncontrol/" target="_blank"><img src="files/projects/missioncontrol.jpg" width="200" height="150"></a> -->
+			<a href="http://ro.me/" target="_blank"><img src="files/projects/rome.jpg" width="200" height="150"></a>
+			<a href="http://data-arts.appspot.com/globe" target="_blank"><img src="files/projects/globe.jpg" width="200" height="150"></a>
+			<a href="http://helloracer.com/webgl/" target="_blank"><img src="files/projects/helloracer.jpg" width="200" height="150"></a>
 
 		</div>