re-styling to match new amdavidson.com

This commit is contained in:
Andrew Davidson 2011-08-25 09:01:38 -07:00
parent b5eb8eb9ef
commit e9a943c756
3 changed files with 103 additions and 9 deletions

View file

@ -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;
}
}
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; }

View file

@ -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>

View file

@ -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" />