1 files changed, 120 insertions, 0 deletions
diff --git a/design/Main.hs b/design/Main.hs
new file mode 100644
index 0000000..18688ba
--- /dev/null
+++ b/design/Main.hs
@@ -0,0 +1,120 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+import Clay hiding (violet)
+import Data.Monoid ((<>))
+import qualified Clay.Media as Media
+
+fernFrond = rgb 101 114 32
+violet = rgb 13 13 81
+
+main :: IO ()
+main = putCss $ do
+
+  body ? do
+    maxWidth responsiveLimit
+    sym2 margin (px 0) auto
+    mobile $ fontSize (px 14)
+    desktop $ fontSize (px 18)
+
+    "a.header" ? do
+      display block
+      sym2 padding (px 15) (px 0)
+      sym2 margin (px 0) auto
+      backgroundColor fernFrond
+      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 violet
+      hover & textDecoration underline
+
+    "#content" ? do
+      mobile $ sym2 margin (px 0) (px 20)
+
+      (h1 <> h2) ? color fernFrond
+
+      h1 ? do
+        desktop $ fontSize (px 28)
+        mobile $ fontSize (px 22)
+
+      h2 ? do
+        desktop $ fontSize (px 22)
+        mobile $ fontSize (px 18)
+
+      (ul <> ol) ? do
+        listStyleType none
+        desktop $ paddingLeft (px 15)
+        mobile $ paddingLeft (px 0)
+
+        li ? do
+          marginBottom (em 0.8)
+          lineHeight (em 1.6)
+          position relative
+          paddingLeft (px 20)
+          before & do
+            position absolute
+            top (px 0)
+            left (px 0)
+            color fernFrond
+            display inlineBlock
+
+      (ol <> ul) |> li |> (ol <> ul) ? do
+        marginTop (em 0.5)
+        marginLeft (px 30)
+
+      ul ? li ? before &
+        content (stringContent "•")
+
+      ol ? do
+        "counter-reset" -: "ol"
+
+        li ? do
+          desktop $ paddingLeft (px 30)
+          mobile $ paddingLeft (px 20)
+          position relative
+          textAlign justify
+          before & do
+            "counter-increment" -: "ol"
+            "content" -: "counter(ol)\".\""
+
+      p ? do
+        lineHeight (px 20)
+
+        (".plus" <> ".moins") ? before & do
+          display inlineBlock
+          width (px 20)
+          height (px 20)
+          marginRight (px 10)
+          textAlign (center)
+          verticalAlign middle
+          fontWeight bold
+          "transform" -: "translateY(-2px)"
+          marginLeft (px 10)
+
+        ".plus" ? before & do
+          content (stringContent "+")
+          color green
+
+        ".moins" ? before & do
+          content (stringContent "−")
+          color red
+
+
+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