Make stuff look prettier.

stages/3/src/ElmHub.elm

@@ -89,11 +89,15 @@ initialModel =
 view : Address Action -> Model -> Html
 view address model =
   div
-    []
+    [ class "content" ]
-    [ h1 [] [ text "ElmHub" ]
+    [ header
-    , input [ onInput address SetQuery, defaultValue model.query ] []
+        []
-    , button [ onClick address Search ] [ text "Search" ]
+        [ h1 [] [ text "ElmHub" ]
-    , div
+        , span [ class "tagline" ] [ text "“Like GitHub, but for Elm things.”" ]
+        ]
+    , input [ class "search-query", onInput address SetQuery, defaultValue model.query ] []
+    , button [ class "search-button", onClick address Search ] [ text "Search" ]
+    , ul
         [ class "results" ]
         (List.map viewSearchResult model.results)
     ]
@@ -109,10 +113,10 @@ defaultValue str =
 
 viewSearchResult : SearchResult -> Html
 viewSearchResult result =
-  div
+  li
     []
-    [ div [ class "star-count" ] [ text (toString result.stars) ]
+    [ span [ class "star-count" ] [ text (toString result.stars) ]
-    , div [] [ text result.name ]
+    , a [ href "", class "result-name" ] [ text result.name ]
     ]
 
 

stages/3/style.css

@@ -0,0 +1,63 @@
+
+.content {
+  width: 960px;
+  margin: 0 auto;
+  padding: 30px;
+  font-family: Helvetica, Arial, serif;
+}
+
+header {
+  position: relative;
+  padding: 6px 12px;
+  background-color: rgb(96, 181, 204);
+  margin-bottom: 36px;
+}
+
+h1 {
+  color: white;
+  font-weight: normal;
+  margin: 0;
+}
+
+.tagline {
+  color: #eee;
+  position: absolute;
+  right: 16px;
+  top: 12px;
+  font-size: 24px;
+  font-style: italic;
+}
+
+.results {
+  list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
+}
+
+.results li {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.star-count {
+  font-weight: bold;
+}
+
+.result-name {
+  color: rgb(96, 181, 204);
+  margin-left: 16px;
+  text-decoration: none;
+}
+
+.result-name:hover{
+  text-decoration: underline;
+}
+
+.search-query {
+  padding: 8px;
+  font-size: 24px;
+}
+
+.search-button {
+  padding: 8px 16px;
+  font-size: 24px;
+  margin-left: 12px
+}