My personal website, in gleam+lustre!
Working on the way things look
Signed-off-by: MLC Bloeiman <mar@strawmelonjuice.com>
+63
-21
+11
-7
site.css
+11
-7
site.css
···
12
12
--color-base-200: oklch(93% 0.032 17.717);
13
13
--color-base-300: oklch(92% 0.12 95.746);
14
14
--color-base-content: oklch(25% 0.09 281.288);
15
-
--color-primary: #edbcbc;
15
+
--color-primary: #FDEBEF;
16
16
--color-primary-content: oklch(44% 0.043 257.281);
17
17
--color-secondary: #ceddd9;
18
18
--color-secondary-content: oklch(29% 0.066 243.157);
···
70
70
}
71
71
72
72
.postfield {
73
-
font-family:
74
-
"OpenDyslectic 3",
75
-
"Lilex",
76
-
sans-serif;
77
-
font-weight: 100;
78
-
font-size: var(--font-size);
79
73
--font-size: 15px;
80
74
--line-height: 1.0;
75
+
76
+
p {
77
+
font-family:
78
+
"OpenDyslectic 3",
79
+
"Lilex",
80
+
sans-serif;
81
+
font-weight: 100;
82
+
font-size: var(--font-size);
83
+
84
+
}
81
85
}
82
86
83
87
/* .subpage {} */
+4
-5
src/homepage.gleam
+4
-5
src/homepage.gleam
···
488
488
// Links on my php
489
489
const personal_start_page_links: List(#(String, String)) = [
490
490
#("🔍 DuckDuckGo NoAI", "https://noai.duckduckgo.com/"),
491
-
#("🦄 Fontys Portal", "https://portal.fontysict.nl/SitePages/Home.aspx"),
491
+
#("🧹 Witchsky", "https://witchsky.app/"),
492
+
#("🤓 Fontys Portal", "https://connect.fontys.nl/"),
492
493
#("🖼️ StrawmediaJuice", "https://media.strawmelonjuice.com/"),
493
494
#(
494
495
"❄️ NixPkgs Search",
···
1956
1957
1957
1958
fn view_post_preview(post: NormalizedPost) -> Element(Msg) {
1958
1959
html.article([attribute.class("my-4 bg-secondary rounded-md p-4")], [
1959
-
html.h4([attribute.class("text-lg text-accent font-light")], [
1960
-
html.a([attribute.class("hover:underline"), href(PostById(post.id))], [
1961
-
html.text(post.title),
1962
-
]),
1960
+
html.a([attribute.class("hover:underline"), href(PostById(post.id))], [
1961
+
prestyled_elements.h4(post.title),
1963
1962
]),
1964
1963
html.br([]),
1965
1964
html.p(
+18
-4
src/homepage/djotparse.gleam
+18
-4
src/homepage/djotparse.gleam
···
5
5
import gleam/list
6
6
import gleam/option.{type Option, None, Some}
7
7
import gleam/string
8
+
import homepage/stuff/prestyled_elements
8
9
import jot
10
+
import lustre/element
9
11
import smalto
10
12
import smalto/grammar.{type Grammar}
11
13
import smalto/languages/csharp
···
15
17
import smalto/languages/rust
16
18
17
19
pub fn djot_to_html(djot djot: String) -> String {
20
+
let #(h1, h2, h3, h4) = {
21
+
#(
22
+
// H1 > H3
23
+
prestyled_elements.h3("") |> element.to_string() |> string.drop_end(6),
24
+
// H2 > H4
25
+
prestyled_elements.h4("") |> element.to_string() |> string.drop_end(6),
26
+
// H3 > H5
27
+
prestyled_elements.h5("") |> element.to_string() |> string.drop_end(6),
28
+
// H5 > H6
29
+
prestyled_elements.h6("") |> element.to_string() |> string.drop_end(6),
30
+
)
31
+
}
18
32
djot
19
33
|> preprocess_codeblocks
20
34
|> preprocess_tables
21
35
|> jot.to_html
22
36
|> string.replace("<p>", "<p class=\"mt-4\">")
23
37
|> string.replace("<li", "<li class=\"mt-2\"")
24
-
|> string.replace("<h4", "<h5 class=\"text-lg text-accent font-light mt-8\"")
25
-
|> string.replace("<h3", "<h4 class=\"text-xl font-light mt-10\"")
26
-
|> string.replace("<h2", "<h3 class=\"text-2xl font-light mt-12\"")
27
-
|> string.replace("<h1", "<h2 class=\"text-3xl font-light mt-14\"")
38
+
|> string.replace("<h4", h4)
39
+
|> string.replace("<h3", h3)
40
+
|> string.replace("<h2", h2)
41
+
|> string.replace("<h1", h1)
28
42
|> string.replace("<a ", "<a class=\"link link-accent\" ")
29
43
|> string.replace("<strong", "<strong class=\"font-bold\"")
30
44
|> string.replace("<em", "<em class=\"italic\"")
+30
-5
src/homepage/stuff/prestyled_elements.gleam
+30
-5
src/homepage/stuff/prestyled_elements.gleam
···
7
7
8
8
// Reusable non-component components ========================================================================
9
9
10
+
pub const h2 = title
11
+
10
12
pub fn title(title: String) -> Element(Msg) {
11
-
html.h2([attribute.class("text-3xl text-accent-content font-light")], [
13
+
html.h2([attribute.class("text-3xl text-rose-800 font-light")], [
12
14
html.text(title),
13
15
])
14
16
}
15
17
18
+
pub const h3 = subtitle
19
+
16
20
pub fn subtitle(subtitle: String) -> Element(Msg) {
17
-
html.h3([attribute.class("text-xl text-accent font-light")], [
21
+
html.h3([attribute.class("text-2xl text-accent-content font-light")], [
18
22
html.text(subtitle),
19
23
])
20
24
}
21
25
26
+
pub const h4 = subsubtitle
27
+
22
28
pub fn subsubtitle(subsubtitle: String) -> Element(Msg) {
23
-
html.h4([attribute.class("text-lg mt-5 mb-3 text-accent font-light")], [
29
+
html.h4([attribute.class("text-xl mt-5 mb-3 text-teal-800 font-light")], [
30
+
html.text(subsubtitle),
31
+
])
32
+
}
33
+
34
+
pub const h5 = subsubsubtitle
35
+
36
+
pub fn subsubsubtitle(subsubtitle: String) -> Element(Msg) {
37
+
html.h5([attribute.class("text-lg mt-5 mb-3 text-rose-800 font-light")], [
24
38
html.text(subsubtitle),
25
39
])
40
+
}
41
+
42
+
pub const h6 = subsubsubsubtitle
43
+
44
+
pub fn subsubsubsubtitle(subsubtitle: String) -> Element(Msg) {
45
+
html.h5(
46
+
[attribute.class("text-md mt-5 mb-3 text-rose-800 italic font-bold")],
47
+
[
48
+
html.text(subsubtitle),
49
+
],
50
+
)
26
51
}
27
52
28
53
pub fn leading(text: String) -> Element(Msg) {
···
41
66
html.a(
42
67
[
43
68
href(target),
44
-
attribute.class("link link-accent"),
69
+
attribute.class("link text-violet-700"),
45
70
],
46
71
[html.text(title)],
47
72
)
···
318
343
[
319
344
attribute.target("_blank"),
320
345
attribute.href(
321
-
"https://witchsky.app/profile/did:plc:jgtfsmv25thfs4zmydtbccnn",
346
+
"https://bsky.app/profile/did:plc:jgtfsmv25thfs4zmydtbccnn",
322
347
),
323
348
attribute.class("cursor-pointer w-[26px] h-[26px] hover:text-[#006aff]"),
324
349
attribute.classes([#("hidden md:block", small)]),