design improvements

chusopr · Feb 22, 2012 · 1aa0244 · 1aa0244
1 parent 286acc4
commit 1aa0244
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 31 deletions.
diff --git a/inc/footer.php b/inc/footer.php
@@ -1,19 +1,18 @@
-    <div id="footer">
-      <p class="copy">
-        &copy; 2009 <a href="http://gasteroprod.com/">Nicolas HOIZEY</a>
-      </p>
-      <p>
-        <a href="<?php echo $casimir->base_url; ?>">Home</a> |
-        <a href="<?php echo $casimir->base_url; ?>tools.php">Tools</a> |
-        <a href="<?php echo $casimir->base_url; ?>stats.php#lastday">Stats</a> |
-        <a href="http://wiki.github.com/nhoizey/casimir">About Cas.im/ir</a>
-      </p>
-    </div>
-    <?php
-    if (file_exists('user/footer.php')) {
-      require 'user/footer.php';
-    }
-    ?>
+<footer>
+      <nav>
+        <ul>
+          <li><a href="<?php echo $casimir->base_url; ?>">Home</a></li>
+          <li><a href="<?php echo $casimir->base_url; ?>tools.php">Tools</a></li>
+          <li><a href="<?php echo $casimir->base_url; ?>stats.php#lastday">Stats</a></li>
+          <li class="poweredby"><a href="https://github.com/nhoizey/casimir#readme">Powered by Cas.im/ir</a></li>
+        </ul>
+      </nav>
+      <?php
+      if (file_exists('user/footer.php')) {
+        require 'user/footer.php';
+      }
+      ?>
+    </footer>
   </div>
 </body>
 

diff --git a/inc/header.php b/inc/header.php
@@ -1,5 +1,4 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
@@ -15,5 +14,4 @@
 
 <body onload="document.getElementById('long').focus();">
 	<div id="main">
-		<h2>Yet Another URL Shortener</h2>
 		<h1><a href="<?php echo $casimir->base_url; ?>"><?php echo INSTANCE_NAME; ?></a></h1>
diff --git a/screen.css b/screen.css
@@ -2,15 +2,16 @@
 
 body {
   font-family: Optima, "Trebuchet MS", Lucida, Arial, Geneva, Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
-  font-size: 1em;
+  font-size: 1.4em;
   margin: 0;
   padding: 0;
   color: #333;
-  background-color: #fff;
+  background-color: #eee;
 }
 
 #main {
   margin: 0 auto;
+  padding: 0;
   width: 750px;
 	background: url(img/casimir.png) right top no-repeat;
 }
@@ -36,6 +37,36 @@ dt {
 	margin-top: 1em;
 }
 
+dd {
+  margin-left: 20px;
+}
+
+input {
+  font-size: 1em;
+  padding: 0.2em; 
+  -webkit-border-radius: 0.2em; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
+     -moz-border-radius: 0.2em; /* FF1-3.6 */
+          border-radius: 0.2em; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */}
+
+input[type=text] {
+  max-width: 600px;
+  border: 2px #ddd solid;
+}
+
+#submit {
+  color: #eee; 
+  background-color: #18a5cc;
+  border: none;
+
+  background-color: #F85E2A;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#F85E2A), to(#EF372E)); /* Saf4+, Chrome */
+  background-image: -webkit-linear-gradient(top, #F85E2A, #EF372E); /* Chrome 10+, Saf5.1+, iOS 5+ */
+  background-image:    -moz-linear-gradient(top, #F85E2A, #EF372E); /* FF3.6 */
+  background-image:     -ms-linear-gradient(top, #F85E2A, #EF372E); /* IE10 */
+  background-image:      -o-linear-gradient(top, #F85E2A, #EF372E); /* Opera 11.10+ */
+  background-image:         linear-gradient(to bottom, #F85E2A, #EF372E);
+}
+
 .error {
   color: red;
 }
@@ -53,33 +84,46 @@ dt {
   padding-left: 0;
 }
 
-  .tablinks li {
-    display: inline;
-    padding: 0 1em;
-  }
-
-.tabs {
-
+.tablinks li {
+  display: inline;
+  padding: 0 1em;
 }
 
 .tabs div {
-  display:none;
+  display: none;
 }
 
 .tabs div:target {
-  display:block;
+  display: block;
 }
 
+footer {
+  margin-top: 2em;
+}
 
-#footer {
+footer nav {
 	margin: 1em 0;
 	border-top: 1px dotted #666;
   border-bottom: 1px dotted #666;
 	font-size: 0.8em;
 }
 
-#footer .copy {
+footer ul {
+  list-style-type: none;
+  margin: 1em 0;
+  padding: 0;
+}
+
+footer li {
+  display: inline-block;
+  padding: 0 1em 0 0;
+}
+
+footer .poweredby {
   float: right;
+  padding: 0 20px 0 1em;
+  background: url(img/casimir.png) no-repeat right;
+  background-size: 16px 16px;
 }
 
 #bookmarklet a {