From e9a943c7566da00d3b3c047d10231d472b22bb4f Mon Sep 17 00:00:00 2001
From: Andrew Davidson <andrew@amdavidson.com>
Date: Thu, 25 Aug 2011 09:01:38 -0700
Subject: [PATCH] re-styling to match new amdavidson.com

---
 public/main.css  | 106 +++++++++++++++++++++++++++++++++++++++++++----
 views/layout.erb |   2 +
 views/new.erb    |   4 +-
 3 files changed, 103 insertions(+), 9 deletions(-)

diff --git a/public/main.css b/public/main.css
index fda6c8d..3fb911a 100755
--- a/public/main.css
+++ b/public/main.css
@@ -1,17 +1,15 @@
 body {
-  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'Trebuchet MS', 'Helvetica', 'Arial', sans-serif;
-  font-size: 12px;
-  line-height: 20px;
-  color: #555555;
+  font: 16px/24px "Muli", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
+  color: #444;
 	text-align: center;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 }
 
 h1 {
+  font: 64px/72px "PT Sans Narrow", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
 	padding-top:250px;
-	padding-bottom: 50px;
-	font-size:5em;
+  font-weight: 700;
 }
 
 a, a:visited {
@@ -37,4 +35,98 @@ ul, li {
 
 input {
 	text-align: center;
-}
\ No newline at end of file
+}
+
+	a.button, 
+	button,
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"] {
+		background: #eee; /* Old browsers */
+		background: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
+		background: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
+		background: -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
+		background: -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
+		background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
+	  border: 1px solid #aaa;
+	  border-top: 1px solid #ccc;
+	  border-left: 1px solid #ccc;
+	  padding: 4px 12px;
+	  -moz-border-radius: 3px;
+	  -webkit-border-radius: 3px;
+	  border-radius: 3px;
+	  color: #444;
+	  display: inline-block;
+	  font-size: 16px;
+	  font-weight: bold;
+	  text-decoration: none;
+	  text-shadow: 0 1px rgba(255, 255, 255, .75);
+	  cursor: pointer;
+	  margin-bottom: 20px;
+	  line-height: 21px;
+	  font-family: "Muli", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif; }
+	  
+	a.button:hover, 
+	button:hover,
+	input[type="submit"]:hover,
+	input[type="reset"]:hover,
+	input[type="button"]:hover {
+		color: #222;
+		background: #eee; /* Old browsers */
+		background: -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
+		background: -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
+		background: -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
+		background: -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
+		background: linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
+	  border: 1px solid #888;
+	  border-top: 1px solid #aaa;
+	  border-left: 1px solid #aaa; }
+	  
+  a.button:active, 
+  button:active,
+	input[type="submit"]:active,
+	input[type="reset"]:active,
+	input[type="button"]:active {
+    background: #eee; /* Old browsers */
+    background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,.3) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,.3))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* Opera11.10+ */
+    background: -ms-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* IE10+ */
+    background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* W3C */
+    border: 1px solid #888;
+    border-bottom: 1px solid #aaa;
+    border-right: 1px solid #aaa; }
+	
+	input[type="text"], 
+	input[type="password"],
+	input[type="email"],
+	textarea, 
+	select {
+		border: 1px solid #ccc;
+		padding: 6px 4px;
+		outline: none;
+		-moz-border-radius: 2px;
+		-webkit-border-radius: 2px;
+		border-radius: 2px;
+		font: 16px "Muli", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
+		color: #777;
+		margin: 0;
+		max-width: 100%;
+		margin-bottom: 20px;
+		background: #fff; }
+	select { 
+		padding: 0; }
+	input[type="text"]:focus,
+	input[type="password"]:focus,
+	input[type="email"]:focus, 
+	textarea:focus {
+		border: 1px solid #aaa;
+ 		color: #444;
+ 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
+		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
+		box-shadow:  0 0 3px rgba(0,0,0,.2); }
+	input[type="checkbox"] {
+		display: inline; }
diff --git a/views/layout.erb b/views/layout.erb
index 1080b56..af5b87d 100755
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -10,6 +10,8 @@
 		<script type="text/javascript">
 			Cufon.replace('h1, h2, h3');
 		</script>
+		
+    <link href='http://fonts.googleapis.com/css?family=Muli:300,300italic|PT+Sans+Narrow:700|Anonymous+Pro' rel='stylesheet' type='text/css'>	
 
 	</head>
 	<body>
diff --git a/views/new.erb b/views/new.erb
index 95a9e67..1df3545 100755
--- a/views/new.erb
+++ b/views/new.erb
@@ -1,8 +1,8 @@
 			<p style="margin-top:100px;">Shorten URL -- <a href="/upload">Upload File</a></p>
-			<% formtext = "Type URL. Press Enter." %>
+			<% formtext = "Paste URL here. Press Enter." %>
 
 			<form method="POST" action="/">
-				<input type="text" name="url" id="url" size="30" value="<%= formtext %>"
+				<input type="text" name="url" id="url" size="50" value="<%= formtext %>"
   				onfocus="if ( this.value=='<%= formtext %>' ) { this.value = ''; }"
   				onblur="if ( this.value=='' ) { this.value = '<%= formtext %>'; }"/><br/>
 				Embed as image? <input type="checkbox" name="image" />