styleguide/lib/typography/demo.jade at notifications · fluidcss/styleguide · GitHub

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
//- Typography
.content-styleguide

  section.typography-section

    h2#typography Typography
    p The body font is set to Nitti Grotesk, font size is 16px and line height is 2.

    .row.type-box-container

      .column
        .type-box
          h5 Theme Light
          h1 Headline 1
          h2 Headline 2
          h3 Headline 3
          h4 Title
          h5 Subheader
          p.body-2 Body 2 / Menu
          p.body-1 Body 1
          p.caption Caption
          a(href='#') Link

      .column.theme-dark
        .type-box
          h5 Theme Dark: add the class
            code .theme-dark
            |  to the parent container.
          h1 Headline 1
          h2 Headline 2
          h3 Headline 3
          h4 Title
          h5 Subheader
          p.body-2 Body 2 / Menu
          p.body-1 Body 1
          p.caption Caption
          a(href='#') Link

    .type-box.box-table

      table.typography-table

        tr
          td Light theme default type color
          td.big.opacity-87.variable $color-text
          td.big.opacity-87.name Primary
          td.big.opacity-87.color #00000
          td.big.opacity-87.opacity 87%

        tr
          td.rowspan.opacity-54(rowspan='2')
            | Default light bg:
            br
            | Auth0 Grey, #e3e5e7
          td.big.opacity-54.variable $color-text-light
          td.big.opacity-54.name Secondary
          td.big.opacity-54.color #00000
          td.big.opacity-54.opacity 54%

        tr
          td.big.opacity-26.variable $color-text-lighter
          td.big.opacity-26.name Disabled
          td.big.opacity-26.color #00000
          td.big.opacity-26.opacity 26%

    .theme-dark
      .type-box.box-table
        table.typography-table

          tr
            td Light theme default type color
            td.big.opacity-100.variable $color-text-contrast
            td.big.opacity-100.name Primary
            td.big.opacity-100.color #ffffff
            td.big.opacity-100.opacity 100%

          tr
            td.rowspan.opacity-70(rowspan='2')
              | Default light bg:
              br
              | Auth0 Grey, #e3e5e7
            td.big.opacity-70.variable $color-text-contrast-light
            td.big.opacity-70.name Secondary
            td.big.opacity-70.color #ffffff
            td.big.opacity-70.opacity 70%

          tr
            td.big.opacity-30.variable $color-text-contrast-lighter
            td.big.opacity-30.name Disabled
            td.big.opacity-30.color #ffffff
            td.big.opacity-30.opacity 30%

    hr

    h3 Body text

    p
      strong strong $font-weight-bold
    p
      code $font-size-base = 16px
    p Is it possible to control man’s mental evolution so as to make him proof against the psychosis of hate and destructiveness? Here I am thinking by no means only of the so-called uncultured masses. Experience proves that it is rather the so-called “intelligentsia” that is most apt to yield to these disastrous collective suggestions, since the intellectual has no direct contact with life in the raw but encounters it in its easiest, synthetic form — upon the printed page. … But … here we have the best occasion of discovering ways and means to render all armed conflicts impossible.
    p I know that in your writings we may find answers, explicit or implied, to all the issues of this urgent and absorbing problem. But it would be of the greatest service to us all were you to present the problem of world peace in the light of your most recent discoveries, for such a presentation well might blaze the trail for new and fruitful modes of action.

    p.text-left
      code .text-left
      |  Einstein's Letter to Freud

    p.text-center
      code .text-center
      |  Einstein's Letter to Freud

    p.text-right
      code .text-right
      |  Einstein's Letter to Freud

    p.text-justify
      code .text-justify
      |  Einstein's Letter to Freud

    p.text-nowrap
      code .text-nowrap
      |  Einstein's Letter to Freud

    p.text-lowercase
      code .text-lowercase
      |  Einstein's Letter to Freud

    p.text-uppercase
      code .text-uppercase
      |  Einstein's Letter to Freud

    p.text-capitalize
      code .text-capitalize
      |  Einstein's Letter to Freud

    p

    hr

    h3 Quote
    blockquote
      p “Intrigued by that enigma, he dug so deeply into her sentiments that in search of interest he found love, because by trying to make her love him he ended up falling in love with her.”
      footer Gabriel García Márquez, One Hundred Years of Solitude

    hr

    h3 Lists
    .row
      .col-sm-3
        code ol
        ol
          li Ricky Rauch
          li Cristian Douce
          li Victor Fernandez
          li Gabriel Andretta
          li Benjamin Flores
          li Santiago Escalante

      .col-sm-3
        code ul
        ul
          li Ricky Rauch
          li Cristian Douce
          li Victor Fernandez
          li Gabriel Andretta
          li Benjamin Flores
          li Santiago Escalante

      .col-sm-3
        code .list-inline
        ul.list-inline
          li Ricky Rauch
          li Cristian Douce
          li Victor Fernandez
          li Gabriel Andretta
          li Benjamin Flores
          li Santiago Escalante