diff options
Diffstat (limited to 'design')
| -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)") + ] |