your personal website on atproto - mirror
blento.app
1/* GitHub Light theme for code blocks */
2.tiptap {
3 :first-child {
4 margin-top: 0;
5 }
6
7 pre {
8 background: #f6f8fa;
9 border-radius: 1rem;
10 color: #1f2328;
11 font-family: 'JetBrainsMono', monospace;
12 border: 1px solid #d1d9e0;
13 margin: 1.5rem 0;
14 padding: 0.75rem 1rem;
15
16 code {
17 background: none;
18 color: inherit;
19 font-size: 0.8rem;
20 padding: 0;
21 }
22
23 .hljs-comment,
24 .hljs-quote {
25 color: #59636e;
26 font-style: italic;
27 }
28
29 .hljs-keyword,
30 .hljs-selector-tag {
31 color: #cf222e;
32 }
33
34 .hljs-tag,
35 .hljs-name {
36 color: #116329;
37 }
38
39 .hljs-attribute {
40 color: #0550ae;
41 }
42
43 .hljs-variable,
44 .hljs-template-variable,
45 .hljs-regexp,
46 .hljs-link {
47 color: #0550ae;
48 }
49
50 .hljs-number,
51 .hljs-literal {
52 color: #0550ae;
53 }
54
55 .hljs-string,
56 .hljs-symbol,
57 .hljs-bullet {
58 color: #0a3069;
59 }
60
61 .hljs-title,
62 .hljs-section {
63 color: #0550ae;
64 font-weight: 600;
65 }
66
67 .hljs-type,
68 .hljs-built_in,
69 .hljs-builtin-name,
70 .hljs-params {
71 color: #953800;
72 }
73
74 .hljs-meta {
75 color: #0550ae;
76 }
77
78 .hljs-selector-id,
79 .hljs-selector-class {
80 color: #0550ae;
81 }
82
83 .hljs-emphasis {
84 font-style: italic;
85 }
86
87 .hljs-strong {
88 font-weight: 700;
89 }
90 }
91}
92
93/* GitHub Dark theme for code blocks */
94.dark .tiptap {
95 pre {
96 background: #161b22;
97 color: #e6edf3;
98 border: 1px solid #30363d;
99
100 code {
101 background: none;
102 color: inherit;
103 font-size: 0.8rem;
104 padding: 0;
105 }
106
107 .hljs-comment,
108 .hljs-quote {
109 color: #8b949e;
110 font-style: italic;
111 }
112
113 .hljs-keyword,
114 .hljs-selector-tag {
115 color: #ff7b72;
116 }
117
118 .hljs-tag,
119 .hljs-name {
120 color: #7ee787;
121 }
122
123 .hljs-attribute {
124 color: #79c0ff;
125 }
126
127 .hljs-variable,
128 .hljs-template-variable,
129 .hljs-regexp,
130 .hljs-link {
131 color: #79c0ff;
132 }
133
134 .hljs-number,
135 .hljs-literal {
136 color: #79c0ff;
137 }
138
139 .hljs-string,
140 .hljs-symbol,
141 .hljs-bullet {
142 color: #a5d6ff;
143 }
144
145 .hljs-title,
146 .hljs-section {
147 color: #d2a8ff;
148 font-weight: 600;
149 }
150
151 .hljs-type,
152 .hljs-built_in,
153 .hljs-builtin-name,
154 .hljs-params {
155 color: #ffa657;
156 }
157
158 .hljs-meta {
159 color: #79c0ff;
160 }
161
162 .hljs-selector-id,
163 .hljs-selector-class {
164 color: #79c0ff;
165 }
166
167 .hljs-emphasis {
168 font-style: italic;
169 }
170
171 .hljs-strong {
172 font-weight: 700;
173 }
174 }
175}