From 54a2ecd4536016b37e51019273e62ca12482f745 Mon Sep 17 00:00:00 2001
From: Joanthan Bernard <jbernard2@mmm.com>
Date: Tue, 9 Dec 2014 14:59:06 -0600
Subject: [PATCH] Starting to style Snake (WIP).

---
 snake/snake.html | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)
diff --git a/snake/snake.html b/snake/snake.html
index 5d89a4b..db6c5de 100644
--- a/snake/snake.html
+++ b/snake/snake.html
@@ -1,8 +1,45 @@
 <!doctype html>
 <html>
     <head>
+        <meta name=charset value=utf-8>
+        <title>Snake</title>
+        <link href='http://fonts.googleapis.com/css?family=Exo+2:400,900' rel='stylesheet' type='text/css'>
         <script src="snake.js" type="application/javascript"></script> 
         <style type="text/css">
+
+            /* Pallete: http://www.colourlovers.com/palette/1832769/100_Following_Me
+             * A70407 - Red
+             * F4A612 - Orange
+             * FFFB51 - Soft Yellow
+             * 1E4119 - Green
+             * 0B0C38 - Blue */
+            * { margin: 0;
+                padding: 0; }
+
+            html {
+              background-color: white;
+              color: #354650;
+              
+              font-family: sans-serif;
+            }
+
+            body {
+              padding: 1em;
+            }
+
+            header {
+              background-color: #1E4119;
+              color: #FFFB51;
+              padding: 0.5rem 1rem;
+              font-family: "Exo 2";
+              font-weight: 900;
+
+              position: absolute;
+              left: 0; right: 0; top: 0;
+            }
+
+            header > h1 { font-size: 300%; }
+
             canvas { border: solid thin gray; }
 
             section {
@@ -10,6 +47,8 @@
                 margin: 0.5rem;
                 position: relative; }
 
+            section:first-of-type { margin-top: 6rem; }
+
             label {
                 display: inline-block;
                 width: 12rem; }
@@ -19,10 +58,13 @@
                 right: 0; }
 
             #editorControls { display: none; }
+
+            @media (max-width: 600px) {
+                header { text-align: center; } }
         </style>
     </head>
     <body>
-        <h1>Snake</h1>
+        <header><h1>Snake</h1></header>
         <section id=controls>
             <label>Rows</label>
             <input id=rows type=text placeholder="Rows" value=20><br>
