Skip to content

Commit 12b00c0

Browse files
adamwathanadamwathan
committed
Working on bullet and counter styles
1 parent 470f910 commit 12b00c0

File tree

2 files changed

+70
-22
lines changed

2 files changed

+70
-22
lines changed

‎docs/components/MarkdownSample.mdx

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@
33
[View on GitHub](https://github.com/tailwindcss/typography)
44

55
<p className="lead">
6-
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
7-
when an unknown printer took a galley of type and scrambled it to make a type
8-
specimen book.
6+
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
7+
printer took a galley of type and scrambled it to make a type specimen book.
98
</p>
109

1110
A plugin that provides a `rich-text` class you can use to add sensible typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).
@@ -26,6 +25,7 @@ It's important to cover all of these use cases for a few reasons:
2625

2726
1. We want everything to look good out of the box.
2827
2. Really just the first reason, that's the whole point of the plugin.
28+
3. Here's a third pretend reason though because three is a better number of items.
2929

3030
Now we're going to try out a header style.
3131

@@ -47,9 +47,8 @@ It's probably important that images look okay here by default as well:
4747
alt=""
4848
/>
4949
<figcaption>
50-
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
51-
roots in a piece of classical Latin literature from 45 BC, making it over
52-
2000 years old.
50+
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
51+
classical Latin literature from 45 BC, making it over 2000 years old.
5352
</figcaption>
5453
</figure>
5554

@@ -59,6 +58,34 @@ Now I'm going to show you an example of an unordered list to make sure that look
5958
- In this example we're keeping the items short.
6059
- Later, we'll use longer, more complex list items.
6160

61+
It's also possible to have an ordered list with _lots_ of items in it. I think more than maybe 25 is probably not worth optimizing for but let's at least try 25 to see how it looks.
62+
63+
1. Here's the first item.
64+
2. Now a second item has appeared.
65+
3. A third item could also be in this list.
66+
4. If we added fourth it would go here.
67+
5. Five is the number of fingers most people have on each hand.
68+
6. Six.
69+
7. Seven is a great name for a baby.
70+
8. Eight is the number of the black ball in pool.
71+
9. Nine is one of my favorite numbers because I like 3 and 9 has three 3s.
72+
10. This is the number my daughter normally stops counting at.
73+
11. Add a seven before this one and you've got a great convenience store.
74+
12. Monkeys.
75+
13. Some elevators don't have this number, maybe most even?
76+
14. Now we are entering the territory where numbers don't have any cool meaning.
77+
15. Yep still holding true.
78+
16. You could learn to drive now in many places.
79+
17. At this point you should be pretty good at driving.
80+
18. Not old enough to drink but old enough to play bingo.
81+
19. Now you can booze up baby.
82+
20. Still not old enough to drink in the US though.
83+
21. But now you can.
84+
22. You've probably gotten a DUI at this point.
85+
23. And now you're in jail.
86+
24. Still in jail.
87+
25. Now you could rent a car if you hadn't got a DUI.
88+
6289
And that's the end of this section.
6390

6491
## What if we stack headings?

