oppi.li
lesbian.skin
+1
index.html
+1
index.html
+10
-1
src/ffi.mjs
+10
-1
src/ffi.mjs
···
2
return window.location.pathname
3
}
4
5
+
// TODO: Add localStorage as well
6
export function prefers_dark_mode() {
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")
16
}
+221
-166
src/website.gleam
+221
-166
src/website.gleam
···
2
import gleam/string
3
import gleam/uri.{type Uri}
4
import lustre
5
-
import lustre/attribute
6
import lustre/effect.{type Effect}
7
import lustre/element.{type Element}
8
import lustre/element/html
···
13
import website/common
14
import website/posts
15
import website/projects
16
-
import website/style
17
18
// Main
19
···
49
@external(javascript, "./ffi.mjs", "prefers_dark_mode")
50
fn prefers_dark_mode() -> Bool
51
52
fn get_route() -> Route {
53
case do_get_route() |> string.split("/") {
54
["", "projects", id] | ["", "project", id] -> Project(id)
···
86
pub opaque type Msg {
87
OnRouteChange(Route)
88
ChangeDarkMode
89
}
90
91
fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
···
96
)
97
ChangeDarkMode -> #(
98
Model(..model, dark_mode: !model.dark_mode),
99
-
effect.none(),
100
)
101
}
102
}
103
···
112
Post(id) -> view_post(model, id)
113
}
114
115
-
ui.stack([attribute.style(style.page(model.dark_mode))], [
116
-
html.div([attribute.style(style.page_padding)], [view_navbar(model), page]),
117
-
])
118
}
119
120
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
let view_nav_item = fn(path, text) {
125
-
html.a([attribute.href("/" <> path), attribute.style(navitem_style)], [
126
-
element.text(text),
127
-
])
128
}
129
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")])], [
141
element.text("naomieow"),
142
]),
143
view_nav_item("", "Home"),
144
view_nav_item("projects", "Projects"),
145
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
-
)
163
}
164
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
172
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
179
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")]),
198
]),
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++")]),
207
]),
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")]),
214
]),
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
-
])
224
}
225
226
fn view_projects(model: Model) -> Element(Msg) {
227
-
let project_style = style.project(model.dark_mode)
228
let projects =
229
model.projects
230
|> list.map(fn(project: projects.Project(Msg)) {
231
ui.stack(
232
-
[attribute.id("project-" <> project.id), attribute.style(project_style)],
233
[
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)]),
237
cluster.of(
238
html.div,
239
-
[attribute.style(style.project_bar)],
240
project.links
241
|> list.map(fn(link) {
242
-
html.a([attribute.href(link.url), attribute.alt(link.title)], [
243
html.img([
244
-
attribute.src(link.img),
245
-
attribute.style(style.icon),
246
]),
247
])
248
}),
···
256
}
257
258
fn view_project(model: Model, id: String) -> Element(Msg) {
259
-
let project_style = style.project(model.dark_mode)
260
let project =
261
model.projects
262
|> 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
-
})
278
}
279
280
fn view_posts(model: Model) -> Element(Msg) {
281
-
let post_style = style.post(model.dark_mode)
282
-
283
let posts =
284
model.posts
285
|> 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"),
294
]),
295
-
],
296
-
[
297
-
html.h1([], [common.link(post.title, "posts/" <> post.id)]),
298
-
html.p([attribute.style([#("color", "gray")])], [
299
element.text("Author: " <> post.author),
300
]),
301
-
html.p([attribute.style([#("color", "gray")])], [
302
element.text(
303
"Date Posted: " <> post.date_posted |> common.day_to_string,
304
),
305
]),
306
-
],
307
-
),
308
-
html.p([], [post.summary]),
309
-
])
310
})
311
-
html.div([], posts)
312
}
313
314
fn view_post(model: Model, id: String) -> Element(Msg) {
315
-
let post_style = style.post(model.dark_mode)
316
-
317
let post =
318
model.posts
319
|> 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
-
[
332
html.h1([], [element.text(post.title)]),
333
-
html.p([attribute.style([#("color", "gray")])], [
334
element.text("Author: " <> post.author),
335
]),
336
-
html.p([attribute.style([#("color", "gray")])], [
337
element.text(
338
"Date Posted: " <> post.date_posted |> common.day_to_string,
339
),
340
]),
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
-
})
352
}
···
2
import gleam/string
3
import gleam/uri.{type Uri}
4
import lustre
5
+
import lustre/attribute as attr
6
import lustre/effect.{type Effect}
7
import lustre/element.{type Element}
8
import lustre/element/html
···
13
import website/common
14
import website/posts
15
import website/projects
16
17
// Main
18
···
48
@external(javascript, "./ffi.mjs", "prefers_dark_mode")
49
fn prefers_dark_mode() -> Bool
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
+
62
fn get_route() -> Route {
63
case do_get_route() |> string.split("/") {
64
["", "projects", id] | ["", "project", id] -> Project(id)
···
96
pub opaque type Msg {
97
OnRouteChange(Route)
98
ChangeDarkMode
99
+
DoneChangeDarkMode
100
}
101
102
fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
···
107
)
108
ChangeDarkMode -> #(
109
Model(..model, dark_mode: !model.dark_mode),
110
+
switch_theme(),
111
)
112
+
DoneChangeDarkMode -> #(model, effect.none())
113
}
114
}
115
···
124
Post(id) -> view_post(model, id)
125
}
126
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
+
)
141
}
142
143
fn view_navbar(model: Model) -> Element(Msg) {
144
let view_nav_item = fn(path, text) {
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
+
)
154
}
155
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")], [
167
element.text("naomieow"),
168
]),
169
view_nav_item("", "Home"),
170
view_nav_item("projects", "Projects"),
171
view_nav_item("posts", "Posts"),
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
+
])
193
}
194
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
206
to begin other projects like ",
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
213
out there!",
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
+
]),
235
]),
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
+
]),
246
]),
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
+
]),
255
]),
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
+
)
265
}
266
267
fn view_projects(model: Model) -> Element(Msg) {
268
let projects =
269
model.projects
270
|> list.map(fn(project: projects.Project(Msg)) {
271
ui.stack(
272
[
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
+
]),
287
cluster.of(
288
html.div,
289
+
[attr.class("flex items-center gap-2")],
290
project.links
291
|> list.map(fn(link) {
292
+
html.a([attr.href(link.url), attr.alt(link.title)], [
293
html.img([
294
+
attr.src(link.img),
295
+
attr.class("rounded-xl max-w-14 max-h-14"),
296
]),
297
])
298
}),
···
306
}
307
308
fn view_project(model: Model, id: String) -> Element(Msg) {
309
let project =
310
model.projects
311
|> list.find(fn(project) { project.id == id })
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
+
)
337
}
338
339
fn view_posts(model: Model) -> Element(Msg) {
340
let posts =
341
model.posts
342
|> list.map(fn(post: posts.Post(Msg)) {
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),
353
]),
354
+
html.p([attr.class("text-neutral-500")], [
355
element.text("Author: " <> post.author),
356
]),
357
+
html.p([attr.class("text-neutral-500")], [
358
element.text(
359
"Date Posted: " <> post.date_posted |> common.day_to_string,
360
),
361
]),
362
+
]),
363
+
html.p([], [post.summary]),
364
+
],
365
+
)
366
})
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
+
])
374
}
375
376
fn view_post(model: Model, id: String) -> Element(Msg) {
377
let post =
378
model.posts
379
|> list.find(fn(post) { post.id == id })
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")], [
389
html.h1([], [element.text(post.title)]),
390
+
html.p([attr.class("text-neutral-500")], [
391
element.text("Author: " <> post.author),
392
]),
393
+
html.p([attr.class("text-neutral-500")], [
394
element.text(
395
"Date Posted: " <> post.date_posted |> common.day_to_string,
396
),
397
]),
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
+
)
407
}
+24
-1
src/website/common.gleam
+24
-1
src/website/common.gleam
···
5
import lustre/element/html
6
7
pub fn link(text: String, link: String) -> element.Element(a) {
8
+
html.a([attr.href(link), attr.class("text-pink-400 underline")], [
9
element.text(text),
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
+
)
34
}
35
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
-
}
···