oppi.li
forked from
lesbian.skin/website
not my website
TailwindCSS + Small Screen Support
lesbian.skin
+1
index.html
+1
index.html
+10
-1
src/ffi.mjs
+10
-1
src/ffi.mjs
···
2
2
return window.location.pathname
3
3
}
4
4
5
+
// TODO: Add localStorage as well
5
6
export function prefers_dark_mode() {
6
-
return window.matchMedia('(prefers-color-scheme:dark)').matches
7
+
const matches = window.matchMedia('(prefers-color-scheme:dark)').matches
8
+
if (matches) {
9
+
document.documentElement.classList.add("dark")
10
+
}
11
+
return matches
12
+
}
13
+
14
+
export function switch_theme() {
15
+
document.documentElement.classList.toggle("dark")
7
16
}
+221
-166
src/website.gleam
+221
-166
src/website.gleam
···
2
2
import gleam/string
3
3
import gleam/uri.{type Uri}
4
4
import lustre
5
-
import lustre/attribute
5
+
import lustre/attribute as attr
6
6
import lustre/effect.{type Effect}
7
7
import lustre/element.{type Element}
8
8
import lustre/element/html
···
13
13
import website/common
14
14
import website/posts
15
15
import website/projects
16
-
import website/style
17
16
18
17
// Main
19
18
···
49
48
@external(javascript, "./ffi.mjs", "prefers_dark_mode")
50
49
fn prefers_dark_mode() -> Bool
51
50
51
+
@external(javascript, "./ffi.mjs", "switch_theme")
52
+
fn do_switch_theme() -> Nil
53
+
54
+
fn switch_theme() -> Effect(Msg) {
55
+
effect.from(fn(disp) {
56
+
do_switch_theme()
57
+
DoneChangeDarkMode
58
+
|> disp
59
+
})
60
+
}
61
+
52
62
fn get_route() -> Route {
53
63
case do_get_route() |> string.split("/") {
54
64
["", "projects", id] | ["", "project", id] -> Project(id)
···
86
96
pub opaque type Msg {
87
97
OnRouteChange(Route)
88
98
ChangeDarkMode
99
+
DoneChangeDarkMode
89
100
}
90
101
91
102
fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
···
96
107
)
97
108
ChangeDarkMode -> #(
98
109
Model(..model, dark_mode: !model.dark_mode),
99
-
effect.none(),
110
+
switch_theme(),
100
111
)
112
+
DoneChangeDarkMode -> #(model, effect.none())
101
113
}
102
114
}
103
115
···
112
124
Post(id) -> view_post(model, id)
113
125
}
114
126
115
-
ui.stack([attribute.style(style.page(model.dark_mode))], [
116
-
html.div([attribute.style(style.page_padding)], [view_navbar(model), page]),
117
-
])
127
+
// padding: 3vh;
128
+
ui.stack(
129
+
[
130
+
attr.class(
131
+
"font-inter font-normal not-italic min-h-screen p-5 bg-gray-100 dark:bg-neutral-900",
132
+
),
133
+
],
134
+
[
135
+
html.div(
136
+
[attr.class("mx-0 sm:mx-6 md:mx-10 lg:mx-20 xl:mx-48 2xl:mx-64")],
137
+
[view_navbar(model), page],
138
+
),
139
+
],
140
+
)
118
141
}
119
142
120
143
fn view_navbar(model: Model) -> Element(Msg) {
121
-
let navitem_style = style.navitem(model.dark_mode)
122
-
let navbar_style = style.navbar(model.dark_mode)
123
-
124
144
let view_nav_item = fn(path, text) {
125
-
html.a([attribute.href("/" <> path), attribute.style(navitem_style)], [
126
-
element.text(text),
127
-
])
145
+
html.a(
146
+
[
147
+
attr.href("/" <> path),
148
+
attr.class(
149
+
"drop-shadow-md no-underline bg-gray-300 dark:bg-neutral-900 p-3 rounded-xl text-black dark:text-neutral-200",
150
+
),
151
+
],
152
+
[element.text(text)],
153
+
)
128
154
}
129
155
130
-
html.span(
131
-
[
132
-
attribute.style([
133
-
#("display", "flex"),
134
-
#("gap", "1em"),
135
-
#("width", "100%"),
136
-
]),
137
-
],
138
-
[
139
-
cluster.of(html.nav, [attribute.style(navbar_style)], [
140
-
html.h1([attribute.style([#("margin", "0"), #("color", "#f380b1")])], [
156
+
html.span([attr.class("drop-shadow-md flex gap-4 w-full")], [
157
+
// margin-bottom: 3vh;
158
+
cluster.of(
159
+
html.nav,
160
+
[
161
+
attr.class(
162
+
"flex rounded-xl p-4 items-center gap-4 border-0 grow mb-5 bg-gray-200 dark:bg-neutral-800",
163
+
),
164
+
],
165
+
[
166
+
html.h1([attr.class("hidden md:block text-3xl m-0 text-pink-400")], [
141
167
element.text("naomieow"),
142
168
]),
143
169
view_nav_item("", "Home"),
144
170
view_nav_item("projects", "Projects"),
145
171
view_nav_item("posts", "Posts"),
146
-
]),
147
-
ui.button(
148
-
[
149
-
attribute.style(style.button(model.dark_mode)),
150
-
event.on_click(ChangeDarkMode),
151
-
],
152
-
[
153
-
html.h1([attribute.style([#("margin", "0")])], [
154
-
case model.dark_mode {
155
-
True -> element.text("☀️")
156
-
False -> element.text("🌕")
157
-
},
158
-
]),
159
-
],
160
-
),
161
-
],
162
-
)
172
+
],
173
+
),
174
+
ui.button(
175
+
[
176
+
// width: 6%;
177
+
// margin-bottom: 3vh;
178
+
attr.class(
179
+
"min-w-9 text-3xl border-0 aspect-square items-center mb-5 p-4 rounded-xl bg-gray-200 dark:bg-neutral-800",
180
+
),
181
+
event.on_click(ChangeDarkMode),
182
+
],
183
+
[
184
+
html.h1([attr.class("m-0")], [
185
+
case model.dark_mode {
186
+
True -> element.text("🌕")
187
+
False -> element.text("☀️")
188
+
},
189
+
]),
190
+
],
191
+
),
192
+
])
163
193
}
164
194
165
-
fn view_home(model: Model) -> Element(Msg) {
166
-
let home_style = style.home(model.dark_mode)
167
-
168
-
html.div([attribute.style(home_style)], [
169
-
html.p([], [
170
-
element.text(
171
-
"Hi! I'm Naomi (or Mia), a trans girl from the UK who loves to code! I mostly make Minecraft mods, but have started
195
+
fn view_home(_model: Model) -> Element(Msg) {
196
+
html.div(
197
+
[
198
+
attr.class(
199
+
"drop-shadow-md text-xl p-4 mb-4 rounded-xl bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
200
+
),
201
+
],
202
+
[
203
+
html.p([attr.class("mb-4")], [
204
+
element.text(
205
+
"Hi! I'm Naomi (or Mia), a trans girl from the UK who loves to code! I mostly make Minecraft mods, but have started
172
206
to begin other projects like ",
173
-
),
174
-
common.link("Sheetr", "https://sheetr.app/"),
175
-
element.text(" and "),
176
-
common.link("Lilypad", "https://codeberg.org/naomi/lilypad"),
177
-
element.text(
178
-
". Both projects are in their infancy, but I hope that they can both become useful to someone
207
+
),
208
+
common.link("Sheetr", "https://sheetr.app/"),
209
+
element.text(" and "),
210
+
common.link("Lilypad", "https://codeberg.org/naomi/lilypad"),
211
+
element.text(
212
+
". Both projects are in their infancy, but I hope that they can both become useful to someone
179
213
out there!",
180
-
),
181
-
]),
182
-
html.p([], [
183
-
element.text(
184
-
"I absolutely love learning new languages, so here is what I know:",
185
-
),
186
-
cluster.of(
187
-
html.div,
188
-
[attribute.style([#("display", "flex"), #("gap", "5em")])],
189
-
[
190
-
ui.stack([], [
191
-
html.h3([], [element.text("Proficient")]),
192
-
html.ul([], [
193
-
html.li([], [element.text("⭐ Gleam")]),
194
-
html.li([], [element.text("☕ Java")]),
195
-
html.li([], [element.text("📜 JavaScript")]),
196
-
html.li([], [element.text("🐍 Python")]),
197
-
html.li([], [element.text("❓mcfunction")]),
214
+
),
215
+
]),
216
+
html.p([], [
217
+
element.text(
218
+
"I absolutely love learning new languages, so here is what I know:",
219
+
),
220
+
cluster.of(
221
+
html.div,
222
+
[attr.class("gap-4 sm:gap-20 flex flex-col sm:flex-row")],
223
+
[
224
+
ui.stack([], [
225
+
html.h3([attr.class("text-2xl underline")], [
226
+
element.text("Proficient"),
227
+
]),
228
+
html.ul([attr.class("list-disc pl-8")], [
229
+
html.li([], [element.text("⭐ Gleam")]),
230
+
html.li([], [element.text("☕ Java")]),
231
+
html.li([], [element.text("📜 JavaScript")]),
232
+
html.li([], [element.text("🐍 Python")]),
233
+
html.li([], [element.text("❓mcfunction")]),
234
+
]),
198
235
]),
199
-
]),
200
-
ui.stack([], [
201
-
html.h3([], [element.text("Learning")]),
202
-
html.ul([], [
203
-
html.li([], [element.text("🦀 Rust")]),
204
-
html.li([], [element.text("🟦 Go")]),
205
-
html.li([], [element.text("🎮 C#")]),
206
-
html.li([], [element.text("💀 C++")]),
236
+
ui.stack([], [
237
+
html.h3([attr.class("text-2xl underline")], [
238
+
element.text("Learning"),
239
+
]),
240
+
html.ul([attr.class("list-disc pl-8")], [
241
+
html.li([], [element.text("🦀 Rust")]),
242
+
html.li([], [element.text("🟦 Go")]),
243
+
html.li([], [element.text("🎮 C#")]),
244
+
html.li([], [element.text("💀 C++")]),
245
+
]),
207
246
]),
208
-
]),
209
-
ui.stack([], [
210
-
html.h3([], [element.text("Want to learn")]),
211
-
html.ul([], [
212
-
html.li([], [element.text("⚡ Zig")]),
213
-
html.li([], [element.text("♻️ Kotlin")]),
247
+
ui.stack([], [
248
+
html.h3([attr.class("text-2xl underline")], [
249
+
element.text("Want to learn"),
250
+
]),
251
+
html.ul([attr.class("list-disc pl-8")], [
252
+
html.li([], [element.text("⚡ Zig")]),
253
+
html.li([], [element.text("♻️ Kotlin")]),
254
+
]),
214
255
]),
215
-
]),
216
-
],
217
-
),
218
-
]),
219
-
// html.p([], [
220
-
// element.text("As of this coming September, I will be studying a BSc in Computer Games Programming @ "),
221
-
// common.link("Staffs", "https://staffs.ac.uk/")
222
-
// ])
223
-
])
256
+
],
257
+
),
258
+
]),
259
+
// html.p([], [
260
+
// element.text("As of this coming September, I will be studying a BSc in Computer Games Programming @ "),
261
+
// common.link("Staffs", "https://staffs.ac.uk/")
262
+
// ])
263
+
],
264
+
)
224
265
}
225
266
226
267
fn view_projects(model: Model) -> Element(Msg) {
227
-
let project_style = style.project(model.dark_mode)
228
268
let projects =
229
269
model.projects
230
270
|> list.map(fn(project: projects.Project(Msg)) {
231
271
ui.stack(
232
-
[attribute.id("project-" <> project.id), attribute.style(project_style)],
233
272
[
234
-
cluster.of(html.div, [attribute.style(style.project_bar)], [
235
-
html.img([attribute.src(project.img), attribute.style(style.icon)]),
236
-
html.h1([], [common.link(project.title, "projects/" <> project.id)]),
273
+
attr.id("project-" <> project.id),
274
+
attr.class(
275
+
"drop-shadow-md text-xl rounded-xl p-4 mb-4 bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
276
+
),
277
+
],
278
+
[
279
+
cluster.of(html.div, [attr.class("flex items-center gap-4 pb-1.5")], [
280
+
html.img([
281
+
attr.src(project.img),
282
+
attr.class("rounded-xl max-w-16 max-h-16"),
283
+
]),
284
+
html.h1([attr.class("text-2xl")], [
285
+
common.link(project.title, "projects/" <> project.id),
286
+
]),
237
287
cluster.of(
238
288
html.div,
239
-
[attribute.style(style.project_bar)],
289
+
[attr.class("flex items-center gap-2")],
240
290
project.links
241
291
|> list.map(fn(link) {
242
-
html.a([attribute.href(link.url), attribute.alt(link.title)], [
292
+
html.a([attr.href(link.url), attr.alt(link.title)], [
243
293
html.img([
244
-
attribute.src(link.img),
245
-
attribute.style(style.icon),
294
+
attr.src(link.img),
295
+
attr.class("rounded-xl max-w-14 max-h-14"),
246
296
]),
247
297
])
248
298
}),
···
256
306
}
257
307
258
308
fn view_project(model: Model, id: String) -> Element(Msg) {
259
-
let project_style = style.project(model.dark_mode)
260
309
let project =
261
310
model.projects
262
311
|> list.find(fn(project) { project.id == id })
263
-
html.div([attribute.style(project_style)], case project {
264
-
Ok(project) -> [
265
-
cluster.of(html.div, [attribute.style(style.project_bar)], [
266
-
html.img([attribute.src(project.img), attribute.style(style.icon)]),
267
-
html.h1([], [element.text(project.title)]),
268
-
]),
269
-
html.p([], [project.summary]),
270
-
html.h2([], [element.text("More information will be added eventually..")]),
271
-
]
272
-
Error(_) -> [
273
-
html.h1([attribute.style([#("text-align", "center")])], [
274
-
element.text("Invalid project!"),
275
-
]),
276
-
]
277
-
})
312
+
html.div(
313
+
[
314
+
attr.class(
315
+
"drop-shadow-md text-xl rounded-xl p-4 mb-4 bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
316
+
),
317
+
],
318
+
case project {
319
+
Ok(project) -> [
320
+
cluster.of(html.div, [attr.class("flex items-center gap-4 pb-1.5")], [
321
+
html.img([
322
+
attr.src(project.img),
323
+
attr.class("rounded-xl max-w-16 max-h-16"),
324
+
]),
325
+
html.h1([attr.class("text-2xl")], [element.text(project.title)]),
326
+
]),
327
+
html.p([], [project.summary]),
328
+
html.h2([], [
329
+
element.text("More information will be added eventually.."),
330
+
]),
331
+
]
332
+
Error(_) -> [
333
+
html.h1([attr.class("text-center")], [element.text("Invalid project!")]),
334
+
]
335
+
},
336
+
)
278
337
}
279
338
280
339
fn view_posts(model: Model) -> Element(Msg) {
281
-
let post_style = style.post(model.dark_mode)
282
-
283
340
let posts =
284
341
model.posts
285
342
|> list.map(fn(post: posts.Post(Msg)) {
286
-
ui.stack([attribute.style(post_style)], [
287
-
cluster.of(
288
-
html.div,
289
-
[
290
-
attribute.style([
291
-
#("display", "flex"),
292
-
#("align-items", "center"),
293
-
#("gap", "1em"),
343
+
ui.stack(
344
+
[
345
+
attr.class(
346
+
"drop-shadow-md text-xl rounded-xl p-4 mb-4 bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
347
+
),
348
+
],
349
+
[
350
+
cluster.of(html.div, [attr.class("flex items-center gap-4")], [
351
+
html.h1([attr.class("text-2xl")], [
352
+
common.link(post.title, "posts/" <> post.id),
294
353
]),
295
-
],
296
-
[
297
-
html.h1([], [common.link(post.title, "posts/" <> post.id)]),
298
-
html.p([attribute.style([#("color", "gray")])], [
354
+
html.p([attr.class("text-neutral-500")], [
299
355
element.text("Author: " <> post.author),
300
356
]),
301
-
html.p([attribute.style([#("color", "gray")])], [
357
+
html.p([attr.class("text-neutral-500")], [
302
358
element.text(
303
359
"Date Posted: " <> post.date_posted |> common.day_to_string,
304
360
),
305
361
]),
306
-
],
307
-
),
308
-
html.p([], [post.summary]),
309
-
])
362
+
]),
363
+
html.p([], [post.summary]),
364
+
],
365
+
)
310
366
})
311
-
html.div([], posts)
367
+
html.div([], [
368
+
common.warning(
369
+
"Quick Apology!",
370
+
"Due to not having a proper markdown renderer implmented, the posts currently look a bit awful as I'm too lazy to style them manually. Sorry if this makes it harder to read!",
371
+
),
372
+
..posts
373
+
])
312
374
}
313
375
314
376
fn view_post(model: Model, id: String) -> Element(Msg) {
315
-
let post_style = style.post(model.dark_mode)
316
-
317
377
let post =
318
378
model.posts
319
379
|> list.find(fn(post) { post.id == id })
320
-
html.div([attribute.style(post_style)], case post {
321
-
Ok(post) -> [
322
-
cluster.of(
323
-
html.div,
324
-
[
325
-
attribute.style([
326
-
#("display", "flex"),
327
-
#("align-items", "center"),
328
-
#("gap", "1em"),
329
-
]),
330
-
],
331
-
[
380
+
html.div(
381
+
[
382
+
attr.class(
383
+
"drop-shadow-md text-xl rounded-xl p-4 mb-4 bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200",
384
+
),
385
+
],
386
+
case post {
387
+
Ok(post) -> [
388
+
cluster.of(html.div, [attr.class("flex items-center gap-4")], [
332
389
html.h1([], [element.text(post.title)]),
333
-
html.p([attribute.style([#("color", "gray")])], [
390
+
html.p([attr.class("text-neutral-500")], [
334
391
element.text("Author: " <> post.author),
335
392
]),
336
-
html.p([attribute.style([#("color", "gray")])], [
393
+
html.p([attr.class("text-neutral-500")], [
337
394
element.text(
338
395
"Date Posted: " <> post.date_posted |> common.day_to_string,
339
396
),
340
397
]),
341
-
],
342
-
),
343
-
html.hr([]),
344
-
html.div([], [post.content]),
345
-
]
346
-
Error(_) -> [
347
-
html.h1([attribute.style([#("text-align", "center")])], [
348
-
element.text("Invalid post!"),
349
-
]),
350
-
]
351
-
})
398
+
]),
399
+
html.hr([]),
400
+
html.div([], [post.content]),
401
+
]
402
+
Error(_) -> [
403
+
html.h1([attr.class("text-center")], [element.text("Invalid post!")]),
404
+
]
405
+
},
406
+
)
352
407
}
+24
-1
src/website/common.gleam
+24
-1
src/website/common.gleam
···
5
5
import lustre/element/html
6
6
7
7
pub fn link(text: String, link: String) -> element.Element(a) {
8
-
html.a([attr.href(link), attr.style([#("color", "#f380b1")])], [
8
+
html.a([attr.href(link), attr.class("text-pink-400 underline")], [
9
9
element.text(text),
10
10
])
11
+
}
12
+
13
+
pub fn warning(title: String, contents: String) -> element.Element(a) {
14
+
html.div(
15
+
[
16
+
attr.class(
17
+
"bg-red-300 dark:bg-red-700 rounded-xl border-2 border-red-950 mb-4",
18
+
),
19
+
],
20
+
[
21
+
html.h3(
22
+
[
23
+
attr.class(
24
+
"bg-red-400 dark:bg-red-800 rounded-t-xl text-2xl underline p-1 dark:text-neutral-200 border-b-2 border-red-950 ",
25
+
),
26
+
],
27
+
[element.text(title)],
28
+
),
29
+
html.p([attr.class("text-xl p-1 dark:text-neutral-100")], [
30
+
element.text(contents),
31
+
]),
32
+
],
33
+
)
11
34
}
12
35
13
36
pub fn day_to_string(day: Day) -> String {
-169
src/website/style.gleam
-169
src/website/style.gleam
···
1
-
pub const page_padding: List(#(String, String)) = [
2
-
#("margin-left", "25vh"), #("margin-right", "25vh"),
3
-
]
4
-
5
-
pub fn page(dark_mode: Bool) -> List(#(String, String)) {
6
-
case dark_mode {
7
-
True -> [
8
-
#("font-family", "\"Inter\", sans-serif"),
9
-
#("font-weight", "400"),
10
-
#("font-style", "normal"),
11
-
#("min-height", "100vh"),
12
-
#("background-color", "#151515"),
13
-
#("padding", "3vh"),
14
-
]
15
-
False -> [
16
-
#("font-family", "\"Inter\", sans-serif"),
17
-
#("font-weight", "400"),
18
-
#("font-style", "normal"),
19
-
#("min-height", "100vh"),
20
-
#("padding", "3vh"),
21
-
]
22
-
}
23
-
}
24
-
25
-
pub fn navbar(dark_mode: Bool) -> List(#(String, String)) {
26
-
case dark_mode {
27
-
True -> [
28
-
#("display", "flex"),
29
-
#("background-color", "#1e1e1e"),
30
-
#("border-radius", "1em"),
31
-
#("padding", "1em"),
32
-
#("margin-bottom", "3vh"),
33
-
#("justify-conten", "center"),
34
-
#("align-items", "center"),
35
-
#("gap", "1em"),
36
-
#("border", "0"),
37
-
#("flex-grow", "1"),
38
-
]
39
-
False -> [
40
-
#("display", "flex"),
41
-
#("background-color", "#cae4e7"),
42
-
#("border-radius", "1em"),
43
-
#("padding", "1em"),
44
-
#("margin-bottom", "3vh"),
45
-
#("justify-conten", "center"),
46
-
#("align-items", "center"),
47
-
#("gap", "1em"),
48
-
#("border", "0"),
49
-
#("flex-grow", "1"),
50
-
]
51
-
}
52
-
}
53
-
54
-
pub fn button(dark_mode: Bool) -> List(#(String, String)) {
55
-
case dark_mode {
56
-
True -> [
57
-
#("background-color", "#1e1e1e"),
58
-
#("border-radius", "1em"),
59
-
#("padding", "1em"),
60
-
#("margin-bottom", "3vh"),
61
-
#("justify-conten", "center"),
62
-
#("align-items", "center"),
63
-
#("aspect-ratio", "1 / 1"),
64
-
#("border", "0"),
65
-
#("width", "6%"),
66
-
]
67
-
False -> [
68
-
#("background-color", "#cae4e7"),
69
-
#("border-radius", "1em"),
70
-
#("padding", "1em"),
71
-
#("margin-bottom", "3vh"),
72
-
#("justify-conten", "center"),
73
-
#("align-items", "center"),
74
-
#("aspect-ratio", "1 / 1"),
75
-
#("border", "0"),
76
-
#("width", "6%"),
77
-
]
78
-
}
79
-
}
80
-
81
-
pub fn navitem(dark_mode: Bool) -> List(#(String, String)) {
82
-
case dark_mode {
83
-
True -> [
84
-
#("text-decoration", "none"),
85
-
#("background-color", "#151515"),
86
-
#("padding", "0.75em"),
87
-
#("border-radius", "1em"),
88
-
#("color", "#dcdcdc"),
89
-
]
90
-
False -> [
91
-
#("text-decoration", "none"),
92
-
#("background-color", "#b8cfd2"),
93
-
#("padding", "0.75em"),
94
-
#("border-radius", "1em"),
95
-
#("color", "black"),
96
-
]
97
-
}
98
-
}
99
-
100
-
pub fn home(dark_mode: Bool) -> List(#(String, String)) {
101
-
case dark_mode {
102
-
True -> [
103
-
#("background-color", "#1e1e1e"),
104
-
#("border-radius", "1em"),
105
-
#("padding", "1em"),
106
-
#("margin-bottom", "1em"),
107
-
#("font-size", "1.25em"),
108
-
#("color", "#dcdcdc"),
109
-
]
110
-
False -> [
111
-
#("background-color", "#cae4e7"),
112
-
#("border-radius", "1em"),
113
-
#("padding", "1em"),
114
-
#("margin-bottom", "1em"),
115
-
#("font-size", "1.25em"),
116
-
]
117
-
}
118
-
}
119
-
120
-
pub const icon: List(#(String, String)) = [
121
-
#("max-width", "4em"), #("max-height", "4em"), #("border-radius", "1em"),
122
-
]
123
-
124
-
pub fn project(dark_mode: Bool) -> List(#(String, String)) {
125
-
case dark_mode {
126
-
True -> [
127
-
#("background-color", "#1e1e1e"),
128
-
#("border-radius", "1em"),
129
-
#("padding", "1em"),
130
-
#("margin-bottom", "1em"),
131
-
#("color", "#dcdcdc"),
132
-
]
133
-
False -> [
134
-
#("background-color", "#cae4e7"),
135
-
#("border-radius", "1em"),
136
-
#("padding", "1em"),
137
-
#("margin-bottom", "1em"),
138
-
]
139
-
}
140
-
}
141
-
142
-
pub const project_bar: List(#(String, String)) = [
143
-
#("display", "flex"), #("align-items", "center"), #("gap", "1em"),
144
-
]
145
-
146
-
pub fn post(dark_mode: Bool) -> List(#(String, String)) {
147
-
case dark_mode {
148
-
True -> [
149
-
#("background-color", "#1e1e1e"),
150
-
#("border-radius", "1em"),
151
-
#("padding", "1em"),
152
-
#("margin-bottom", "1em"),
153
-
#("color", "#dcdcdc"),
154
-
]
155
-
False -> [
156
-
#("background-color", "#cae4e7"),
157
-
#("border-radius", "1em"),
158
-
#("padding", "1em"),
159
-
#("margin-bottom", "1em"),
160
-
]
161
-
}
162
-
}
163
-
164
-
pub fn link(dark_mode: Bool) -> List(#(String, String)) {
165
-
case dark_mode {
166
-
True -> [#("text-decoration", "underline"), #("color", "#dcdcdc")]
167
-
False -> [#("text-decoration", "underline"), #("color", "black")]
168
-
}
169
-
}