Make it works and add “galette” recipe

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)")
+  ]