my page
ollie.earth
wrap everything in a container with a max width and scale up everything a bit
+176
-158
+149
-137
src/page.gleam
+149
-137
src/page.gleam
···
76
76
|> theme.set(theme.Primary, "light-dark(#9ceca6, #fafafa)")
77
77
|> theme.set(theme.PrimaryForeground, "light-dark(#624226, #18181b)")
78
78
|> theme.set(theme.Muted, "light-dark(#f9f6f1, #27272a)")
79
-
|> theme.set(theme.MutedForeground, "light-dark(#ffc8e8, #a1a1aa)"),
79
+
|> theme.set(theme.MutedForeground, "light-dark(#ffc8e8, #a1a1aa)")
80
+
|> theme.set(theme.FontSans, "Papernotes")
81
+
|> theme.set(theme.FontMono, "Papernotes"),
80
82
),
81
83
html.link([
82
84
attribute.rel("stylesheet"),
···
84
86
]),
85
87
]),
86
88
html.body([], [
87
-
html.nav([attribute.attribute("data-topnav", "")], [
88
-
html.div([attribute.class("hstack")], [
89
-
html.div([attribute.class("hstack")], [
90
-
link_icon(
91
-
to: "ollie.earth",
92
-
at: "https://ollie.earth",
93
-
with_image: "/media/small_snoot_round.png",
94
-
size: Small,
95
-
scaling: None,
96
-
),
97
-
html.div([attribute.style("font-size", "var(--text-2)")], [
98
-
element.text("ollie.earth"),
89
+
html.div(
90
+
[attribute.class("container"), attribute.style("max-width", "850px")],
91
+
[
92
+
html.nav([attribute.attribute("data-topnav", "")], [
93
+
html.div([attribute.class("hstack")], [
94
+
html.div([attribute.class("hstack")], [
95
+
link_icon(
96
+
to: "ollie.earth",
97
+
at: "https://ollie.earth",
98
+
with_image: "/media/small_snoot_round.png",
99
+
size: Small,
100
+
scaling: None,
101
+
),
102
+
html.div([attribute.style("font-size", "var(--text-2)")], [
103
+
element.text("ollie.earth"),
104
+
]),
105
+
]),
106
+
html.div(
107
+
[
108
+
attribute.class("hstack hide-s"),
109
+
],
110
+
[
111
+
html.a([attribute.href("https://en.pronouns.page/@liiv")], [
112
+
badge.badge([], [element.text("pronouns")]),
113
+
]),
114
+
html.a([attribute.href("https://www.last.fm/user/nnuuvv")], [
115
+
badge.badge([], [element.text("lastfm")]),
116
+
]),
117
+
],
118
+
),
119
+
// socials(Some("hide-md"), Size(26, 26)),
99
120
]),
100
121
]),
101
-
html.div(
102
-
[
103
-
attribute.class("hstack hide-s"),
104
-
],
105
-
[
106
-
html.a([attribute.href("https://en.pronouns.page/@liiv")], [
107
-
badge.badge([], [element.text("pronouns")]),
122
+
html.main([], [
123
+
html.div([attribute.class("container")], [
124
+
html.p([], [
125
+
element.text("this page was made as a replacement to "),
126
+
html.a([attribute.href("https://homarr.dev")], [
127
+
element.text("homarr"),
128
+
]),
129
+
element.text(", which didn't like me changing my domain :/"),
108
130
]),
109
-
html.a([attribute.href("https://www.last.fm/user/nnuuvv")], [
110
-
badge.badge([], [element.text("lastfm")]),
131
+
html.p([], [
132
+
element.text(
133
+
"i mainly use this as a link list to jump to my services / hosted code",
134
+
),
111
135
]),
112
-
],
113
-
),
114
-
// socials(Some("hide-md"), Size(26, 26)),
115
-
]),
116
-
]),
117
-
html.main([], [
118
-
html.div([attribute.class("container")], [
119
-
html.p([], [
120
-
element.text("this page was made as a replacement to "),
121
-
html.a([attribute.href("https://homarr.dev")], [
122
-
element.text("homarr"),
123
-
]),
124
-
element.text(", which didn't like me changing my domain :/"),
125
-
]),
126
-
html.p([], [
127
-
element.text(
128
-
"i mainly use this as a link list to jump to my services / hosted code",
129
-
),
130
-
]),
131
136
132
-
html.hr([]),
137
+
html.hr([]),
133
138
134
-
html.section([], [
135
-
html.h3([], [element.text("stuff hosted by me")]),
136
-
html.div([attribute.class("hstack")], [
137
-
svgs.services(None, svgs.Size(40, 40)),
138
-
]),
139
-
]),
139
+
html.section([], [
140
+
html.h3([], [element.text("stuff hosted by me")]),
141
+
html.div([attribute.class("hstack")], [
142
+
svgs.services(None, svgs.Size(3.25, 3.25)),
143
+
]),
144
+
]),
140
145
141
-
html.hr([]),
146
+
html.hr([]),
142
147
143
-
html.section([], [
144
-
html.h3([], [element.text("people and projects i like")]),
145
-
html.div([attribute.class("hstack")], [
146
-
link_icon(
147
-
to: "mar",
148
-
at: "https://strawmelonjuice.com",
149
-
with_image: "https://strawmelonjuice.com/strawmelonjuice.png",
150
-
size: Large,
151
-
scaling: None,
152
-
),
153
-
link_icon(
154
-
to: "gleam",
155
-
at: "https://gleam.run",
156
-
with_image: "/media/lucy.svg",
157
-
size: Large,
158
-
scaling: Some(Scaling(Some("auto"), Some("85%"))),
159
-
),
160
-
link_icon(
161
-
to: "lustre",
162
-
at: "https://github.com/lustre-labs",
163
-
with_image: "/media/lustre.png",
164
-
size: Large,
165
-
scaling: None,
166
-
),
167
-
// louis
168
-
// giacomo
169
-
// hayleigh
170
-
// mar
171
-
// gleam
172
-
// lustre
173
-
]),
174
-
]),
148
+
html.section([], [
149
+
html.h3([], [element.text("people and projects i like")]),
150
+
html.div([attribute.class("hstack")], [
151
+
link_icon(
152
+
to: "mar",
153
+
at: "https://strawmelonjuice.com",
154
+
with_image: "https://strawmelonjuice.com/strawmelonjuice.png",
155
+
size: Large,
156
+
scaling: None,
157
+
),
158
+
link_icon(
159
+
to: "gleam",
160
+
at: "https://gleam.run",
161
+
with_image: "/media/lucy.svg",
162
+
size: Large,
163
+
scaling: Some(Scaling(Some("auto"), Some("85%"))),
164
+
),
165
+
link_icon(
166
+
to: "lustre",
167
+
at: "https://github.com/lustre-labs",
168
+
with_image: "/media/lustre.png",
169
+
size: Large,
170
+
scaling: None,
171
+
),
172
+
// louis
173
+
// giacomo
174
+
// hayleigh
175
+
// mar
176
+
// gleam
177
+
// lustre
178
+
]),
179
+
]),
175
180
176
-
html.hr([]),
181
+
html.hr([]),
177
182
178
-
html.section([], [
179
-
html.h3([], [element.text("me in other places")]),
180
-
svgs.socials(None, svgs.Size(40, 40)),
181
-
]),
183
+
html.section([], [
184
+
html.h3([], [element.text("me in other places")]),
185
+
svgs.socials(None, svgs.Size(3.25, 3.25)),
186
+
]),
182
187
183
-
html.hr([]),
188
+
html.hr([]),
184
189
185
-
html.h3([], [element.text("this is where i'd put my blog posts...")]),
186
-
element.text("IF I HAD ANY!"),
190
+
html.h3([], [
191
+
element.text("this is where i'd put my blog posts..."),
192
+
]),
193
+
element.text("IF I HAD ANY!"),
187
194
188
-
// html.img([attribute.src("/media/ref.png")]),
189
-
// html.img([attribute.src("/media/puppy.png")]),
190
-
html.ul(
191
-
[],
192
-
list.map(sorted, fn(p) {
193
-
html.li([], [
194
-
html.a([attribute.href("/blog/" <> p.slug)], [
195
-
element.text(p.title),
196
-
]),
197
-
])
198
-
}),
199
-
),
195
+
// html.img([attribute.src("/media/ref.png")]),
196
+
// html.img([attribute.src("/media/puppy.png")]),
197
+
html.ul(
198
+
[],
199
+
list.map(sorted, fn(p) {
200
+
html.li([], [
201
+
html.a([attribute.href("/blog/" <> p.slug)], [
202
+
element.text(p.title),
203
+
]),
204
+
])
205
+
}),
206
+
),
200
207
201
-
html.footer([attribute.class("footer text-light")], [
202
-
html.p([], [
203
-
element.text("Made with "),
204
-
html.a([attribute.href("https://gleam.run")], [
205
-
element.text("gleam"),
206
-
]),
207
-
element.text(" using "),
208
-
html.a([attribute.href("https://blogat.to")], [
209
-
element.text("blogatto"),
210
-
]),
211
-
element.text(", "),
212
-
html.a([attribute.href("https://oat.ink")], [
213
-
element.text("oat ui"),
214
-
]),
208
+
html.footer([attribute.class("footer text-light")], [
209
+
html.p([], [
210
+
element.text("Made with "),
211
+
html.a([attribute.href("https://gleam.run")], [
212
+
element.text("gleam"),
213
+
]),
214
+
element.text(" using "),
215
+
html.a([attribute.href("https://blogat.to")], [
216
+
element.text("blogatto"),
217
+
]),
218
+
element.text(", "),
219
+
html.a([attribute.href("https://oat.ink")], [
220
+
element.text("oat ui"),
221
+
]),
215
222
216
-
element.text(" and "),
217
-
html.a(
218
-
[
219
-
attribute.href(
220
-
"https://github.com/daniellionel01/glaze/tree/main/glaze_oat",
223
+
element.text(" and "),
224
+
html.a(
225
+
[
226
+
attribute.href(
227
+
"https://github.com/daniellionel01/glaze/tree/main/glaze_oat",
228
+
),
229
+
],
230
+
[
231
+
element.text("glaze_oat"),
232
+
],
221
233
),
222
-
],
223
-
[
224
-
element.text("glaze_oat"),
225
-
],
226
-
),
227
-
]),
234
+
]),
228
235
229
-
html.div([attribute.class("carbonbadge"), attribute.id("wcb")], []),
230
-
html.script(
231
-
[
232
-
attribute("defer", ""),
233
-
attribute.src(
234
-
"https://unpkg.com/website-carbon-badges@1.1.3/b.min.js",
236
+
html.div(
237
+
[attribute.class("carbonbadge"), attribute.id("wcb")],
238
+
[],
239
+
),
240
+
html.script(
241
+
[
242
+
attribute("defer", ""),
243
+
attribute.src(
244
+
"https://unpkg.com/website-carbon-badges@1.1.3/b.min.js",
245
+
),
246
+
],
247
+
"",
235
248
),
236
-
],
237
-
"",
238
-
),
249
+
]),
250
+
]),
239
251
]),
240
-
]),
241
-
]),
252
+
],
253
+
),
242
254
]),
243
255
])
244
256
}
+20
-20
src/page/svgs.gleam
+20
-20
src/page/svgs.gleam
···
1
-
import gleam/int
1
+
import gleam/float
2
2
import gleam/option
3
3
import lustre/attribute.{attribute}
4
4
import lustre/element.{type Element, element}
···
6
6
import lustre/element/svg
7
7
8
8
pub type Sizing {
9
-
Size(width: Int, height: Int)
9
+
Size(width: Float, height: Float)
10
10
}
11
11
12
12
// services ---------------------------------------------------------------------
···
37
37
[
38
38
attribute.aria_label("Doodler"),
39
39
attribute.href("https://doodler.ollie.earth"),
40
-
attribute.style("width", int.to_string(size.width) <> "px"),
41
-
attribute.style("height", int.to_string(size.height) <> "px"),
40
+
attribute.style("width", float.to_string(size.width) <> "rem"),
41
+
attribute.style("height", float.to_string(size.height) <> "rem"),
42
42
],
43
43
[
44
44
svg.svg(
···
113
113
[
114
114
attribute.aria_label("Navidrome"),
115
115
attribute.href("https://tunes.ollie.earth"),
116
-
attribute.style("width", int.to_string(size.width) <> "px"),
117
-
attribute.style("height", int.to_string(size.height) <> "px"),
116
+
attribute.style("width", float.to_string(size.width) <> "rem"),
117
+
attribute.style("height", float.to_string(size.height) <> "rem"),
118
118
],
119
119
[
120
120
svg.svg(
···
237
237
fn woodpecker(size: Sizing) {
238
238
html.a(
239
239
[
240
-
attribute.style("width", int.to_string(size.width) <> "px"),
241
-
attribute.style("height", int.to_string(size.height) <> "px"),
240
+
attribute.style("width", float.to_string(size.width) <> "rem"),
241
+
attribute.style("height", float.to_string(size.height) <> "rem"),
242
242
attribute.href("https://ci.ollie.earth"),
243
243
attribute("data-hover-color", "light-dark(#000000, #ffffff)"),
244
244
],
···
303
303
304
304
attribute.attribute("data-hover-color", "black"),
305
305
attribute.attribute("data-hover-background", "white"),
306
-
attribute.style("width", int.to_string(size.width) <> "px"),
307
-
attribute.style("height", int.to_string(size.height) <> "px"),
306
+
attribute.style("width", float.to_string(size.width) <> "rem"),
307
+
attribute.style("height", float.to_string(size.height) <> "rem"),
308
308
],
309
309
[
310
310
svg.svg(
···
355
355
attribute.aria_label("Email"),
356
356
attribute.href("mailto:web@ollie.earth"),
357
357
// attribute.attribute("data-hover-color", "var(--secondary)"),
358
-
attribute.style("width", int.to_string(size.width) <> "px"),
359
-
attribute.style("height", int.to_string(size.height) <> "px"),
358
+
attribute.style("width", float.to_string(size.width) <> "rem"),
359
+
attribute.style("height", float.to_string(size.height) <> "rem"),
360
360
],
361
361
[
362
362
svg.svg(
···
391
391
attribute.aria_label("Bluesky"),
392
392
attribute.href("https://bsky.app/profile/ollie.earth"),
393
393
attribute.attribute("data-hover-color", "#006aff"),
394
-
attribute.style("width", int.to_string(size.width) <> "px"),
395
-
attribute.style("height", int.to_string(size.height) <> "px"),
394
+
attribute.style("width", float.to_string(size.width) <> "rem"),
395
+
attribute.style("height", float.to_string(size.height) <> "rem"),
396
396
],
397
397
[
398
398
svg.svg(
···
422
422
fn forgejo(size: Sizing) {
423
423
html.a(
424
424
[
425
-
attribute.style("width", int.to_string(size.width) <> "px"),
426
-
attribute.style("height", int.to_string(size.height) <> "px"),
425
+
attribute.style("width", float.to_string(size.width) <> "rem"),
426
+
attribute.style("height", float.to_string(size.height) <> "rem"),
427
427
attribute.href("https://git.ollie.earth/nuv"),
428
428
],
429
429
[
···
542
542
fn github(size: Sizing) {
543
543
html.a(
544
544
[
545
-
attribute.style("width", int.to_string(size.width) <> "px"),
546
-
attribute.style("height", int.to_string(size.height) <> "px"),
545
+
attribute.style("width", float.to_string(size.width) <> "rem"),
546
+
attribute.style("height", float.to_string(size.height) <> "rem"),
547
547
attribute.href("https://github.com/ollie-dot-earth"),
548
548
attribute("data-hover-color", "light-dark(#000000, #ffffff)"),
549
549
],
···
575
575
fn tangled(size: Sizing) {
576
576
html.a(
577
577
[
578
-
attribute.style("width", int.to_string(size.width) <> "px"),
579
-
attribute.style("height", int.to_string(size.height) <> "px"),
578
+
attribute.style("width", float.to_string(size.width) <> "rem"),
579
+
attribute.style("height", float.to_string(size.height) <> "rem"),
580
580
attribute.href("https://tangled.org/ollie.earth"),
581
581
attribute("data-hover-color", "light-dark(#000000, #ffffff)"),
582
582
],
+7
-1
static/style.css
+7
-1
static/style.css
···
32
32
}
33
33
}
34
34
35
-
@media screen and (max-width: 350px) {
35
+
@media screen and (max-width: 450px) {
36
36
.hide-s {
37
37
display: none;
38
38
}
···
56
56
.text-light {
57
57
color: var(--muted-foreground);
58
58
}
59
+
60
+
:root {
61
+
font-size: 20px
62
+
}
63
+
64
+
59
65
60
66
/* websitecarbon.com overrides */
61
67