Timeline

import Css
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Html
import Html.Styled.Keyed as KHtml


timeline : Html msg
timeline =
    Html.div
        [ Html.css
            [ Css.position Css.relative ]
        ]
        [ -- The vertical line
          Html.div
            [ Html.css
                [ Css.borderRight3 (Css.px 2) Css.solid (Css.hex "EFEFEF")
                , Css.position Css.absolute
                , Css.top Css.zero
                , Css.left <| Css.px 16
                , Css.height <| Css.pct 100
                ]
            ]
            []
        , KHtml.node "div"
            []
            [ ( "item-1"
              , Html.div
                    [ Html.css
                        [ Css.marginBottom <| Css.rem 1 ]
                    ]
                    [ Html.header
                        [ Html.css
                            [ Css.displayFlex
                            , Css.alignItems Css.center
                            , Css.marginBottom <| Css.rem 0.5
                            ]
                        ]
                        [ Placeholders.Circle.view circle
                        , Placeholders.Rectangle.view rectangle
                        ]
                    , Html.div
                        [ Html.css
                            [ Css.marginLeft <| Css.px 48 ]
                        ]
                        [ Placeholders.Block.view block ]
                    ]
              )

            -- More items
            ]
        ]