Add meat pie recipe and improve mobile view

1 files changed, 87 insertions, 62 deletions

diff --git a/design/Main.hs b/design/Main.hs
index 3ef1e0a..42c0815 100644
--- a/design/Main.hs
+++ b/design/Main.hs
@@ -2,6 +2,7 @@
 
 import Clay
 import Data.Monoid ((<>))
+import qualified Clay.Media as Media
 
 color1 = rgb 113 68 30
 color2 = rgb 13 13 81
@@ -11,68 +12,92 @@ main :: IO ()
 main = putCss $ do
 
   body ? do
-    maxWidth (px 600)
+    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)
-    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
+    "a.header" ? do
+      display block
+      sym2 padding (px 15) (px 0)
+      sym2 margin (px 0) auto
       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
+      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
+      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 30)
+          mobile $ paddingLeft (px 20)
+          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)
+            color color1
+
+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