Skip to content

Commit 5cbeca5

Browse files
committed
updated cargokit colors
1 parent 482a15c commit 5cbeca5

File tree

3 files changed

+44
-29
lines changed

3 files changed

+44
-29
lines changed

cargokit/index.css

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,5 @@
1010
:root {
1111
--hr-color: var(--secondary-lighten);
1212
--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;
3814
}

index.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,25 @@
33

44

55
/* 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+
}

index.html

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ <h4>Maybe switch something between colors:</h4>
5050

5151
<hr>
5252

53-
<p>And the grayscale of course 💾:</p>
53+
<h4>And the grayscale of course:</h4>
5454

5555
<section class="demo">
5656
<button class="button white">Button white</span></button>
@@ -64,8 +64,6 @@ <h4>Maybe switch something between colors:</h4>
6464
<button class="button black">Button black</button>
6565
</section>
6666

67-
<hr>
68-
6967
<h1>Input fields</h1>
7068

7169
<section class="demo">
@@ -76,6 +74,26 @@ <h1>Input fields</h1>
7674
<input class="field large" placeholder="Input large">
7775
</section>
7876

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+
7997
<script type="text/javascript" src="bundle.js"></script>
8098
</body>
8199
</html>

0 commit comments

Comments
 (0)