generated from fastn-stack/fastn-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ftd
123 lines (83 loc) · 2.83 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
122
123
-- 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: fastn
-- import: fifthtry.github.io/admint-nunito-font/assets as nunito-assets
-- ftd.type nunito-demo:
line-height.px: 36
size.px: 22
letter-spacing.px: 0
font-family: $nunito-assets.fonts.Nunito
weight: 400
-- ftd.type nunito-demo-heading:
line-height.px: 56
size.px: 48
letter-spacing.px: 0
font-family: $nunito-assets.fonts.Nunito
weight: 400
-- ftd.responsive-type small-heading:
desktop: $nunito-demo
mobile: $nunito-demo
-- ftd.responsive-type large-heading:
desktop: $nunito-demo-heading
mobile: $nunito-demo-heading
-- ftd.column:
width: fill-container
padding-horizontal.px: 50
padding-horizontal.px if {ftd.device == "mobile"}: 20
background.solid: $inherited.colors.background.base
-- pd.package: nunito Font
name: fifthtry.github.io/admint-nunito-font
This component consist of nunito font with all it's styles.
-- cb.code: How to use
lang: ftd
include fifthtry.github.io/admint-nunito-font package into FPM.ftd file
\-- fpm.dependency: fifthtry.github.io/admint-nunito-font
\-- fpm.auto-import: fifthtry.github.io/admint-nunito-font
Inside your .ftd file to change for any specific token use:
\-- fpm.type.headline-small.font: $nunito.fonts.Nunito
\-- ftd.text:
role: $fpm.type.headline-small
-- tf.h2: `admint-nunito-font` regular 18px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $small-heading
color: $inherited.colors.text-strong
margin-bottom.px: 24
;;style: regular
-- tf.h2: `admint-nunito-font` regular strike through 18px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $small-heading
color: $inherited.colors.text-strong
margin-bottom.px: 24
;;style: regular strike
-- tf.h2: `admint-nunito-font` regular underline 18px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $small-heading
color: $inherited.colors.text-strong
margin-bottom.px: 24
;;style: regular underline
-- tf.h2: `admint-nunito-font` regular italic 18px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $small-heading
color: $inherited.colors.text-strong
margin-bottom.px: 24
;;style: regular italic
-- tf.h2: `admint-nunito-font` bold 18px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $small-heading
color: $inherited.colors.text-strong
margin-bottom.px: 24
;;style: bold
-- tf.h2: `admint-nunito-font` bold italic 18px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $small-heading
color: $inherited.colors.text-strong
margin-bottom.px: 24
;;style: bold italic
-- tf.h2: `admint-nunito-font` heading regular 48px:
-- ftd.text: The quick brown fox jumps over the lazy dog
role: $large-heading
color: $inherited.colors.text-strong
margin-bottom.px: 40
;;style: regular
-- end: ftd.column