diff options
| author | Joris | 2019-02-02 17:14:33 +0100 |
|---|---|---|
| committer | Joris | 2019-02-02 17:14:33 +0100 |
| commit | 142e0c9fac9896f8cb134fd1e1b010753402e7b8 (patch) | |
| tree | 6315c75f5d8a2a0c4f6e6b7251f621fde933ac9f /design/Main.hs | |
| parent | fb470f57438047ac8bd635dc485881ebae4ab0ff (diff) | |
| download | cooking-142e0c9fac9896f8cb134fd1e1b010753402e7b8.tar.gz cooking-142e0c9fac9896f8cb134fd1e1b010753402e7b8.tar.bz2 cooking-142e0c9fac9896f8cb134fd1e1b010753402e7b8.zip | |
Make it works and add “galette” recipe
Diffstat (limited to 'design/Main.hs')
| -rw-r--r-- | design/Main.hs | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/design/Main.hs b/design/Main.hs index cd0218e..0af225d 100644 --- a/design/Main.hs +++ b/design/Main.hs @@ -1,8 +1,8 @@ {-# LANGUAGE OverloadedStrings #-} -import Clay -import Data.Monoid ((<>)) -import qualified Clay.Media as Media +import Clay +import qualified Clay.Media as Media +import Data.Monoid ((<>)) color1 = rgb 113 68 30 color2 = rgb 13 13 81 @@ -11,6 +11,8 @@ color3 = rgb 230 230 230 main :: IO () main = putCss $ do + appearKeyframes + body ? do maxWidth responsiveLimit sym2 margin (px 0) auto @@ -40,6 +42,12 @@ main = putCss $ do hover & textDecoration underline "#content" ? do + + animationName "appear" + animationDuration (sec 0.2) + animationTimingFunction easeIn + animationIterationCount (iterationCount 1.0) + mobile $ sym2 margin (px 0) (px 20) (h1 <> h2) ? color color1 @@ -106,3 +114,13 @@ desktop = query Media.screen [ Media.minWidth responsiveLimit ] responsiveLimit :: Size LengthUnit responsiveLimit = px 800 + +appearKeyframes :: Css +appearKeyframes = keyframes + "appear" + [ (0, do + "transform" -: "translateX(20px)" + opacity 0 + ) + , (100, "transform" -: "translateX(0px)") + ] |