kacaii.dev
💻 My personal website
blog.kacaii.dev/
blog
gleam
lustre
:truck: move some styles to `input.css`
+229
-221
-209
priv/dist/styles.css
-209
priv/dist/styles.css
···
24
24
font-style: italic;
25
25
font-weight: bold;
26
26
}
27
-
28
-
:root {
29
-
--hover-glow: 120%;
30
-
--default-padding: 0.8rem;
31
-
--margin-top: 1rem;
32
-
--border-radius: 0.5rem;
33
-
34
-
/* Catpuccin */
35
-
--mocha-base: #1e1e2e;
36
-
--mocha-text: #cdd6f4;
37
-
--mocha-pink: #f5c2e7;
38
-
--mocha-mauve: #cba6f7;
39
-
--mocha-red: #f38ba8;
40
-
--mocha-maroon: #eba0ac;
41
-
--mocha-peach: #fab387;
42
-
--mocha-yellow: #f9e2af;
43
-
--mocha-green: #a6e3a1;
44
-
--mocha-teal: #94e2d5;
45
-
--mocha-sky: #89dceb;
46
-
--mocha-sapphire: #74c7ec;
47
-
--mocha-blue: #89b4fa;
48
-
--mocha-lavender: #b4befe;
49
-
--mocha-text: #cdd6f4;
50
-
--mocha-subtext1: #bac2de;
51
-
--mocha-subtext0: #a6adc8;
52
-
--mocha-overlay2: #9399b2;
53
-
--mocha-overlay1: #7f849c;
54
-
--mocha-overlay0: #6c7086;
55
-
--mocha-surface2: #585b70;
56
-
--mocha-surface1: #45475a;
57
-
--mocha-surface0: #313244;
58
-
--mocha-base: #1e1e2e;
59
-
--mocha-mantle: #181825;
60
-
--mocha-crust: #11111b;
61
-
}
62
-
63
-
@view-transition {
64
-
navigation: auto;
65
-
}
66
-
67
-
::view-transition-group(root) {
68
-
animation: none;
69
-
}
70
-
71
-
.post-content {
72
-
code {
73
-
font-size: 1.125rem;
74
-
line-height: 1.5;
75
-
font-family: maple-mono;
76
-
background-color: var(--mocha-mantle);
77
-
}
78
-
79
-
h1,
80
-
h2,
81
-
h3,
82
-
h4,
83
-
h5,
84
-
h6 {
85
-
font-weight: bold;
86
-
text-align: start;
87
-
}
88
-
89
-
h1 {
90
-
font-size: 2.5rem;
91
-
}
92
-
93
-
h2 {
94
-
font-size: 1.875rem;
95
-
}
96
-
97
-
h3 {
98
-
font-size: 1.5rem;
99
-
}
100
-
101
-
a:not(:has(sup)) {
102
-
text-decoration: underline;
103
-
text-underline-offset: 2px;
104
-
color: var(--mocha-lavender);
105
-
}
106
-
107
-
hr {
108
-
color: var(--mocha-surface0);
109
-
border: 1px solid;
110
-
}
111
-
112
-
section[role="doc-endnotes"] {
113
-
hr {
114
-
margin-bottom: var(--default-padding);
115
-
}
116
-
117
-
li {
118
-
list-style: numbered inside;
119
-
120
-
&::marker {
121
-
color: var(--mocha-surface0);
122
-
}
123
-
124
-
p {
125
-
display: inline;
126
-
}
127
-
}
128
-
129
-
a[role="doc-backlink"] {
130
-
display: none;
131
-
}
132
-
}
133
-
134
-
blockquote {
135
-
&.note {
136
-
border-color: var(--mocha-blue);
137
-
}
138
-
139
-
&.tip {
140
-
border-color: var(--mocha-green);
141
-
}
142
-
143
-
&.important {
144
-
border-color: var(--mocha-mauve);
145
-
}
146
-
147
-
&.warning {
148
-
border-color: var(--mocha-yellow);
149
-
}
150
-
151
-
&.caution {
152
-
border-color: var(--mocha-red);
153
-
}
154
-
155
-
padding: var(--default-padding);
156
-
background-color: var(--mocha-mantle);
157
-
border-left: solid 0.8rem;
158
-
border-color: var(--mocha-lavender);
159
-
border-radius: var(--border-radius);
160
-
}
161
-
162
-
/* CODE HIGHLIGHTS */
163
-
164
-
pre:has(code) {
165
-
padding: var(--default-padding);
166
-
background-color: var(--mocha-mantle);
167
-
overflow-x: scroll;
168
-
border-radius: var(--border-radius);
169
-
}
170
-
171
-
pre code {
172
-
.hl-comment {
173
-
color: #5f5f87;
174
-
font-style: italic;
175
-
}
176
-
177
-
.hl-function {
178
-
color: #89b4fa;
179
-
180
-
&:hover {
181
-
filter: brightness(var(--hover-glow));
182
-
}
183
-
}
184
-
185
-
.hl-keyword {
186
-
color: #cba6f7;
187
-
188
-
&:hover {
189
-
filter: brightness(var(--hover-glow));
190
-
}
191
-
}
192
-
193
-
.hl-module {
194
-
color: #cdd6f4;
195
-
196
-
&:hover {
197
-
filter: brightness(var(--hover-glow));
198
-
}
199
-
}
200
-
201
-
.hl-number {
202
-
color: #fab387;
203
-
204
-
&:hover {
205
-
filter: brightness(var(--hover-glow));
206
-
}
207
-
}
208
-
209
-
.hl-operator {
210
-
color: #89dceb;
211
-
212
-
&:hover {
213
-
filter: brightness(var(--hover-glow));
214
-
}
215
-
}
216
-
217
-
.hl-string {
218
-
color: #a6e3a1;
219
-
220
-
&:hover {
221
-
filter: brightness(var(--hover-glow));
222
-
}
223
-
}
224
-
225
-
.hl-variant {
226
-
color: #f9e2af;
227
-
228
-
&:hover {
229
-
filter: brightness(var(--hover-glow));
230
-
}
231
-
}
232
-
}
233
-
234
-
/* END OF CODE HIGHLIGHTS */
235
-
}
+221
priv/input.css
+221
priv/input.css
···
1
1
@import "tailwindcss";
2
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
+
h1,
41
+
h2,
42
+
h3,
43
+
h4,
44
+
h5,
45
+
h6 {
46
+
font-weight: bold;
47
+
text-align: start;
48
+
}
49
+
50
+
h1 {
51
+
font-size: 2.25rem;
52
+
}
53
+
54
+
h2 {
55
+
font-size: 1.875rem;
56
+
}
57
+
58
+
h3 {
59
+
font-size: 1.5rem;
60
+
}
61
+
62
+
h4 {
63
+
font-size: 1.25rem;
64
+
}
65
+
66
+
h4 {
67
+
font-size: 1.125rem;
68
+
}
69
+
70
+
h5 {
71
+
font-size: 1rem;
72
+
}
73
+
74
+
h6 {
75
+
font-size: 0.875rem;
76
+
}
77
+
78
+
hr {
79
+
color: var(--mocha-surface0);
80
+
margin: 1rem 0;
81
+
border: 1px solid;
82
+
}
83
+
84
+
.post-content {
85
+
code {
86
+
font-size: 1.125rem;
87
+
line-height: 1.5;
88
+
font-family: maple-mono;
89
+
background-color: var(--mocha-mantle);
90
+
}
91
+
92
+
a:not(:has(sup)) {
93
+
text-decoration: underline;
94
+
text-underline-offset: 2px;
95
+
color: var(--mocha-lavender);
96
+
}
97
+
98
+
/* Footnotes */
99
+
section[role="doc-endnotes"] {
100
+
hr {
101
+
margin-bottom: var(--default-padding);
102
+
}
103
+
104
+
li {
105
+
list-style: numbered inside;
106
+
107
+
&::marker {
108
+
color: var(--mocha-surface0);
109
+
}
110
+
111
+
p {
112
+
display: inline;
113
+
}
114
+
}
115
+
116
+
a[role="doc-backlink"] {
117
+
display: none;
118
+
}
119
+
}
120
+
121
+
/* Github-style markdown quotes */
122
+
blockquote {
123
+
&.note {
124
+
border-color: var(--mocha-blue);
125
+
}
126
+
127
+
&.tip {
128
+
border-color: var(--mocha-green);
129
+
}
130
+
131
+
&.important {
132
+
border-color: var(--mocha-mauve);
133
+
}
134
+
135
+
&.warning {
136
+
border-color: var(--mocha-yellow);
137
+
}
138
+
139
+
&.caution {
140
+
border-color: var(--mocha-red);
141
+
}
142
+
143
+
padding: var(--default-padding);
144
+
background-color: var(--mocha-mantle);
145
+
border-left: solid 0.8rem;
146
+
border-color: var(--mocha-lavender);
147
+
border-radius: var(--border-radius);
148
+
}
149
+
150
+
/* CODE HIGHLIGHTS */
151
+
pre:has(code) {
152
+
padding: var(--default-padding);
153
+
background-color: var(--mocha-mantle);
154
+
overflow-x: scroll;
155
+
border-radius: var(--border-radius);
156
+
}
157
+
158
+
pre code {
159
+
.hl-comment {
160
+
color: #5f5f87;
161
+
font-style: italic;
162
+
}
163
+
164
+
.hl-function {
165
+
color: #89b4fa;
166
+
167
+
&:hover {
168
+
filter: brightness(var(--hover-glow));
169
+
}
170
+
}
171
+
172
+
.hl-keyword {
173
+
color: #cba6f7;
174
+
175
+
&:hover {
176
+
filter: brightness(var(--hover-glow));
177
+
}
178
+
}
179
+
180
+
.hl-module {
181
+
color: #cdd6f4;
182
+
183
+
&:hover {
184
+
filter: brightness(var(--hover-glow));
185
+
}
186
+
}
187
+
188
+
.hl-number {
189
+
color: #fab387;
190
+
191
+
&:hover {
192
+
filter: brightness(var(--hover-glow));
193
+
}
194
+
}
195
+
196
+
.hl-operator {
197
+
color: #89dceb;
198
+
199
+
&:hover {
200
+
filter: brightness(var(--hover-glow));
201
+
}
202
+
}
203
+
204
+
.hl-string {
205
+
color: #a6e3a1;
206
+
207
+
&:hover {
208
+
filter: brightness(var(--hover-glow));
209
+
}
210
+
}
211
+
212
+
.hl-variant {
213
+
color: #f9e2af;
214
+
215
+
&:hover {
216
+
filter: brightness(var(--hover-glow));
217
+
}
218
+
}
219
+
}
220
+
221
+
/* END OF CODE HIGHLIGHTS */
222
+
}
223
+
}
+2
-2
src/blog.gleam
+2
-2
src/blog.gleam
···
66
66
67
67
let post_header =
68
68
html.header([class("hidden md:block")], [
69
-
html.h1([class("mb-1 text-4xl font-bold")], [html.text(title)]),
69
+
html.h1([], [html.text(title)]),
70
70
html.p([class("my-2")], [html.text(post.meta.description)]),
71
-
html.hr([class("border text-ctp-surface0")]),
71
+
html.hr([]),
72
72
])
73
73
74
74
let back_button_style =
+2
-4
src/blog/page/posts.gleam
+2
-4
src/blog/page/posts.gleam
···
43
43
44
44
html.li([li_styles], [
45
45
html.a([attr.href(post.meta.slug <> ".html")], [
46
-
html.h2([class("text-2xl font-bold text-pretty")], [
47
-
html.text(meta.title),
48
-
]),
46
+
html.h3([], [html.text(meta.title)]),
49
47
]),
50
48
51
49
html.p([class("my-2 text-ctp-text")], [html.text(str_date)]),
52
50
html.ul([class("flex flex-wrap gap-2")], list.map(meta.tags, tag_to_li)),
53
-
html.hr([class("my-4 border border-ctp-surface0")]),
51
+
html.hr([]),
54
52
])
55
53
}
56
54
+4
-6
src/blog/page/recent_posts.gleam
+4
-6
src/blog/page/recent_posts.gleam
···
13
13
|> list.map(post_to_li)
14
14
15
15
let articles_section = html.ul([class("grid grid-cols-1 gap-2")], previews)
16
-
let section_title = html.h3([class("text-lg")], [html.text("Recent posts")])
16
+
let section_title = html.h4([], [html.text("Recent posts")])
17
17
let more_style = class("max-w-min underline text-md underline-offset-2")
18
-
let more = html.a([attr.href("articles.html"), more_style], [html.text("More")])
18
+
let more =
19
+
html.a([attr.href("articles.html"), more_style], [html.text("More")])
19
20
20
21
html.section([class("grid grid-cols-1 gap-2")], [
21
22
section_title,
···
41
42
let style = class("flex flex-col p-4 mx-auto w-full rounded-lg bg-ctp-mantle")
42
43
43
44
html.li([style], [
44
-
html.h3([class("font-bold text-pretty")], [
45
-
html.a([href], [html.text(meta.title)]),
46
-
]),
47
-
45
+
html.h3([], [html.a([href], [html.text(meta.title)])]),
48
46
html.p([], [html.text(str_date)]),
49
47
])
50
48
}