module Design.View.Header ( design ) where import Data.Monoid ((<>)) import Clay import Design.Color as Color import qualified Design.Media as Media design :: Css design = do let headerPadding = "padding" -: "0 20px" display flex "flex-wrap" -: "wrap" lineHeightMedia position relative backgroundColor Color.chestnutRose color Color.white Media.desktop $ marginBottom (em 3) Media.mobileTablet $ marginBottom (em 2) Media.mobile $ marginBottom (em 1.5) ".title" <> ".item" ? headerPadding ".title" ? do height (pct 100) textAlign (alignSide sideLeft) Media.mobile $ fontSize (px 22) Media.mobileTablet $ width (pct 100) Media.tabletDesktop $ do display inlineBlock fontSize (px 35) ".item" ? do display inlineBlock transition "background-color" (ms 50) easeIn (sec 0) ".current" & backgroundColor (Color.chestnutRose -. 20) Media.mobile $ fontSize (px 13) (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.chestnutRose +. 10) (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.chestnutRose -. 10) ".nameSignOut" ? do display flex heightMedia position absolute top (px 0) right (px 0) ".name" ? do Media.mobile $ display none Media.tabletDesktop $ headerPadding ".signOut" ? do display flex justifyContent center alignItems center svg ? do Media.tabletDesktop $ width (px 30) Media.mobile $ width (px 20) "path" ? ("fill" -: "white") lineHeightMedia :: Css lineHeightMedia = do Media.desktop $ lineHeight (px 80) Media.tablet $ lineHeight (px 65) Media.mobile $ lineHeight (px 50) heightMedia :: Css heightMedia = do Media.desktop $ height (px 80) Media.tablet $ height (px 65) Media.mobile $ height (px 50)