Let the user upgrade an ingredient quantity and adapt other quantities

1 files changed, 78 insertions, 0 deletions

diff --git a/design/Main.hs b/design/Main.hs
new file mode 100644
index 0000000..3ef1e0a
--- /dev/null
+++ b/design/Main.hs
@@ -0,0 +1,78 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+import Clay
+import Data.Monoid ((<>))
+
+color1 = rgb 113 68 30
+color2 = rgb 13 13 81
+color3 = rgb 230 230 230
+
+main :: IO ()
+main = putCss $ do
+
+  body ? do
+    maxWidth (px 600)
+    sym2 margin (px 0) auto
+
+  "a.header" ? do
+    display block
+    sym2 padding (px 15) (px 0)
+    margin (px 0) auto (px 30) auto
+    backgroundColor color1
+    color white
+    fontWeight bold
+    textAlign center
+    fontSize (px 36)
+    hover & textDecoration none
+
+  a ? do
+    textDecoration none
+    color color2
+    hover & textDecoration underline
+
+  (h1 <> h2 <> h3) ? color color1
+
+  ".number" ? do
+    backgroundColor color3
+    sym borderRadius (px 5)
+    sym padding (px 2)
+    borderStyle none
+    width (px 70)
+    textAlign (alignSide sideCenter)
+
+  (ul <> ol) ? do
+    listStyleType none
+    paddingLeft (px 15)
+    fontSize (px 18)
+
+    li ? do
+      marginBottom (em 0.5)
+      lineHeight (em 1.4)
+
+  (ol <> ul) |> li |> (ol <> ul) ? do
+    marginTop (em 0.5)
+    marginLeft (px 30)
+
+  ul |> li ? do
+    let bulletSize = (px 6)
+
+    before & do
+      display inlineBlock
+      content (stringContent "")
+      width bulletSize
+      height bulletSize
+      backgroundColor color1
+      sym borderRadius bulletSize
+      marginRight (px 15)
+      verticalAlign middle
+
+  ol ? do
+    "counter-reset" -: "ol"
+
+    li ? do
+      before & do
+        display inline
+        "counter-increment" -: "ol"
+        "content" -: "counter(ol)\".\""
+        marginRight (px 10)
+        color color1