aboutsummaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/Main.hs24
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)")
+ ]