diff options
Diffstat (limited to 'Hero/Look.hs')
| -rw-r--r-- | Hero/Look.hs | 93 |
1 files changed, 48 insertions, 45 deletions
diff --git a/Hero/Look.hs b/Hero/Look.hs index 03f64b3..e3958d5 100644 --- a/Hero/Look.hs +++ b/Hero/Look.hs @@ -2,12 +2,15 @@ {-# LANGUAGE OverloadedStrings #-} {-# LANGUAGE NoImplicitPrelude #-} +{- HLINT ignore "Use |>" -} + -- | Styles -- -- Eventually move make this mostly well-typed. Use this EDSL: -- http://fvisser.nl/clay/ module Hero.Look where +import Alpha hiding (rem, (**), (|>)) import Clay import qualified Clay.Flexbox as Flexbox import qualified Clay.Media as Media @@ -16,9 +19,8 @@ import qualified Clay.Stylesheet as Stylesheet import qualified Data.Map as Map import qualified Data.Text.Lazy as L import Hero.Look.Typography as Typo -import Miso ((=:), Attribute, style_) +import Miso (Attribute, style_, (=:)) import Miso.String (MisoString, toMisoString) -import Protolude hiding ((&), (**), rem) main :: Css main = do @@ -33,8 +35,8 @@ main = do textDecoration none ".loading" ? do centered - height $ vh 100 - width $ vw 100 + height <| vh 100 + width <| vw 100 -- animations ".grow" ? do transition "all" (sec 0.2) easeInOut (sec 0.2) @@ -51,13 +53,13 @@ main = do forwards keyframes "blur" - [ (0, Clay.filter $ blur (px 0)), - (50, Clay.filter $ blur (px 0)), - (100, Clay.filter $ blur (px 10)) + [ (0, Clay.filter <| blur (px 0)), + (50, Clay.filter <| blur (px 0)), + (100, Clay.filter <| blur (px 10)) ] html <> body ? do background nite - mobile $ do + mobile <| do overflowX hidden width (vw 100) -- general app wrapper stuf @@ -85,19 +87,19 @@ main = do borderBottom solid (px 3) grai wide top (px 0) - mobile $ noBorder <> width (vw 100) + mobile <| noBorder <> width (vw 100) "#app-body" ? do display flex - desktop $ width (vw 93) + desktop <| width (vw 93) alignContent center alignItems flexStart justifyContent flexStart flexDirection column flexShrink 0 padding (px 0) 0 0 0 - marginY $ px 74 - mobile $ flexDirection column - "#discover #app-body" ? do desktop $ marginLeft appmenuWidth + marginY <| px 74 + mobile <| flexDirection column + "#discover #app-body" ? do desktop <| marginLeft appmenuWidth "#app-head-right" ? do display flex justifyContent spaceBetween @@ -137,7 +139,7 @@ main = do zIndex 1 height (vh 100) width (px 400) - mobile $ width (vw 90) + mobile <| width (vw 90) "#login" ** ".help" ** a ? do color white display flex @@ -159,17 +161,17 @@ main = do euro <> wide flexCenter width (pct 100) - desktop $ marginLeft appmenuWidth <> height (vh 90) - mobile $ marginX (rem 0) <> marginTop (rem 0) <> minHeight (vh 90) + desktop <| marginLeft appmenuWidth <> height (vh 90) + mobile <| marginX (rem 0) <> marginTop (rem 0) <> minHeight (vh 90) h2 ? do thicc <> wide <> smol <> lower <> coat 2 textAlign center - mobile $ coat 0.8 + mobile <| coat 0.8 p ? do thicc <> coat 0.8 <> textAlign center maxWidth (px 900) marginAll (rem 1) - mobile $ coat 0.6 + mobile <| coat 0.6 ul ? do display flex flexDirection row @@ -181,7 +183,7 @@ main = do display flex flexDirection column textAlign center - mobile $ coat 0.6 + mobile <| coat 0.6 coat 0.8 <> clickable divv <? do position relative @@ -207,7 +209,7 @@ main = do justifyContent center alignItems center display flex - ".comic-video" |> iframe ? do + ".comic-video" & iframe ? do position absolute height (pct 93) width (pct 100) @@ -219,8 +221,8 @@ main = do fontSize z lineHeight z let m = 24 :: Double - top $ px $ navbarHeight + m - left $ px m + top <| px <| navbarHeight + m + left <| px m zIndex 999 -- zoom button and slider "#zoom-button" ? do @@ -229,15 +231,15 @@ main = do let sliderYY = 250 euro <> wide input ? do - transform $ Clay.rotate (deg (-90)) + transform <| Clay.rotate (deg (-90)) margin 0 0 (px sliderYY) 0 position absolute - height $ px sliderY - width $ px 200 + height <| px sliderY + width <| px 200 hide label ? do coat 0.9 - marginBottom $ px $ 2 * sliderYY + marginBottom <| px <| 2 * sliderYY position absolute hide ":hover" & ".ctrl" ? visibility visible @@ -252,7 +254,7 @@ main = do borderBottom solid (px 1) white flexDirection row centerJustify - mobile $ do + mobile <| do margin (rem 2) 0 (rem 2) 0 padding 0 0 0 (rem 0) noBorder @@ -263,7 +265,7 @@ main = do display flex flexDirection row divv # lastChild <? paddingLeft (rem 1) - mobile $ do + mobile <| do width (vw 90) -- this line can be commented if you want to center the meta img ? width (px 150) order (-1) @@ -271,7 +273,7 @@ main = do ".media-info-summary" ? do Flexbox.flex 2 1 (px 0) paddingRight (rem 3) - mobile $ do + mobile <| do marginAll (rem 1) padding 0 0 0 (rem 0) ".media-info-actions" ? do @@ -280,7 +282,7 @@ main = do display flex flexDirection column justifyContent spaceAround - mobile $ do + mobile <| do maxWidth (vw 100) flexDirection row order 1 @@ -308,8 +310,8 @@ main = do a |> img ? do width (px 22) height (px 22) - desktop $ a |> span ? remove - mobile $ do + desktop <| a |> span ? remove + mobile <| do order 2 flexDirection row position fixed @@ -329,14 +331,14 @@ main = do flexDirection column Typo.euro height (px 411) - mobile $ do + mobile <| do padding (px 0) 0 0 0 margin 0 0 (px 50) 0 after & do display block position relative - background $ - linearGradient + background + <| linearGradient (straight sideTop) [ (setA 0 nite, pct 0), (nite, pct 100) @@ -356,13 +358,13 @@ main = do position relative minHeight (px 411) minWidth (px 1214) - mobile $ marginLeft (px (-310)) + mobile <| marginLeft (px (-310)) "#featured-content" ? do position absolute width (pct 100) zIndex 9 top (px 200) -- b/c Firefox & WebKit autocalc "top" differently - mobile $ do + mobile <| do marginTop (px 200) alignItems center display flex @@ -382,7 +384,7 @@ main = do fontSize (rem 0.8) fontVariant smallCaps euro <> thicc <> wide - mobile $ do + mobile <| do height (px 26) width (px 100) margin 0 (px 5) 0 (px 5) @@ -393,7 +395,7 @@ main = do img ? do marginRight (px 7) height (px 15) - mobile $ height (px 10) + mobile <| height (px 10) -- ".comic-action-menu" ? display flex <> justifyContent (JustifyContentValue "left") -- shelving @@ -402,7 +404,7 @@ main = do flexDirection column justifyContent flexStart alignItems flexStart - mobile $ do + mobile <| do padding (rem 0.5) (rem 0.5) (rem 0.5) (rem 0.5) width (vw 100) ".comic" ? do @@ -518,15 +520,16 @@ grai = rgb 221 221 221 -- #dddddd -- dynamically as JavaScript object properties. The implementation is a bit -- hacky, but works. css :: Clay.Css -> Attribute action -css = Miso.style_ . Map.fromList . f . Clay.renderWith Clay.htmlInline [] +css = Miso.style_ <. Map.fromList <. f <. Clay.renderWith Clay.htmlInline [] where f :: L.Text -> [(MisoString, MisoString)] - f t = L.splitOn ";" t - <&> L.splitOn ":" - <&> \(x : y) -> (toMisoString x, toMisoString $ L.intercalate ":" y) + f t = + L.splitOn ";" t + <&> L.splitOn ":" + <&> \(x : y) -> (toMisoString x, toMisoString <| L.intercalate ":" y) inlineCss :: Css -> MisoString -inlineCss = toMisoString . render +inlineCss = toMisoString <. render type Style = Map MisoString MisoString |