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