Improve styles

soffes · Apr 25, 2012 · 35ffa2d · 35ffa2d
1 parent 73c2d29
commit 35ffa2d
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 17 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,7 @@
 source :rubygems
 
 gem 'sinatra'
+gem 'thin'
 
 group :development do
   gem 'heroku'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -2,27 +2,33 @@ GEM
   remote: http://rubygems.org/
   specs:
     addressable (2.2.7)
-    heroku (2.21.2)
+    daemons (1.1.8)
+    eventmachine (0.12.10)
+    heroku (2.25.0)
       launchy (>= 0.3.2)
+      netrc (~> 0.7.1)
       rest-client (~> 1.6.1)
       rubyzip
-      term-ansicolor (~> 1.0.5)
-    launchy (2.0.5)
+    launchy (2.1.0)
       addressable (~> 2.2.6)
-    mime-types (1.17.2)
+    mime-types (1.18)
+    netrc (0.7.1)
     rack (1.4.1)
     rack-protection (1.2.0)
       rack
     rest-client (1.6.7)
       mime-types (>= 1.16)
-    rubyzip (0.9.6.1)
+    rubyzip (0.9.7)
     shotgun (0.9)
       rack (>= 1.0)
     sinatra (1.3.2)
       rack (~> 1.3, >= 1.3.6)
       rack-protection (~> 1.2)
       tilt (~> 1.3, >= 1.3.3)
-    term-ansicolor (1.0.7)
+    thin (1.3.1)
+      daemons (>= 1.0.9)
+      eventmachine (>= 0.12.6)
+      rack (>= 1.0.0)
     tilt (1.3.3)
 
 PLATFORMS
@@ -32,3 +38,4 @@ DEPENDENCIES
   heroku
   shotgun
   sinatra
+  thin
diff --git a/main.rb b/main.rb
@@ -1,3 +1,3 @@
 get '/' do
-  erb :index
+  erb :home
 end
diff --git a/public/style.css b/public/style.css
@@ -8,12 +8,12 @@ html {
 }
 
 body {
-  width: 640px;
-  padding: 2em 0;
+  max-width: 620px;
+  padding: 2em 10px;
   margin: 0 auto;
 }
 
-body, input {
+body, input, button {
   color: #444;
   font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 300;
@@ -27,6 +27,114 @@ h1 {
   margin-bottom: 0.5em;
 }
 
+a {
+  color: #0881b3;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+}
+
 p {
   margin:0 0 1em;
+  line-height: 1.4em;
+}
+
+/* Form */
+
+::-webkit-input-placeholder {
+  color: #9a9ea8;
+}
+
+:-moz-placeholder {
+  color: #9a9ea8;
+}
+
+:-ms-input-placeholder {
+  color: #9a9ea8;
+}
+
+input[type="email"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  font-size: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+  background-color: white;
+  padding: 5px;
+  border: 1px solid #b8bbc2;
+  font-size: 18px;
+  width: 300px;
+  height: 32px;
+  margin: 0 0 0.5em;
+}
+
+input[type="email"]:focus {
+  -webkit-box-shadow: 0 0 4px rgba(8, 129, 179, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0 0 4px rgba(8, 129, 179, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0 0 4px rgba(8, 129, 179, 0.5), 0 1px 4px rgba(0, 0, 0, 0.1) inset;
+  outline: 0;
+  border-color: #43acd7;
+}
+
+button {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  background-color: #fcfcfd;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfd), color-stop(100%, #e4e7ee));
+  background-image: -webkit-linear-gradient(top, #fcfcfd, #e4e7ee);
+  background-image: -moz-linear-gradient(top, #fcfcfd, #e4e7ee);
+  background-image: -ms-linear-gradient(top, #fcfcfd, #e4e7ee);
+  background-image: -o-linear-gradient(top, #fcfcfd, #e4e7ee);
+  background-image: linear-gradient(top, #fcfcfd, #e4e7ee);
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  border: 1px solid #959aa5;
+  cursor: pointer;
+  color: #606877;
+  height: 32px;
+  display: inline-block;
+  padding: 5px 8px;
+  vertical-align: top;
+  text-shadow: 0 1px 0 #fff;
+}
+
+button:hover, button:focus {
+  background-color: #fcfcfd;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfd), color-stop(100%, #f0f2f6));
+  background-image: -webkit-linear-gradient(top, #fcfcfd, #f0f2f6);
+  background-image: -moz-linear-gradient(top, #fcfcfd, #f0f2f6);
+  background-image: -ms-linear-gradient(top, #fcfcfd, #f0f2f6);
+  background-image: -o-linear-gradient(top, #fcfcfd, #f0f2f6);
+  background-image: linear-gradient(top, #fcfcfd, #f0f2f6);
+}
+
+button:active {
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+  background: #f0f2f6;
+  position: relative;
+  top: 1px;
 }
diff --git a/views/home.erb b/views/home.erb
@@ -0,0 +1,7 @@
+<h1>Nothing Magical</h1>
+<p>We're making some stuff we hope you'll like. It's not ready yet.</p>
+<p>You can follow us on <a href="http://twitter.com/nothingmagical" rel="external nofollow">Twitter</a> or <a href="http://angel.co/s/6wcaki" rel="external nofollow">AngelList</a>. If you're feeling adventurous, sign up to get notified when we launch products below.</p>
+<form action="http://nothingmagical.createsend.com/t/j/s/qyukj/" method="post">
+  <input type="email" name="cm-qyukj-qyukj" placeholder="your@email.com" />
+  <button type="submit">I'm Curious</button>
+</form>
diff --git a/views/index.erb → views/layout.erb b/views/index.erb → views/layout.erb
@@ -5,15 +5,10 @@
   <title>Nothing Magical</title>
   <link rel="author" href="humans.txt" />
   <link href="/style.css" rel="stylesheet" type="text/css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 </head>
 <body>
-  <h1>Nothing Magical</h1>
-  <p>We're making some stuff we hope you'll like.</p>
-  <p>It's not ready yet.</p>
-  <form action="http://nothingmagical.createsend.com/t/j/s/qyukj/" method="post">
-    <input type="text" name="cm-qyukj-qyukj" placeholder="your@email.com" />
-    <input type="submit" value="I'm Curious" />
-  </form>
+  <%= yield %>
   <script type="text/javascript">var _gauges=_gauges||[];(function(){var t=document.createElement('script');t.async=true;t.id='gauges-tracker';t.setAttribute('data-site-id','4f7a9a00f5a1f56b90000010');t.src='//secure.gaug.es/track.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(t, s);})();</script>
 </body>
 </html>