‎src/styles.js

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ module.exports = {
1616
'> :last-child': {
1717
marginBottom: '0',
1818
},
19+
'.lead': {
20+
color: defaultTheme.colors.gray[600],
21+
},
1922
a: {
2023
color: defaultTheme.colors.gray[900],
2124
textDecoration: 'underline',
@@ -34,8 +37,7 @@ module.exports = {
3437
'ol > li::before': {
3538
content: 'counter(list-counter) "."',
3639
position: 'absolute',
37-
left: '0',
38-
fontWeight: '600',
40+
fontWeight: '400',
3941
color: defaultTheme.colors.gray[600],
4042
},
4143
'ul > li': {
@@ -44,7 +46,6 @@ module.exports = {
4446
'ul > li::before': {
4547
content: '""',
4648
position: 'absolute',
47-
left: '0',
4849
backgroundColor: defaultTheme.colors.gray[400],
4950
borderRadius: '50%',
5051
},
@@ -201,15 +202,19 @@ module.exports = {
201202
marginBottom: em(8, 16),
202203
},
203204
'ol > li': {
204-
paddingLeft: em(32, 16),
205+
paddingLeft: em(28, 16),
206+
},
207+
'ol > li:before': {
208+
left: '0',
205209
},
206210
'ul > li': {
207-
paddingLeft: em(24, 16),
211+
paddingLeft: em(28, 16),
208212
},
209213
'ul > li::before': {
210214
width: em(6, 16),
211215
height: em(6, 16),
212216
top: `calc(${em(28 / 2, 16)} - ${em(3, 16)})`,
217+
left: em(4, 16),
213218
},
214219
'> ul > li p': {
215220
marginTop: em(12, 16),
@@ -344,15 +349,19 @@ module.exports = {
344349
marginBottom: em(4, 14),
345350
},
346351
'ol > li': {
347-
paddingLeft: em(32, 16),
352+
paddingLeft: em(22, 14),
353+
},
354+
'ol > li:before': {
355+
left: '0',
348356
},
349357
'ul > li': {
350-
paddingLeft: em(24, 16),
358+
paddingLeft: em(22, 14),
351359
},
352360
'ul > li::before': {
353361
height: em(5, 14),
354362
width: em(5, 14),
355363
top: `calc(${em(24 / 2, 14)} - ${em(2.5, 14)})`,
364+
left: em(3, 14),
356365
},
357366
'> ul > li p': {
358367
marginTop: em(8, 14),
@@ -486,15 +495,19 @@ module.exports = {
486495
marginBottom: em(12, 18),
487496
},
488497
'ol > li': {
489-
paddingLeft: em(32, 16),
498+
paddingLeft: em(30, 18),
499+
},
500+
'ol > li:before': {
501+
left: '0',
490502
},
491503
'ul > li': {
492-
paddingLeft: em(24, 16),
504+
paddingLeft: em(30, 18),
493505
},
494506
'ul > li::before': {
495507
width: em(6, 18),
496508
height: em(6, 18),
497509
top: `calc(${em(32 / 2, 18)} - ${em(3, 18)})`,
510+
left: em(4, 18),
498511
},
499512
'> ul > li p': {
500513
marginTop: em(16, 18),
@@ -640,15 +653,19 @@ module.exports = {
640653
marginBottom: em(12, 20),
641654
},
642655
'ol > li': {
643-
paddingLeft: em(32, 16),
656+
paddingLeft: em(32, 18),
657+
},
658+
'ol > li:before': {
659+
left: '0',
644660
},
645661
'ul > li': {
646-
paddingLeft: em(24, 16),
662+
paddingLeft: em(32, 18),
647663
},
648664
'ul > li::before': {
649-
width: em(6, 20),
650-
height: em(6, 20),
651-
top: `calc(${em(36 / 2, 20)} - ${em(3, 20)})`,
665+
width: em(7, 20),
666+
height: em(7, 20),
667+
top: `calc(${em(36 / 2, 20)} - ${em(3.5, 20)})`,
668+
left: em(5, 20),
652669
},
653670
'> ul > li p': {
654671
marginTop: em(16, 20),
@@ -794,15 +811,19 @@ module.exports = {
794811
marginBottom: em(16, 24),
795812
},
796813
'ol > li': {
797-
paddingLeft: em(32, 16),
814+
paddingLeft: em(40, 24),
815+
},
816+
'ol > li:before': {
817+
left: '0',
798818
},
799819
'ul > li': {
800-
paddingLeft: em(24, 16),
820+
paddingLeft: em(40, 24),
801821
},
802822
'ul > li::before': {
803823
width: em(8, 24),
804824
height: em(8, 24),
805825
top: `calc(${em(40 / 2, 24)} - ${em(4, 24)})`,
826+
left: em(6, 24),
806827
},
807828
'> ul > li p': {
808829
marginTop: em(20, 24),

0 commit comments

Comments
 (0)