diff --git a/stages/3/src/ElmHub.elm b/stages/3/src/ElmHub.elm index 9ab2218..3976f04 100644 --- a/stages/3/src/ElmHub.elm +++ b/stages/3/src/ElmHub.elm @@ -89,11 +89,15 @@ initialModel = view : Address Action -> Model -> Html view address model = div - [] - [ h1 [] [ text "ElmHub" ] - , input [ onInput address SetQuery, defaultValue model.query ] [] - , button [ onClick address Search ] [ text "Search" ] - , div + [ class "content" ] + [ header + [] + [ h1 [] [ text "ElmHub" ] + , 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) ] - , div [] [ text result.name ] + [ span [ class "star-count" ] [ text (toString result.stars) ] + , a [ href "", class "result-name" ] [ text result.name ] ] diff --git a/stages/3/style.css b/stages/3/style.css index e69de29..055deb6 100644 --- a/stages/3/style.css +++ b/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 +}