Make the focus of the UI be searching, with attribution/credits secon…

…dary
dsingleton · Mar 5, 2013 · dd01ffd · dd01ffd
1 parent 5a9d8fb
commit dd01ffd
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 42 deletions.
diff --git a/icons.css b/icons.css
@@ -1,49 +1,73 @@
 body {
     margin: 0 auto;
-    padding: 0 40px 1em;
+    padding: 0;
 
     color: #6b6b6b;
     background: #fff;
 
-    font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
-
-    max-width: 1250px
+    font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-header h1 {
-    color: #1b1b1b;
+.container {
+    width: 98%;
+    margin: 0 auto;
+}
+
+header {
+    width: 100%;
+    margin: 0;
+    padding: 10px 0;
+}
+
+header .container {
+    text-align: center;
+    color: #666;
 }
 
-header h2 {
-    margin-top: -10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #ccc;
-    font-weight: normal;
+header h1 {
+    display: inline-block;
+    margin: 0 5px 0 0;
+    border-right: 1px solid #ddd;
+    padding: 0 10px 0 0;
     font-size: 1em;
 }
 
+header .intro p {
+    display: inline-block;
+    margin: 0;
+}
+
 header form {
-    float: right;
-    margin: -3.3em 1em 0 0;
+    margin: 5px 0;
+    padding: 5px 0;
 }
 
-header form input {
-    width: 150px;
+header form label {
+    display: none;
 }
 
-footer {
-    clear: both;
-    border-top: 1px solid #ccc;
-    padding-top: 10px;
+header form input {
+    width: 35em;
+
+    border: 1px solid #ccc;
+    border-radius: 2em;
+    box-shadow: 0 0 5px #ccc;
+    padding: 10px 20px;
+    font-size: 19px;
 }
 
+header form input:focus {
+    outline: none;
+}    
 
 #preview {
     position: absolute;
     top: -500px;
     left: -500px;
     margin-left: -32px;
     box-shadow: 0 0 15px #333;
+
+
 }
 
 #preview img {
@@ -59,7 +83,7 @@ a {
 }
 
 ol.icons {
-	margin: 0 0 .6em 0;
+	margin: 0;
 	padding: 0;
 
 	float: left;

diff --git a/index.html b/index.html
@@ -2,38 +2,56 @@
 <html lang="en">
 <head>  
 	<meta charset="utf-8"> 
-	<title>Icon Selector</title> 
-	<!--[if lt IE 9]>
-		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
-	<![endif]--> 
-
+	<title>Icon Selector</title>  
 	<link rel="stylesheet" href="icons.css"> 
 
 	<link rel="shortcut icon" href="icons/zoom.png">
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
     <script type="text/javascript" src="icon_data.js"></script> <!-- defines 'var icon_data = [...]' -->
     <script type="text/javascript" src="icons.js"></script>
+
+
+    <!-- TODO
+    * Scale up preview image
+    * Dock preview image to side, with more info
+    * async jquery
+    * big search
+    * Classes for match.not,
+    * no cursor for unmatched
+    * better contrast for matched items
+    * performance
+    * new read me
+    * gh-pages
+    * kill from website 
+     -->
+
+
 </head>
 <body>
     <header>
-        <h1>Icon Selector</h1>
-        <h2>For the <a href="http://www.famfamfam.com/lab/icons/silk/">Silk</a> icon set</h2>
-
-        <form>
-            <label for="search">Search</label>
-            <input type="search" id="search" placeholder="e.g. add, flag, play">
-        </form>
+        <div class="container">
+
+            <div class="intro">
+                <h1>Icon Selector</h1>
+                <p>
+                    Search and browse the <a href="http://www.famfamfam.com/lab/icons/silk/">Silk</a> icon set.
+                    Code by <a href="http://dsingleton.co.uk">David Singleton</a>, fork on <a href="http://github.com/dsingleton/icon-selector">Github</a>
+                </p>
+            </div>
+
+            <form>
+                <label for="search">Search</label>
+                <input type="text" id="search" placeholder="Search for icons by keyword">
+            </form>
+        </div>
     </header>
 
-    <ol class="icons">
-        <li id="preview"></li>
-    </ol>
-
-
-
-    <footer>
-        Icons by <a href="http://www.famfamfam.com/">Mark James</a>. Selector by <a href="http://twitter.com/dsingleton">@dsingleton</a>. Code on <a href="http://github.com/dsingleton/icon-selector">Github</a>
-    </footer>
+    <div id="content" class="container">
+        <ol class="icons">
+            <li id="preview"></li>
+        </ol>
+    </div>
+
 </body>
-</html>
+</html>