-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.ftd
123 lines (78 loc) · 2.57 KB
/
index.ftd
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
-- import: fifthtry.github.io/package-doc/doc as pd
-- import: fifthtry.github.io/package-doc/code-block as cb
-- import: fifthtry.github.io/package-doc/typography as tf
-- import: fifthtry.github.io/roboto-font-font/assets as roboto-assets
-- import: fastn
-- ftd.font-size roboto-demo:
line-height: 36
size: 22
letter-spacing: 0
-- ftd.font-size roboto-demo-heading:
line-height: 56
size: 48
letter-spacing: 0
-- ftd.type roboto-font-desktop:
size.px: 40
weight: 900
font-family: $roboto-assets.fonts.Roboto
-- ftd.type roboto-font-mobile:
size.px: 40
weight: 900
font-family: $roboto-assets.fonts.Roboto
-- ftd.responsive-type roboto-font:
desktop: $roboto-font-desktop
mobile: $roboto-font-mobile
-- ftd.type roboto-font-heading: $roboto-assets.fonts.Roboto
desktop: $roboto-demo-heading
mobile: $roboto-demo-heading
xl: $roboto-demo-heading
weight: 400
-- ftd.column:
width: fill-container
padding-horizontal.px: 50
padding-horizontal.px if { ftd.device == "mobile" }: 20
background.solid: $inherited.colors.background.base
;;id: parent
-- pd.package: Roboto - fastn font
name: fifthtry.github.io/roboto-font
This component consist of Google Roboto font with all it's styles from Thin-100 to Black-900 Italic.
-- pd.component: Roboto - fastn font
name: https://github.com/FifthTry/roboto
This component consist of Google Roboto font with all it's styles from Thin-100 to Black-900 Italic.
-- tf.h3: How to use
Include fifthtry.github.io/roboto-font package into FASTN.ftd file
-- cb.code:
lang: ftd
\-- fastn.dependency: fifthtry.github.io/roboto-font as roboto
\-- fastn.auto-import: roboto
-- tf.markdown:
Inside your .ftd file to add roboto dependency and create custom font as given
in below code:
-- cb.code:
lang: ftd
\-- import: fifthtry.github.io/roboto-font/assets as roboto-assets
\-- import: fastn
\-- How to: define a custom font:-
\-- ftd.type roboto-font-desktop:
size.px: 40
weight: 900
font-family: $roboto-assets.fonts.Roboto
\-- ftd.type roboto-font-mobile:
size.px: 40
weight: 900
font-family: $roboto-assets.fonts.Roboto
\-- ftd.responsive-type roboto-font:
desktop: $roboto-font-desktop
mobile: $roboto-font-mobile
\-- How to: invoke a custom font:-
\-- ftd.text: Todos os seres humanos nascem livres e iguais em dignidade.
role: $roboto-font
color: $inherited.colors.text-strong
margin-bottom.px: 24
-- tf.h2: `roboto-font` weight 900 40px:
See below how it will render on your browser:
-- ftd.text: Todos os seres humanos nascem livres e iguais em dignidade.
role: $roboto-font
color: $inherited.colors.text-strong
margin-bottom.px: 24
-- end: ftd.column