[#20] Added about, donate and get involved

* Add link to a PayPal donate button
* Add link to GitHub
* Add information about the project and links to add issues and/or contact me

html/css/main.css

@@ -5,18 +5,28 @@
 .padded { margin: 10px; }
 
 body { background: url("../images/ice.png"); margin-bottom: 100px; }
-h1 { font-family: 'Press Start 2P', cursive; margin-left: 10px; }
+h1 { font-family: 'Press Start 2P', cursive; font-size: 24px; margin-left: 10px; }
 h1 img { height: 64px; width: 64px; vertical-align: bottom; }
+h2 { font-family: 'Press Start 2P', cursive; font-size: 16px; margin-left: 10px; }
 p { margin-left: 10px; margin-right: 10px; }
 
 #body { background: rgba(230, 230, 230, 0.90); box-shadow: 10px 10px 20px #666; margin-top: 50px; }
+#border_stone { background: url("../images/stone_brick.png"); height: 32px; box-shadow: 2px 0px 4px #444; }
+#border_grass { background: url("../images/grass_side.png"); height: 32px; box-shadow: 2px 0px 4px #444; }
+#border_bedrock { background: url("../images/bedrock.png"); height: 32px; box-shadow: 2px 0px 4px #444; }
+#crafting { margin-bottom: 64px; }
 #crafting_output { margin-left: 10px; width: 920px; }
 #crafting_output th { background: #f8f8f8; border-left: 1px solid #bbb; font-weight: bold; padding: 10px; }
 #crafting_output td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
+#footer { background: #3E1D0A; color: white; padding-top: 10px; };
+#footer iframe { display: inline-block; }
+#footer a { color: gray; }
 #header { background: url("../images/stone_brick_light.png"); height: 64px; }
+#header h1 { font-size: 32px; }
 #header img { height: 96px; width: 96px; margin-left: -32px; margin-top: -32px; }
-#header_border { background: url("../images/stone_brick.png"); height: 32px; margin-bottom: 32px; }
 #recipebook_load_button { margin-left: 5px; width: 60px; }
 #recipebook_table { margin-left: 10px; width: 920px; }
 #recipebook_table td { background: #f8f8f8; border-left: 1px solid #bbb; padding: 10px; }
 #recipebook_url { width: 600px; }
+#recipebooks { margin-top: 32px; margin-bottom: 32px; }
+

html/index.html

@@ -14,7 +14,7 @@
       <div id="header" class="grid_12 alpha omega">
         <h1><img src="images/workbench_front.png"> Crafting Guide</h1>
       </div> <!-- #header -->
-      <div id="header_border" class="grid_12 alpha omega">&nbsp;</div>
+      <div id="border_stone" class="grid_12 alpha omega">&nbsp;</div>
 
       <div id="recipebooks" class="grid_12 alpha omega">
         <h1><img src="images/bookshelf.png"> Recipe Books</h1>
@@ -50,6 +50,41 @@
         </table>
         <div id="crafting_error" class="error"></div>
       </div> <!-- #crafting -->
+
+      <div id="border_grass" class="grid_12 alpha omega">&nbsp;</div>
+      <div id="footer" class="grid_12 alpha omega">
+        <div class="grid_4 alpha">
+          <h2>About</h2>
+          <p>Crafting Guide shows you what materials you need to craft even the most complex items, including all the
+            tools you'd need (from a crafting table to an industrial centrifuge).</p>
+          <p>If you have any questions, comments or requests, feel free to <a
+            href="https://github.com/andrewminer/crafting-guide/issues/new">create an issue</a> on GitHub or <a
+            href="mailto:andrewminer-at-mac.com">email me</a>.</p>
+        </div>
+        <div class="grid_4">
+          <h2>Donate</h2>
+            <p>Crafting Guide is free for all, but if you find it helpful, donations in any amount are gratefully
+              accepted.</p>
+            <br><br>
+            <form action="https://www.paypal.com/cgi-bin/webscr" class="centered" method="post" target="_top">
+              <input type="hidden" name="cmd" value="_s-xclick">
+              <input type="hidden" name="hosted_button_id" value="GCB2TYZJYLAE6">
+              <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0"
+                name="submit" alt="PayPal - The safer, easier way to pay online!">
+              <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
+            </form>
+        </div> <!-- .grid_4 -->
+        <div class="grid_4 omega">
+          <h2>Get Involved</h2>
+          <p>Crafting Guide is completely open-source, and you can help!  Whether you want to write a recipe book (all
+            simple JSON), or implement new features, just head over to GitHub to get started.</p>
+          <p class="centered">
+            <iframe src="http://ghbtns.com/github-btn.html?user=andrewminer&repo=crafting-guide&type=fork&size=large"
+              allowtransparency="true" frameborder="0" scrolling="0" width="100" height="32"></iframe>
+          </p>
+        </div> <!-- .grid_4.omega -->
+      </div> <!-- #footer -->
+      <div id="border_bedrock" class="grid_12 alpha omega">&nbsp;</div>
     </div> <!-- .container_12 -->
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>