kacaii.dev
💻 My personal website
blog.kacaii.dev/
blog
gleam
lustre
1@import "tailwindcss";
2@import "@catppuccin/tailwindcss/mocha.css";
3
4@theme {
5 --hover-glow: 120%;
6 --default-padding: 0.8rem;
7 --margin-top: 1rem;
8 --border-radius: 0.5rem;
9
10 /* Catpuccin */
11 --mocha-base: #1e1e2e;
12 --mocha-text: #cdd6f4;
13 --mocha-pink: #f5c2e7;
14 --mocha-mauve: #cba6f7;
15 --mocha-red: #f38ba8;
16 --mocha-maroon: #eba0ac;
17 --mocha-peach: #fab387;
18 --mocha-yellow: #f9e2af;
19 --mocha-green: #a6e3a1;
20 --mocha-teal: #94e2d5;
21 --mocha-sky: #89dceb;
22 --mocha-sapphire: #74c7ec;
23 --mocha-blue: #89b4fa;
24 --mocha-lavender: #b4befe;
25 --mocha-text: #cdd6f4;
26 --mocha-subtext1: #bac2de;
27 --mocha-subtext0: #a6adc8;
28 --mocha-overlay2: #9399b2;
29 --mocha-overlay1: #7f849c;
30 --mocha-overlay0: #6c7086;
31 --mocha-surface2: #585b70;
32 --mocha-surface1: #45475a;
33 --mocha-surface0: #313244;
34 --mocha-base: #1e1e2e;
35 --mocha-mantle: #181825;
36 --mocha-crust: #11111b;
37}
38
39@layer components {
40
41 h1,
42 h2,
43 h3,
44 h4,
45 h5,
46 h6 {
47 font-weight: bold;
48 text-align: start;
49 }
50
51 h1 {
52 font-size: 1.875rem;
53 }
54
55 h2 {
56 font-size: 1.5rem;
57 }
58
59 h3 {
60 font-size: 1.25rem;
61 }
62
63 h4 {
64 font-size: 1.125rem;
65 }
66
67 h4 {
68 font-size: 1rem;
69 }
70
71 h5 {
72 font-size: 0.875rem;
73 }
74
75 h6 {
76 font-size: 0.75rem;
77 }
78
79 hr {
80 color: var(--mocha-surface0);
81 margin: 1rem 0;
82 border: 1px solid;
83 }
84
85 .jetbrains-mono-regular {
86 font-family: "JetBrains Mono", monospace;
87 font-optical-sizing: auto;
88 font-weight: normal;
89 font-style: normal;
90 }
91
92 .post-content {
93 code {
94 font-size: 1.125rem;
95 line-height: 1.5;
96 font-family: maple-mono;
97 background-color: var(--mocha-mantle);
98 }
99
100 a:not(:has(sup)) {
101 text-decoration: underline;
102 text-underline-offset: 2px;
103 color: var(--mocha-lavender);
104 }
105
106 /* Footnotes */
107 section[role="doc-endnotes"] {
108 hr {
109 margin-bottom: var(--default-padding);
110 }
111
112 li {
113 list-style: numbered inside;
114
115 &::marker {
116 color: var(--mocha-surface0);
117 }
118
119 p {
120 display: inline;
121 }
122 }
123
124 a[role="doc-backlink"] {
125 display: none;
126 }
127 }
128
129 /* Github-style markdown quotes */
130 blockquote {
131 &.note {
132 border-color: var(--mocha-blue);
133 }
134
135 &.tip {
136 border-color: var(--mocha-green);
137 }
138
139 &.important {
140 border-color: var(--mocha-mauve);
141 }
142
143 &.warning {
144 border-color: var(--mocha-yellow);
145 }
146
147 &.caution {
148 border-color: var(--mocha-red);
149 }
150
151 padding: var(--default-padding);
152 background-color: var(--mocha-mantle);
153 border-left: solid 0.8rem;
154 border-color: var(--mocha-lavender);
155 border-radius: var(--border-radius);
156 }
157
158 /* CODE HIGHLIGHTS */
159 pre:has(code) {
160 padding: var(--default-padding);
161 background-color: var(--mocha-mantle);
162 overflow-x: scroll;
163 border-radius: var(--border-radius);
164 }
165
166 pre code {
167 .hl-comment {
168 color: #5f5f87;
169 font-style: italic;
170 }
171
172 .hl-function {
173 color: #89b4fa;
174
175 &:hover {
176 filter: brightness(var(--hover-glow));
177 }
178 }
179
180 .hl-keyword {
181 color: #cba6f7;
182
183 &:hover {
184 filter: brightness(var(--hover-glow));
185 }
186 }
187
188 .hl-module {
189 color: #cdd6f4;
190
191 &:hover {
192 filter: brightness(var(--hover-glow));
193 }
194 }
195
196 .hl-number {
197 color: #fab387;
198
199 &:hover {
200 filter: brightness(var(--hover-glow));
201 }
202 }
203
204 .hl-operator {
205 color: #89dceb;
206
207 &:hover {
208 filter: brightness(var(--hover-glow));
209 }
210 }
211
212 .hl-string {
213 color: #a6e3a1;
214
215 &:hover {
216 filter: brightness(var(--hover-glow));
217 }
218 }
219
220 .hl-variant {
221 color: #f9e2af;
222
223 &:hover {
224 filter: brightness(var(--hover-glow));
225 }
226 }
227 }
228
229 /* END OF CODE HIGHLIGHTS */
230 }
231}