aboutsummaryrefslogtreecommitdiff
path: root/src/Design/Resume.hs
blob: d6689871d18954433e46b78f6766a1d3e4b16a44 (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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
{-# LANGUAGE OverloadedStrings #-}

module Design.Resume
  ( resumeCss
  ) where

import           Prelude      hiding ((**))

import           Clay
import qualified Clay.Flexbox as CF

import qualified Design.Color as Color
import qualified Design.Media as Media
import qualified Design.Size  as Size

resumeCss :: Css
resumeCss =
  ".section" ? do
    position relative
    margin (pct 0) (pct 10) (pct 0) (pct 10)

    h1 ? textTransform capitalize

    ".identity" ? do
      ".mail" <> ".git" ? do
        Size.indentation
        i ? marginRight (em 0.5)

        Media.mobile $ do
          fontSize (px 14)
          marginBottom (px 15)

        Media.tablet $ do
          fontSize (px 18)
          marginBottom (px 25)

        Media.desktop $ do
          fontSize (px 20)
          marginBottom (px 30)

    ".pdf" ? do
      position absolute
      right (px 0)
      top (px 0)
      color Color.red
      transition "all" (ms 100) ease (sec 0)
      i ? marginRight (px 0)
      hover & transform (scale 1.2 1.2)

      Media.mobile $ do
        lineHeight (px 30)
        height (px 30)
        fontSize (px 20)

      Media.tablet $ do
        lineHeight (px 40)
        height (px 40)
        fontSize (px 30)

      Media.desktop $ do
        lineHeight (px 50)
        height (px 50)
        fontSize (px 40)

    ".item" ? do
      marginBottom (px 40)
      Size.indentation
      Media.mobile $ marginBottom (px 25)

      ".title" <> ".location" <> ".description" ? do
        Size.lineHeight

      ".title" ? do
        Media.desktop $ do
          display flex
          marginBottom (px 10)

        ".skills" & do
          Size.tabletMarginBottom

        ".text" ? do
          backgroundColor Color.orange
          color Color.white
          padding (px 0) (px 10) (px 0) (px 10)
          sym borderRadius (px 2)
          Media.mobileTablet $ marginBottom (px 10)

        ".date" ? do
          fontStyle italic
          Media.mobile $ fontSize (pct 90)
          Media.desktop $ marginLeft (px 15)

      ".description" ? ".detail" ?
        marginTop Size.listItemSep

      ".location" ? do
        color Color.green
        Media.mobile $ do
          fontSize (pct 90)
          marginBottom (px 10)
        Size.tabletMarginBottom

    ".itemList" ? marginTop (px 5)

    ".bullets" |> ".detail" ? do
      Media.mobile $ marginBottom Size.listItemSep
      Size.tabletMarginBottom

    ".bullets" |> li ? do
      Size.lineHeight
      before & do
        content (stringContent "•")
        color Color.red
        display inlineBlock
        marginRight (px 10)

    ".technos" ? do
      display flex
      flexWrap CF.wrap
      sym2 margin (px 5) (px 0)

    ".technos" |> ".techno" ? do
      lineHeight normal
      borderBottom solid (px 2) lightgray
      margin (px 10) (px 15) (px 5) (px 0)