From cdbd0be256ca91a4ae43be58a42d1940360c74a4 Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Fri, 1 Feb 2019 20:39:34 -0800 Subject: [PATCH] Add styling and headings. --- index.html | 1 + minilogo.scss | 37 +++++++++++++++++++++++++++++++++++++ src/Main.elm | 11 +++++++---- 3 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 minilogo.scss diff --git a/index.html b/index.html index 6a81602..cbbd272 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ MiniLogo Simulator +
diff --git a/minilogo.scss b/minilogo.scss new file mode 100644 index 0000000..34de953 --- /dev/null +++ b/minilogo.scss @@ -0,0 +1,37 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway'); +$default-shadow: 0px 0px 5px rgba(0, 0, 0, .25); + +body { + background-color: rgb(247, 248, 249); + font-family: Raleway, sans-serif; +} + +h1, h2 { + text-align: center; +} + +div.logo-container { + display: flex; + flex-direction: row; + justify-content: center; +} + +div.logo-pane { + flex-grow: 1; + flex-basis: 50%; + padding: 10px; +} + +textarea { + width: 100%; + max-width: 500px; + height: 500px; + border: none; + padding: 10px; +} + +textarea, canvas { + display: block; + margin: auto; + box-shadow: $default-shadow; +} diff --git a/src/Main.elm b/src/Main.elm index 47dd97d..d02d9cf 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -1,4 +1,4 @@ -import Html exposing (Html, div, text, textarea) +import Html exposing (Html, div, text, textarea, h1, h2) import Html.Attributes exposing (class) import Html.Events exposing (onInput) import Browser exposing (element) @@ -320,9 +320,12 @@ view m = <| Result.withDefault (Err "Couldn't parse program") <| Result.map (\prg -> evaluateAll prg [] initialState) (run parseProg m.programText) in - div [ class "logo-container" ] - [ div [ class "logo-pane" ] [ textarea [ onInput UpdateText ] [ text m.programText ] ] - , div [ class "logo-pane" ] [ canvas dat ] + div [] + [ h1 [] [ text "MiniLogo Functional Evaluator" ] + , div [ class "logo-container" ] + [ div [ class "logo-pane" ] [ h2 [] [ text "MiniLogo" ], textarea [ onInput UpdateText ] [ text m.programText ] ] + , div [ class "logo-pane" ] [ h2 [] [ text "Output" ], canvas dat ] + ] ] update : Msg -> Model -> (Model, Cmd Msg)