forked from CodingCatDev/codingcat.dev
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtypography.css
More file actions
95 lines (79 loc) · 2.64 KB
/
typography.css
File metadata and controls
95 lines (79 loc) · 2.64 KB
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
/* Stylesheet: typography.css */
@layer base {
body {
@apply font-token text-token;
}
/* === Headings === */
h1:not(.unstyled):is(:not(.prose *)) {
@apply font-heading-token text-3xl md:text-5xl;
}
h2:not(.unstyled):is(:not(.prose *)) {
@apply font-heading-token text-2xl md:text-4xl;
}
h3:not(.unstyled):is(:not(.prose *)) {
@apply font-heading-token text-xl md:text-2xl;
}
h4:not(.unstyled):is(:not(.prose *)) {
@apply font-heading-token text-lg md:text-xl;
}
h5:not(.unstyled):is(:not(.prose *)) {
@apply font-heading-token text-base md:text-lg;
}
h6:not(.unstyled):is(:not(.prose *)) {
@apply font-heading-token text-sm md:text-base;
}
/* === Elements === */
p:not(.unstyled):is(:not(.prose *)) {
/* NOTE: do not hardcode a text color style here. It makes color overrides difficult. */
@apply text-base;
}
blockquote:not(.unstyled):is(:not(.prose *)) {
@apply text-token text-base italic border-l-8 border-l-surface-500 px-4 pl-4;
}
/* Keyboard */
kbd:not(.unstyled):is(:not(.prose *)) {
@apply font-sans font-bold text-sm;
@apply bg-surface-300-600-token px-1.5 py-[3px] rounded;
@apply ring-[1px] ring-surface-900 ring-inset;
@apply border-b-2 border-surface-900;
}
/* === Code Blocks === */
/* For use outside of BlackCatUI's CodeBlock component */
pre:not(.unstyled):not(.code-block pre):is(:not(.prose *)) {
@apply font-mono text-base bg-neutral-900/90 text-white p-4 whitespace-pre-wrap overflow-x-auto rounded-container-token;
}
code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
@apply font-mono text-xs text-primary-700 dark:text-primary-400 whitespace-nowrap;
@apply bg-primary-500/30 dark:bg-primary-500/20;
@apply py-0.5 px-1 rounded;
}
/* === Insertions / Deletions ==== */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */
ins:not(.unstyled):is(:not(.prose *)),
del:not(.unstyled):is(:not(.prose *)) {
@apply block relative p-0.5 pl-5;
text-decoration: none;
}
ins:not(.unstyled):is(:not(.prose *))::before,
del:not(.unstyled):is(:not(.prose *))::before {
@apply absolute left-1 font-mono;
}
ins:not(.unstyled):is(:not(.prose *))::before {
content: '+';
}
del:not(.unstyled):is(:not(.prose *))::before {
content: '−';
}
ins:not(.unstyled):is(:not(.prose *)) {
@apply font-mono bg-success-500 text-on-success-token;
}
del:not(.unstyled):is(:not(.prose *)) {
@apply font-mono bg-error-500 text-on-error-token;
}
/* === Date/Time === */
/* Useful for displaying timestamps */
time:not(.unstyled):is(:not(.prose *)) {
@apply text-sm text-surface-500 dark:text-surface-400;
}
}