refactor: use compositions

src/Main.elm

@@ -206,6 +206,26 @@ btn disp act =
     button btnStyle { onPress = Just act, label = text (String.toUpper disp) }
 
 
+vw2pt : Model -> Float -> Int
+vw2pt model ratio =
+    (round << vw model) ratio
+
+
+vw2px : Model -> Float -> Length
+vw2px model ratio =
+    px (vw2pt model ratio)
+
+
+vh2pt : Model -> Float -> Int
+vh2pt model ratio =
+    (round << vh model) ratio
+
+
+vh2px : Model -> Float -> Length
+vh2px model ratio =
+    px (vh2pt model ratio)
+
+
 view : Model -> Browser.Document Msg
 view model =
     { title = "MacGregor House"
@@ -214,35 +234,35 @@ view model =
             [ column
                 [ width fill
                 , height fill
-                , spacing (round (vh model -100))
+                , spacing (vh2pt model -100)
                 ]
                 [ el
                     [ width fill
-                    , height (px (round (vh model 100)))
+                    , height (vh2px model 100)
                     , Background.color (rgb255 0 0 0)
                     ]
                     Element.none
                 , animatedEl crossfadeIn
                     [ width fill
-                    , height (px (round (vh model 100)))
+                    , height (vh2px model 100)
                     , Background.gradient { angle = 45, steps = [ rgb255 200 0 100, rgb255 100 0 200 ] }
                     ]
                     Element.none
                 , animatedEl crossfadeOut
                     [ width fill
-                    , height (px (round (vh model 100)))
+                    , height (vh2px model 100)
                     , Background.gradient { angle = 45, steps = [ rgb255 0 100 200, rgb255 0 200 100 ] }
                     ]
                     Element.none
                 , el
                     [ alignLeft
                     , alignTop
-                    , width (px (round (vw model 50)))
+                    , width (vw2px model 50)
-                    , height (px (round (vh model 100)))
+                    , height (vh2px model 100)
                     , paddingEach
-                        { top = round (vh model 50) - 96
+                        { top = vh2pt model 50 - 96
                         , bottom = 0
-                        , left = round (vw model 10)
+                        , left = vw2pt model 10
                         , right = 0
                         }
                     , Font.color (rgb255 255 255 255)
@@ -265,11 +285,11 @@ view model =
                 , el
                     [ alignRight
                     , alignTop
-                    , width (px (round (vw model 60)))
+                    , width (vw2px model 60)
-                    , height (px (round (vh model 100)))
+                    , height (vh2px model 100)
                     , paddingEach
-                        { top = round (vh model 25)
+                        { top = vh2pt model 25
-                        , bottom = round (vh model 25)
+                        , bottom = vh2pt model 25
                         , left = 0
                         , right = 0
                         }