@@ -11,6 +11,9 @@ import Element.Font as Font
1111import Element.Input as Input
1212import Element.Keyed as Keyed
1313import Html.Attributes
14+import Html.String
15+import Html.Styled.Attributes exposing (css)
16+import Html exposing (Html, hr)
1417import Json.Decode as JD
1518import List.Extra
1619import Set exposing (Set)
@@ -102,12 +105,12 @@ main =
102105 , body =
103106 [ view model
104107 |> layout
105− [ Font.family
106− [ Font.typeface "Inter"
108+ [ Font.family
109+ [ Font.typeface "monospace"
107110 , Font.typeface "Apple Color Emoji"
108111 ]
109112 , clipX
110− ]
113+ ]
111114 ]
112115 }
113116 , subscriptions = \model -> Animator.toSubscription Tick model (animator model)
@@ -146,19 +149,16 @@ main =
146149
147150logoView : List (Attribute Msg) -> Element Msg
148151logoView attributes =
149− Element.image ( List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes )
150− { src = "assets/img/logo.png", description = "The logo" }
152+ Element.image (List.append [ Html.Attributes.id "tilt" |> htmlAttribute ] attributes)
153+ { src = "assets/img/logo.png", description = "%seax logo" }
151154
152155view : Model -> Element Msg
153156view model =
154157 case model.initiatedSearch of
155158 Nothing ->
156159 column [ centerX, centerY, padding 8, spacing 16 ]
157− [
158− -- el [ centerX, Font.size 67, Font.heavy] (text "%seax") ,
159− -- Element.image [ centerX, width (px 510), height (px 161), Html.Attributes.id "tilt" |> htmlAttribute ] { src = "assets/img/logo.png", description = "The logo" },
160− logoView [centerX, width (px 510), height (px 161) ],
161− searchView model
160+ [ logoView [ centerX, width (px 510), height (px 161) ]
161+ , searchView model
162162 ]
163163
164164 Just _ ->
@@ -205,11 +205,10 @@ view model =
205205 |> wrappedRow
206206 [ spacing 8
207207 , width fill
208−
209− -- , padding 16
210208 ]
211209 ]
212210 ]
211+ , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])
213212 , Keyed.column [ width (minimum 0 fill), padding 8 ]
214213 (model.searchResults
215214 |> List.filter
@@ -253,7 +252,9 @@ view model =
253252 ++ "px"
254253 )
255254 |> htmlAttribute
256− , Html.Attributes.style "position" "absolute" |> htmlAttribute
255+ , Html.Attributes.style "margin-bottom" "1em" |> htmlAttribute
256+ , Html.Attributes.style "padding" "0.5em" |> htmlAttribute
257+ , Html.Attributes.class "result" |> htmlAttribute
257258 ]
258259 [ text title
259260 |> el
@@ -269,6 +270,7 @@ view model =
269270 )
270271 )
271272 )
273+ , Element.html (Html.hr [Html.Attributes.style "width" "95%"] [])
272274 ]
273275
274276
@@ -285,24 +287,15 @@ searchView model =
285287 { label =
286288 text "search"
287289 |> el
288− [ Html.Attributes.class "button" |> htmlAttribute
289− , Border.width 4
290− , padding 4
290+ [ Html.Attributes.class "search" |> htmlAttribute
291+ , Border.width 2
292+ , padding 6
291293 , Font.size 29
292− , Font.bold
293− , Border.color (rgb 0 0 0)
294− , Background.color (rgb 0 0 0)
295− , Font.color (rgb 1 1 1)
296− , mouseOver
297− [ Font.color (rgb 0 0 0)
298− , Background.color (rgb 1 1 1)
299− ]
300294 ]
301295 , onPress = Just (Search model.search)
302296 }
303297 ]
304298
305−
306299update : Msg -> Model -> ( Model, Ur.Cmd.Cmd Msg )
307300update msg model =
308301 case msg of