aboutsummaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/Main.hs126
1 files changed, 0 insertions, 126 deletions
diff --git a/design/Main.hs b/design/Main.hs
deleted file mode 100644
index b057cb4..0000000
--- a/design/Main.hs
+++ /dev/null
@@ -1,126 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-import Clay
-import qualified Clay.Media as Media
-import Data.Monoid ((<>))
-
-color1 = rgb 113 68 30
-color2 = rgb 13 13 81
-color3 = rgb 230 230 230
-
-main :: IO ()
-main = putCss $ do
-
- appearKeyframes
-
- body ? do
- maxWidth responsiveLimit
- sym2 margin (px 0) auto
- mobile $ fontSize (px 14)
- desktop $ fontSize (px 18)
-
- ".header" ? do
- display block
- sym2 padding (px 15) (px 0)
- sym2 margin (px 0) auto
- backgroundColor color1
- color white
- fontWeight bold
- textAlign center
- hover & textDecoration none
- desktop $ do
- fontSize (px 32)
- marginBottom (px 30)
- borderRadius (px 0) (px 0) (px 5) (px 5)
- mobile $ do
- fontSize (px 22)
- marginBottom (px 20)
-
- a ? do
- textDecoration none
- color color2
- 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
-
- h1 ? do
- desktop $ fontSize (px 28)
- mobile $ fontSize (px 22)
-
- h2 ? do
- desktop $ fontSize (px 22)
- mobile $ fontSize (px 18)
-
- ".number" ? do
- fontSize inherit
- backgroundColor color3
- sym borderRadius (px 5)
- sym padding (px 2)
- borderStyle none
- textAlign (alignSide sideCenter)
- desktop $ width (px 70)
- mobile $ width (px 50)
-
- (ul <> ol) ? do
- listStyleType none
- desktop $ paddingLeft (px 15)
- mobile $ paddingLeft (px 0)
-
- li ? do
- marginBottom (em 0.8)
- lineHeight (em 1.6)
-
- (ol <> ul) |> li |> (ol <> ul) ? do
- marginTop (em 0.5)
- marginLeft (px 30)
-
- ol ? do
- "counter-reset" -: "ol"
-
- li ? do
- desktop $ paddingLeft (px 40)
- mobile $ paddingLeft (px 30)
- position relative
- textAlign justify
- before & do
- display inline
- position absolute
- top (px 0)
- left (px 0)
- "counter-increment" -: "ol"
- "content" -: "counter(ol)"
- marginRight (px 10)
- backgroundColor color1
- color white
- sym borderRadius (pct 50)
- fontWeight bold
- width (em 1.6)
- textAlign (alignSide sideCenter)
-
-mobile :: Css -> Css
-mobile = query Media.screen [ Media.maxWidth responsiveLimit ]
-
-desktop :: Css -> Css
-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)")
- ]