animation.patch

diff --git a/src/CombinatorsAnimated.elm b/src/CombinatorsAnimated.elm
index 98ee5c6..026f02b 100644
--- a/src/CombinatorsAnimated.elm
+++ b/src/CombinatorsAnimated.elm
@@ -2,9 +2,9 @@ module CombinatorsAnimated exposing
     ( Model
     , Msg(..)
     , combinatorsBackground
+    , init
     , initModel
     , subscriptions
-    , tick
     , update
     )
 
@@ -15,6 +15,8 @@ import Css exposing (..)
 import Debug as Dbg
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attrs exposing (..)
+import Html.Styled.Keyed as Keyed
+import Html.Styled.Lazy exposing (lazy)
 import StyleGuide as Theme
 import Styles
     exposing
@@ -34,90 +36,108 @@ import Time
 
 type alias Combinator =
     { letter : String
+    , delay : Int
     , initialTime : Int
     , position : ( Float, Float )
-    , rotate : Float
     , opacity : Float
     }
 
 
 type alias Model =
-    { initialTime : Int
-    , curLetter : String
-    , curCombinator : Combinator
+    { totalHeight : Float
     , combinators : List Combinator
     }
 
 
 type Msg
-    = Tick Time.Posix
+    = Init (Result Browser.Dom.Error ( Time.Posix, Browser.Dom.Element ))
+    | Tick Time.Posix
 
 
 duration =
-    2250
+    9250
 
 
-ease t =
-    let
-        x =
-            t - 1
-    in
-    x * x * x + 1
+lerp start end norm =
+    start + norm * (end - start)
 
 
-updateCombinators curTime model next others =
+updateCombinator curTime totalHeight combinator =
     let
-        { curCombinator, initialTime } =
-            model
+        { initialTime, opacity, position, delay } =
+            combinator
+
+        ( px, _ ) =
+            position
 
         elapsed =
-            curTime - initialTime
+            Basics.max (curTime - initialTime - delay) 0
 
         progress =
-            Basics.min ((elapsed |> toFloat) / duration |> ease) 1.0
+            Basics.min ((elapsed |> toFloat) / duration) 1.0
     in
     if progress < 1.0 then
-        { model
-            | curCombinator = { curCombinator | opacity = progress }
-            , combinators = { next | opacity = 1 - progress } :: others
+        { combinator
+            | opacity = ((lerp -1 1 progress |> abs) - 1) |> abs
+            , position = ( px, progress * totalHeight )
         }
 
     else
-        { model
-            | curCombinator = { next | opacity = 0 }
-            , combinators = others ++ [ { curCombinator | opacity = 1 } ]
+        { combinator
+            | delay = 0
+            , opacity = 0
             , initialTime = curTime
-            , curLetter = next.letter
+            , position = ( px, 0 )
         }
 
 
+setInitialTime currentTime ({ initialTime } as comb) =
+    { comb | initialTime = currentTime }
+
+
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
+    let
+        combinators =
+            model.combinators
+    in
     case msg of
+        Init result ->
+            case result of
+                Result.Ok ( timePosix, { element } ) ->
+                    let
+                        currentTime =
+                            Time.posixToMillis timePosix
+                    in
+                    ( { model
+                        | totalHeight = element.height
+                        , combinators = List.map (setInitialTime currentTime) combinators
+                      }
+                    , Cmd.none
+                    )
+
+                Result.Err _ ->
+                    ( model, Cmd.none )
+
         Tick timePosix ->
             let
                 currentTime =
                     Time.posixToMillis timePosix
 
-                nextModel =
-                    case model.combinators of
-                        h :: t ->
-                            updateCombinators currentTime model h t
-
-                        _ ->
-                            model
+                totalHeight =
+                    model.totalHeight
             in
-            if model.initialTime == 0 then
-                ( { model
-                    | initialTime = currentTime
-                  }
-                , Cmd.none
-                )
+            ( { model
+                | combinators = List.map (updateCombinator currentTime totalHeight) combinators
+              }
+            , Cmd.none
+            )
 
-            else
-                ( nextModel
-                , Cmd.none
-                )
+
+init =
+    Task.attempt
+        Init
+        (Task.map2 (\r -> \t -> ( t, r )) (getElement "combinators") Time.now)
 
 
 tick =
@@ -130,57 +150,67 @@ tick =
 
 initModel : Model
 initModel =
-    { initialTime = 0
-    , curLetter = "I"
-    , curCombinator =
-        { letter = "I"
-        , initialTime = 0
-        , position = ( 25, 20 )
-        , rotate = 10
-        , opacity = 1
-        }
+    { totalHeight = 0
     , combinators =
-        [ { letter = "K"
-          , initialTime = 25
-          , position = ( 75, 40 )
-          , rotate = 10
-          , opacity = 1
+        [ { letter = "I"
+          , initialTime = 0
+          , delay = 5500
+          , position = ( 12, 0 )
+          , opacity = 0
+          }
+        , { letter = "K"
+          , initialTime = 0
+          , delay = 500
+          , position = ( 17, 0 )
+          , opacity = 0
           }
         , { letter = "B"
-          , initialTime = 25
-          , position = ( 20, 40 )
-          , rotate = -3
-          , opacity = 1
+          , initialTime = 0
+          , delay = 13500
+          , position = ( 23, 0 )
+          , opacity = 0
           }
         , { letter = "C"
-          , initialTime = 75
-          , position = ( 80, 15 )
-          , rotate = 25
-          , opacity = 1
+          , initialTime = 0
+          , delay = 8500
+          , position = ( 29, 0 )
+          , opacity = 0
           }
         , { letter = "W"
-          , initialTime = 75
-          , position = ( 10, 80 )
-          , rotate = -2
-          , opacity = 1
+          , initialTime = 0
+          , delay = 10500
+          , position = ( 35, 0 )
+          , opacity = 0
           }
         , { letter = "S"
-          , initialTime = 25
-          , position = ( 60, 10 )
-          , rotate = -3
-          , opacity = 1
+          , initialTime = 0
+          , delay = 11500
+          , position = ( 64, 0 )
+          , opacity = 0
           }
         , { letter = "Y"
-          , initialTime = 75
-          , position = ( 10, 10 )
-          , rotate = -4
-          , opacity = 1
+          , initialTime = 0
+          , delay = 7500
+          , position = ( 70, 0 )
+          , opacity = 0
           }
         , { letter = "T"
-          , initialTime = 25
-          , position = ( 80, 80 )
-          , rotate = 4
-          , opacity = 1
+          , initialTime = 0
+          , delay = 9000
+          , position = ( 76, 0 )
+          , opacity = 0
+          }
+        , { letter = "A"
+          , initialTime = 0
+          , delay = 14500
+          , position = ( 83, 0 )
+          , opacity = 0
+          }
+        , { letter = "P"
+          , initialTime = 0
+          , delay = 2500
+          , position = ( 90, 0 )
+          , opacity = 0
           }
         ]
     }
@@ -191,30 +221,29 @@ subscriptions model =
     onAnimationFrame Tick
 
 
-combinatorWrapper curLetter { position, rotate, letter, opacity } =
+combinatorKeyed combinator =
+    ( combinator.letter, lazy combinatorWrapper combinator )
+
+
+combinatorWrapper { position, letter, opacity, delay } =
     let
         ( x, y ) =
             position
 
-        curColor =
-            if curLetter == letter then
-                Theme.colors.pink
-
-            else
-                Theme.colors.combinator
+        translateStr =
+            "translate3d(0px," ++ String.fromFloat -y ++ "px, 0px)"
     in
     div
         [ css
             [ Css.position absolute
-            , top (px 0)
+            , fontSize (px 36)
             , left (pct x)
-            , top (pct y)
-            , fontSize (px 60)
-            , color curColor
-            , transform (Css.rotate (deg rotate))
+            , bottom (px -36)
+            , color Theme.colors.pink
             , fontFamilies [ "Rhodium Libre", "serif" ]
             ]
         , style "opacity" (String.fromFloat opacity)
+        , style "transform" translateStr
         ]
         [ text letter ]
 
@@ -222,17 +251,18 @@ combinatorWrapper curLetter { position, rotate, letter, opacity } =
 combinatorsBackground : Model -> Html msg
 combinatorsBackground model =
     let
-        { curLetter, combinators, curCombinator } =
+        { combinators } =
             model
     in
-    div
-        [ css
+    Keyed.node "div"
+        [ id "combinators"
+        , css
             [ position absolute
             , Css.width (pct 100)
             , Css.height (pct 100)
             ]
         ]
         (List.map
-            (combinatorWrapper curLetter)
-            (curCombinator :: combinators)
+            combinatorKeyed
+            combinators
         )
diff --git a/src/Elements.elm b/src/Elements.elm
index efa585b..2d74f15 100644
--- a/src/Elements.elm
+++ b/src/Elements.elm
@@ -1,6 +1,7 @@
 module Elements exposing (..)
 
 import Css exposing (..)
+import Css.Media as Media exposing (only, screen, withMedia)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attrs exposing (..)
 import StyleGuide as Theme
@@ -23,26 +24,39 @@ import Styles
 -- TODO: all elements 'styled' must have the name with suffix "Styled"
 
 
-lambdaLogo : Int -> Html msg
-lambdaLogo width =
-    img [ src "assets/logo.svg", Attrs.width width ] []
+lambdaLogo : Float -> Float -> Html msg
+lambdaLogo width1 width2 =
+    img
+        [ src "assets/logo.svg"
+        , css
+            [ Css.width (px width1)
+            , withMedia
+                [ only screen [ Media.maxWidth (px 800) ] ]
+                [ Css.width (px width2) ]
+            ]
+        ]
+        []
 
 
 lambdaLogoLarge =
-    lambdaLogo 120
+    lambdaLogo 120 60
 
 
 lambdaLogoMedium =
-    lambdaLogo 44
+    lambdaLogo 44 24
 
 
 lambdaLogoSmall =
-    lambdaLogo 18
+    lambdaLogo 18 10
 
 
 contentWrapper =
     styled div
-        [ borderPink ]
+        [ borderPink
+        , withMedia
+            [ only screen [ Media.maxWidth (px 800) ] ]
+            [ Css.borderWidth (px 0) ]
+        ]
 
 
 textStyled =
@@ -149,7 +163,14 @@ repositoryRow repoLinkData =
 
 
 repositoryContainer { title, content } =
-    div [ css [ padding2 (rem 4) (rem 0) ] ]
+    div
+        [ css
+            [ padding2 (rem 4) (rem 0)
+            , withMedia
+                [ only screen [ Media.maxWidth (px 800) ] ]
+                [ Css.maxWidth (pct 100) ]
+            ]
+        ]
         -- TODO: add an interation here
         [ contentWrapper
             [ css
@@ -165,6 +186,9 @@ repositoryContainer { title, content } =
                 [ Css.width (px 490)
                 , padding3 (rem 3.5) (rem 3) (rem 3)
                 , marginLeft (rem 2)
+                , withMedia
+                    [ only screen [ Media.maxWidth (px 800) ] ]
+                    [ Css.maxWidth (pct 100), padding3 (rem 1.5) (rem 2) (rem 1), marginLeft (rem 0) ]
                 ]
             ]
             (List.map repositoryRow content)
diff --git a/src/Main.elm b/src/Main.elm
index 1edaa1a..40b7848 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -8,6 +8,7 @@ import CombinatorsAnimated
 import Contents
 import Css exposing (..)
 import Css.Global exposing (body, global)
+import Css.Media as Media exposing (only, screen, withMedia)
 import Elements
     exposing
         ( HeaderSize(..)
@@ -29,7 +30,7 @@ import Html
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attr exposing (..)
 import StyleGuide as Theme
-import Styles exposing (backgroundStyle, paddingLarge, textMedium)
+import Styles exposing (backgroundStyle, paddingLarge, paddingSmall, textMedium)
 
 
 
@@ -71,7 +72,13 @@ homeParagraph =
 
 
 lambdaDescription =
-    contentWrapper [ css [ paddingLarge ] ]
+    contentWrapper
+        [ css
+            [ paddingLarge
+            , withMedia [ only screen [ Media.maxWidth (px 800) ] ]
+                [ paddingSmall ]
+            ]
+        ]
         [ homeParagraph []
             [ text Contents.description ]
         , homeParagraph []
@@ -97,6 +104,8 @@ homeSection model =
                 , maxWidth (px 720)
                 , boxSizing borderBox
                 , margin auto
+                , zIndex (int 2)
+                , position relative
                 ]
             ]
             [ lambdaLogoLarge
@@ -206,7 +215,7 @@ init _ =
     ( { combinators =
             CombinatorsAnimated.initModel
       }
-    , Cmd.map UpdateCombinators CombinatorsAnimated.tick
+    , Cmd.map UpdateCombinators CombinatorsAnimated.init
     )
 
 
diff --git a/src/Styles.elm b/src/Styles.elm
index 83203fe..c7de3be 100644
--- a/src/Styles.elm
+++ b/src/Styles.elm
@@ -17,6 +17,12 @@ paddingLarge =
         ]
 
 
+paddingSmall =
+    batch
+        [ padding SG.spacing.small
+        ]
+
+
 borderPink =
     batch
         [ borderWidth (px 2)