begin work on layouting and global styling

1 files changed, 14 insertions, 9 deletions

diff --git a/src/Main.elm b/src/Main.elm
index 620ef7c..4ca4934 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -4,7 +4,7 @@ import Array exposing (..)
 import Base exposing (..)
 import Browser
 import Css
-import Css.Global exposing (global, selector)
+import Css.Global exposing (everything, global, selector)
 import Data exposing (..)
 import Html
 import Html.Styled exposing (..)
@@ -217,15 +217,20 @@ currentContents model =
 
 view : Model -> Html Msg
 view model =
-    pre []
-        [ p [] [ text ("POS: " ++ viewProgress model) ]
-        , p [] [ text ("WPM: " ++ viewWpm model) ]
-        , p [] [ text ("ACC: " ++ viewAccuracy model.words) ]
-        , viewWordLengthOptions
-        , toPara model.words model.currentWord (currentContents model)
-        , styledInput [ onInput handleInputChanged, value model.inputBox ] []
-        , styledButton [ onClick Redo ] [ text "redo" ]
+    div []
+        [ div []
+            [ viewWordLengthOptions
+            , viewStats model
+            ]
+        , div []
+            [ toPara model.words model.currentWord (currentContents model)
+            , div []
+                [ styledInput [ onInput handleInputChanged, value model.inputBox ] []
+                , styledButton [ onClick Redo ] [ text "redo" ]
+                ]
+            ]
         , global [ selector "li:not(:last-child)::after" [ Css.property "content" "' / '" ] ]
+        , global [ everything [ Css.fontFamily Css.monospace ] ]
         ]