File tree Expand file tree Collapse file tree 3 files changed +44
-29
lines changed Expand file tree Collapse file tree 3 files changed +44
-29
lines changed Original file line number Diff line number Diff line change 10
10
: root {
11
11
--hr-color : var (--secondary-lighten );
12
12
--hr-opacity : 1 ;
13
- }
14
-
15
- /* demo */
16
- h1 {
17
- border-bottom : 1px solid var (--secondary-lighten );
18
- max-width : 260px ;
19
- padding : var (--gutter-tiny ) 0 ;
20
- margin : var (--gutter ) 0 ;
21
- }
22
-
23
- h4 {
24
-
25
- }
26
-
27
- hr {
28
- max-width : 260px ;
29
- }
30
-
31
- section .demo {
32
- margin : var (--gutter ) 0 var (--gutter-large );
33
-
34
- > * {
35
- margin : 0 var (--gutter-small ) 0 0 ;
36
- vertical-align : top;
37
- }
13
+ --hr-margin : var (--gutter-big ) 0 ;
38
14
}
Original file line number Diff line number Diff line change 3
3
4
4
5
5
/* cargokit example */
6
- @import 'cargokit/index.css'
6
+ @import 'cargokit/index.css' ;
7
+
8
+ /* demo */
9
+ body > h1 {
10
+ border-bottom : 1px solid var (--secondary-lighten );
11
+ padding : var (--gutter-tiny ) 0 ;
12
+ margin : var (--gutter-large ) 0 var (--gutter );
13
+ }
14
+
15
+ hr {
16
+ max-width : 260px ;
17
+ }
18
+
19
+ section .demo {
20
+ margin : var (--gutter ) 0 var (--gutter-large );
21
+
22
+ > .button ,
23
+ > .field {
24
+ margin : 0 var (--gutter-small ) 0 0 ;
25
+ vertical-align : top;
26
+ }
27
+ }
Original file line number Diff line number Diff line change @@ -50,7 +50,7 @@ <h4>Maybe switch something between colors:</h4>
50
50
51
51
< hr >
52
52
53
- < p > And the grayscale of course 💾 :</ p >
53
+ < h4 > And the grayscale of course:</ h4 >
54
54
55
55
< section class ="demo ">
56
56
< button class ="button white "> Button white</ span > </ button >
@@ -64,8 +64,6 @@ <h4>Maybe switch something between colors:</h4>
64
64
< button class ="button black "> Button black</ button >
65
65
</ section >
66
66
67
- < hr >
68
-
69
67
< h1 > Input fields</ h1 >
70
68
71
69
< section class ="demo ">
@@ -76,6 +74,26 @@ <h1>Input fields</h1>
76
74
< input class ="field large " placeholder ="Input large ">
77
75
</ section >
78
76
77
+ < h1 > Font sizing</ h1 >
78
+
79
+ < section class ="demo ">
80
+ < h1 > header 1</ h1 >
81
+ < h2 > header 2</ h2 >
82
+ < h3 > header 3</ h3 >
83
+ < h4 > header 4</ h4 >
84
+ < h5 > header 5</ h5 >
85
+ < h6 > header 6</ h6 >
86
+ </ section >
87
+
88
+ < hr >
89
+
90
+ < h4 > Additional sizes if needed:</ h4 >
91
+ < p class ="font-size-h7 "> header 7</ p >
92
+ < p class ="font-size-h8 "> header 8</ p >
93
+ < p class ="font-size-h9 "> header 9</ p >
94
+ < p class ="font-size-h10 "> header 10</ p >
95
+
96
+
79
97
< script type ="text/javascript " src ="bundle.js "> </ script >
80
98
</ body >
81
99
</ html >
You can’t perform that action at this time.
0 commit comments