aboutsummaryrefslogtreecommitdiff
path: root/design/Main.hs
blob: 3ef1e0ad15c1f3c5f7980f4ff6ee5691bc30f6e7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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