make the output look a lot nicer

BrianHicks · Jan 6, 2020 · f03e64c · f03e64c
1 parent 2d3dda7
commit f03e64c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 8 deletions.
diff --git a/src/Image.elm b/src/Image.elm
@@ -154,8 +154,8 @@ view (Image { items }) =
                 (\color ->
                     Html.td
                         [ style "background-color" (Color.toRGBAString color)
-                        , Attrs.width 5
-                        , Attrs.height 5
+                        , Attrs.width 10
+                        , Attrs.height 10
                         ]
                         []
                 )

diff --git a/src/Main.elm b/src/Main.elm
@@ -3,8 +3,9 @@ module Main exposing (..)
 import Browser
 import Color.Transparent as Color
 import Css
+import Css.Reset as Reset
 import Html as RootHtml
-import Html.Styled as Html
+import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import Image exposing (Image)
 
@@ -60,14 +61,56 @@ recurse =
 main : RootHtml.Html msg
 main =
     Html.toUnstyled <|
-        Html.div []
-            [ Html.h1 [] [ Html.text "Wave Function Collapse" ]
-            , Html.h2 [] [ Html.text "Source Image" ]
+        Html.div
+            [ css
+                [ Css.fontFamily Css.sansSerif
+                , Css.margin2 (Css.rem 2) Css.auto
+                , Css.width (Css.pct 80)
+                ]
+            ]
+            [ Reset.meyerV2
+            , Reset.borderBoxV201408
+            , h1 [ Html.text "Wave Function Collapse" ]
+            , h2 [ Html.text "Source Image" ]
             , Image.view recurse
-            , Html.h2 [] [ Html.text "Windows" ]
+            , h2 [ Html.text "3×3 Windows" ]
             , recurse
                 |> Image.windows { width = 3, height = 3 }
                 |> List.map Image.view
-                |> List.map (List.singleton >> Html.div [ css [ Css.border3 (Css.px 1) Css.solid (Css.hex "000"), Css.display Css.inlineBlock ] ])
+                |> List.map
+                    (\image ->
+                        Html.div
+                            [ css
+                                [ Css.border3 (Css.px 1) Css.solid (Css.hex "000")
+                                , Css.display Css.inlineBlock
+                                , Css.margin (Css.px 5)
+                                ]
+                            ]
+                            [ image ]
+                    )
                 |> Html.section []
             ]
+
+
+h1 : List (Html msg) -> Html msg
+h1 contents =
+    Html.h1
+        [ css
+            [ Css.fontSize (Css.rem 2)
+            , Css.lineHeight (Css.rem 2.5)
+            , Css.marginBottom (Css.rem 0.5)
+            , Css.fontWeight Css.bold
+            ]
+        ]
+        contents
+
+
+h2 : List (Html msg) -> Html msg
+h2 contents =
+    Html.h2
+        [ css
+            [ Css.fontSize (Css.rem 1.25)
+            , Css.lineHeight (Css.rem 1.5)
+            ]
+        ]
+        contents