diff options
Diffstat (limited to 'Hero/Look.hs')
| -rw-r--r-- | Hero/Look.hs | 67 |
1 files changed, 32 insertions, 35 deletions
diff --git a/Hero/Look.hs b/Hero/Look.hs index 662b223..b676c13 100644 --- a/Hero/Look.hs +++ b/Hero/Look.hs @@ -27,17 +27,12 @@ main = do -- base ".fixed" ? position fixed ".clickable" ? clickable - ".row" ? do - display flex - alignItems center - justifyContent spaceBetween + ".row" ? centerJustify a <> a # hover <> a # visited ? do color white textDecoration none ".loading" ? do - display flex - justifyContent center - alignItems center + centered height $ vh 100 width $ vw 100 -- animations @@ -113,7 +108,7 @@ main = do "#app-foot" ? do alignSelf flexEnd bottom (px 0) - mobile $ remove + mobile remove "#app-foot-social" ? do display flex flexDirection column @@ -127,20 +122,17 @@ main = do textTransform Clay.uppercase textAlign center -- hide app-foot-quote when it gets crowded - query Clay.all [Media.maxDeviceWidth (px 800)] $ + query + Clay.all + [Media.maxDeviceWidth (px 800)] hide -- login "#login" ? do -- TODO: next 3 lines can be DRYed up, methinks - display flex - justifyContent center - alignItems center - alignSelf center + centered height (vh 100) "#login-inner" ? do - display flex - justifyContent center - alignItems center + centered flexDirection column zIndex 1 height (vh 100) @@ -151,8 +143,8 @@ main = do display flex alignItems center flexDirection column - "#login" ** form <> "#login" ** hr ? do - width (pct 100) + "#login" ** form <> "#login" ** hr + ? width (pct 100) "#login" ** hr ? border solid (px 1) grai "#login" ** ".button" ? do marginTop (px 10) @@ -228,7 +220,7 @@ main = do lineHeight z let m = 24 :: Double top $ px $ navbarHeight + m - left $ px $ m + left $ px m zIndex 999 -- zoom button and slider "#zoom-button" ? do @@ -259,9 +251,7 @@ main = do borderTop solid (px 1) white borderBottom solid (px 1) white flexDirection row - display flex - alignItems center - justifyContent spaceBetween + centerJustify mobile $ do margin (rem 2) 0 (rem 2) 0 padding 0 0 0 (rem 0) @@ -277,7 +267,7 @@ main = do width (vw 90) -- this line can be commented if you want to center the meta img ? width (px 150) order (-1) - Flexbox.flex 1 1 (auto) + Flexbox.flex 1 1 auto ".media-info-summary" ? do Flexbox.flex 2 1 (px 0) paddingRight (rem 3) @@ -293,7 +283,7 @@ main = do mobile $ do maxWidth (vw 100) flexDirection row - order (1) + order 1 flexBasis auto -- initial height (px 50) -- appmenu @@ -333,9 +323,8 @@ main = do button ? margin (rem 0.5) 0 (rem 0.5) 0 -- feature "#featured-comic" ? do - display flex + centered flexDirection column - justifyContent center Typo.euro height (px 411) mobile $ do @@ -347,8 +336,8 @@ main = do background $ linearGradient (straight sideTop) - [ (setA 0 nite, (pct 0)), - (nite, (pct 100)) + [ (setA 0 nite, pct 0), + (nite, pct 100) ] let h = 149 marginTop (px (- h)) @@ -360,7 +349,7 @@ main = do fontSize (rem 1.2) ".description" ? do width (px 400) - mobile $ remove + mobile remove "#featured-banner" ? do position relative minHeight (px 411) @@ -415,9 +404,8 @@ main = do padding (rem 0.5) (rem 0.5) (rem 0.5) (rem 0.5) width (vw 100) ".comic" ? do - display flex + centered flexDirection column - justifyContent center textAlign center euro maxWidth (px 110) @@ -449,9 +437,18 @@ main = do navbarHeight :: Double navbarHeight = 74 ---------------------------------------------------------------------------------- --- utilities ---------------------------------------------------------------------------------- +centered :: Css +centered = do + display flex + justifyContent center + alignItems center + alignSelf center + +centerJustify :: Css +centerJustify = do + display flex + alignItems center + justifyContent spaceBetween hide :: Css hide = visibility hidden @@ -472,7 +469,7 @@ rounded :: Css rounded = borderRadius (px 30) (px 30) (px 30) (px 30) appmenuWidth :: Size LengthUnit -appmenuWidth = (px 67) +appmenuWidth = px 67 flexCenter :: Css flexCenter = do |