Spruce up index page, adding social buttons

felixpalmer · Jun 30, 2014 · 72d5ba9 · 72d5ba9
1 parent cd19ef3
commit 72d5ba9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 43 deletions.
diff --git a/css/style.css b/css/style.css
@@ -2,54 +2,49 @@
 
 html {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 24px;
+  font-size: 20px;
   line-height: 1.2;
-  color: #444;
-  text-shadow: black 5px 5px 10px;
-  text-align: center;
+  color: #fff;
 }
 
-body {
+html, body, #container {
+  height: 100%;
+  width: 100%;
   margin: 0;
 }
 
-h1 {
-  font-size: 70px;
+p {
+  margin: 0 0 10px 0;
 }
 
-#title {
+#share-container {
   position: absolute;
-  z-index: 100;
-  top: 20px;
-  left: 80px;
+  top: 0;
+  background: #000;
+  opacity: 0.8;
+  color: #fff;
+  padding: 10px;
+  padding-left: 20px;
+  height: 120px;
+  width: 100%;
 }
 
-#bloglink {
-  position: absolute;
-  z-index: 100;
-  top: 160px;
-  left: 80px;
-  color: white;
+#share-container h1 {
+  float: left;
+  margin: 0 auto;
+  padding-right: 30px;
 }
 
-/* threejs container styles */
-#example-container {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  background:#111;
-  min-height: 600px;
-  min-width: 800px;
+#share-container p {
+  padding-top: 6px;
+  font-size: 12px;
 }
 
 #threejs-container {
-  position: relative;
-  background:#000;
+  background: #000;
   color: #666;
-  text-align: center;
   height: 100%;
+  width: 100%;
 }
 
 #threejs-container canvas {

diff --git a/index.html b/index.html
@@ -7,18 +7,28 @@
         <script data-main="../main" src="js/require.js"></script>
     </head>
     <body>
-        <div id="container">
-            <div>
-                <div id="example-container">
-                    <h1 id=title>LOD terrain</h1>
-                    <a id=bloglink href="http://www.pheelicks.com/2014/03/rendering-large-terrains/">How does this work?</a>
-                    <!-- Canvas to render on -->
-                    <div id="threejs-container">Generating world...</div>
-                </div>
-            </div>
-            <a href="https://github.com/felixpalmer/lod-terrain">
-                <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
-            </a>
-        </div>
+    <div id="container">
+        <div id="threejs-container">Loading...</div>
+        <div id="share-container">
+            <h1>LOD terrain</h1>
+            <br>
+            <a href="https://twitter.com/share" class="twitter-share-button" data-text="Rendering large terrains using WebGL" data-via="pheeelicks">Tweet</a>
+            <div class="g-plusone" data-size="medium"></div>
+            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+            <script type="text/javascript">
+             (function() {
+              var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+              po.src = 'https://apis.google.com/js/platform.js';
+              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+              })();
+             </script>
+            <br>
+            <a id=bloglink href="http://www.pheelicks.com/2014/03/rendering-large-terrains/">How does this work?</a>
+            <p>Use mouse to adjust camera, click to switch mode</p>
+         </div>
+        <a href="https://github.com/felixpalmer/lod-terrain">
+            <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub">
+        </a>
+    </div>
     </body>
 </html>