not.whiny.lol
very simple webpage built with hugo with links to all of my profiles.
wobblybrian.xyz
get rid of blog and simplify 100x
+99
-416
+1
-13
content/_index.md
+1
-13
content/_index.md
···
1
1
---
2
2
title: home
3
3
description: welcome to my wobbly litle website
4
-
---
5
-
6
-
# hai, i'm @wobblybrian :3
7
-
8
-
i'm a 17-year-old disabled (autistic & chronically ill) nerd from ireland.
9
-
10
-
i'm queer, my pronouns are **he/him** or **they/them**.
11
-
12
-
talk or follow on my [social](/social) page, or learn more [about](/about) me.
13
-
14
-
my time zone is GMT+1.
15
-
16
-
^i deal with chronic fatigue & i never really have energy, please keep that in mind.^
4
+
---
-10
content/about.md
-10
content/about.md
···
1
-
---
2
-
title: about
3
-
description: me, myself and i
4
-
---
5
-
6
-
i’m a 17-year-old disabled (autistic & chronically ill) nerd.
7
-
8
-
i live in the republic of ireland. i’m queer, my pronouns are he/him or they/them.
9
-
10
-
i really like technology. i dabble in web stuff (currently only html and css) and making silly songs.
content/blog/cool-sites/images/cobalttools.jpg
content/blog/cool-sites/images/cobalttools.jpg
This is a binary file and will not be displayed.
content/blog/cool-sites/images/fmhy.jpg
content/blog/cool-sites/images/fmhy.jpg
This is a binary file and will not be displayed.
content/blog/cool-sites/images/mdn.jpg
content/blog/cool-sites/images/mdn.jpg
This is a binary file and will not be displayed.
-37
content/blog/cool-sites/index.md
-37
content/blog/cool-sites/index.md
···
1
-
---
2
-
title: cool websites i enjoy :3
3
-
date: '2025-07-14'
4
-
description: none of these are ads, nobody knows who i am anyway
5
-
---
6
-
7
-
In no particular order...
8
-
9
-
## 1. cobalt.tools
10
-
11
-
[Visit cobalt](https://cobalt.tools) - [View source code](https://github.com/imputnet/cobalt) - [Check out its developers](https://imput.net)
12
-
13
-
14
-
15
-
Awesome free and open-source media downloader.
16
-
17
-
YouTube have blocked downloads using Cobalt lately. A big L, in my opinion... Luckily there are other community instances like [cobalt.canine.tools](https://cobalt.canine.tools) that seem to work more reliably.
18
-
19
-
## 2. freemediaheckyeah (FMHY)
20
-
21
-
[Visit FMHY](https://fmhy.net) - [View documentation source](https://github.com/fmhy/edit)
22
-
23
-
24
-
25
-
Valuable resources from knowledge relating to downloading media very, very legally, to tools for work/school, computing in general, etc.
26
-
27
-
## 3. Mozilla MDN Web Docs
28
-
29
-
[Visit MDN](https://developer.mozilla.org/en-US/) - [View documentation source](https://github.com/mdn/content) - [Check out its developers](https://mozilla.org)
30
-
31
-
32
-
33
-
Despite Mozilla's shortcomings over the past few years, the MDN Web Docs have remained one of the most valuable resources for me during my journey into HTML & CSS.
34
-
35
-
## Thanks for reading
36
-
37
-
I will probably update this with some more websites in the near future!
content/blog/hi-there/images/dog.jpeg
content/blog/hi-there/images/dog.jpeg
This is a binary file and will not be displayed.
-18
content/blog/hi-there/index.md
-18
content/blog/hi-there/index.md
+7
-35
hugo.toml
+7
-35
hugo.toml
···
3
3
title = "wobbly brian"
4
4
5
5
[params]
6
-
description = "welcome to my wobbly litle website!"
7
-
8
-
# Main menu
9
-
10
-
[[menu.main]]
11
-
pageRef = "home"
12
-
name = "home"
13
-
url = "/"
14
-
weight = 1
15
-
16
-
[[menu.main]]
17
-
pageRef = "blog"
18
-
name = "blog"
19
-
url = "/blog"
20
-
weight = 2
21
-
22
-
[[menu.main]]
23
-
pageRef = "social"
24
-
name = "social"
25
-
url = "/social"
26
-
weight = 3
27
-
28
-
[[menu.main]]
29
-
pageRef = "about"
30
-
name = "about"
31
-
url = "/about"
32
-
weight = 4
33
-
34
-
# Social media links
6
+
description = "wobbly brian"
35
7
36
8
[[menu.talk]]
37
9
name = "discord"
···
59
31
handle = "@wobblybrian.xyz"
60
32
61
33
[[menu.social]]
62
-
name = "tangled"
63
-
url = "https://tangled.org/@wobblybrian.xyz"
34
+
name = "reddit"
35
+
url = "https://reddit.com/user/wobblybrian"
64
36
weight = 2
65
37
[menu.social.params]
66
-
handle = "@wobblybrian.xyz"
38
+
handle = "u/wobblybrian"
67
39
68
40
[[menu.social]]
69
41
name = "youtube"
···
81
53
handle = "@wobblybrian"
82
54
83
55
[[menu.social]]
84
-
name = "reddit"
85
-
url = "https://reddit.com/user/wobblybrian"
56
+
name = "tangled"
57
+
url = "https://tangled.org/@wobblybrian.xyz"
86
58
weight = 5
87
59
[menu.social.params]
88
-
handle = "u/wobblybrian"
60
+
handle = "@wobblybrian.xyz"
89
61
90
62
[[menu.social]]
91
63
name = "mastodon"
-15
layouts/blog/single.html
-15
layouts/blog/single.html
+39
-2
layouts/index.html
+39
-2
layouts/index.html
···
1
1
{{ define "main" }}
2
2
3
3
<div class="container">
4
-
5
-
{{ .Content }}
4
+
5
+
<h2>talk</h2>
6
+
7
+
<div class="grid social">
8
+
{{ range site.Menus.talk }}
9
+
<a class="card" {{ if .Params.title }}title="{{ .Params.title }}"{{ else }}title="{{ .Name }}"{{ end }} href="{{ .URL | relURL }}">
10
+
11
+
{{ with .Name }}
12
+
{{ $icon := index site.Data.icons.icons . }}
13
+
{{ $icon | safeHTML }}
14
+
{{ end }}
15
+
16
+
<div class="card-info">
17
+
<p>{{ .Name }}</p>
18
+
<p class="caption">{{ .Params.handle }}</p>
19
+
</div>
20
+
</a>
21
+
{{ end }}
22
+
</div>
23
+
24
+
<h2>follow</h2>
25
+
26
+
<div class="grid social">
27
+
{{ range site.Menus.social }}
28
+
<a class="card" {{ if .Params.title }}title="{{ .Params.title }}"{{ else }}title="{{ .Name }}"{{ end }} href="{{ .URL | relURL }}">
29
+
30
+
{{ with .Name }}
31
+
{{ $icon := index site.Data.icons.icons . }}
32
+
{{ $icon | safeHTML }}
33
+
{{ end }}
34
+
35
+
<div class="card-info">
36
+
<p>{{ .Name }}</p>
37
+
<p class="caption">{{ .Params.handle }}</p>
38
+
</div>
39
+
</a>
40
+
41
+
{{ end }}
42
+
</div>
6
43
7
44
</div>
8
45
+6
-26
layouts/partials/head.html
+6
-26
layouts/partials/head.html
···
1
1
<!DOCTYPE html>
2
2
<html lang="{{ .Site.LanguageCode }}">
3
3
<head>
4
-
5
4
<meta charset="utf-8">
6
5
<meta name="viewport" content="width=device-width, initial-scale=1">
7
-
<title>{{ .Site.Title }} - {{ .Title }}</title>
6
+
<title>{{ .Title }} @ {{ .Site.Title }}</title>
8
7
<link rel="stylesheet" href="/css/style.css"/>
9
-
10
-
<script>
11
-
/* fix flash of unstyled content on firefox */
12
-
let FOUC_FIX;
13
-
</script>
14
-
15
-
<link rel="shortcut icon" type="image/png" href="/icon-192x192.png">
16
-
<link rel="shortcut icon" sizes="192x192" href="/icon-192x192.png">
17
-
<link rel="apple-touch-icon" href="/icon-192x192.png">
18
-
19
-
<link rel="me" href="https://mastodon.social/@wobblybrian">
20
-
21
-
<meta property="og:logo" content="https://wobblybrian.xyz/icon-192x192.png">
22
-
<meta property="og:url" content="https://wobblybrian.xyz/">
23
-
<meta property="og:site_name" content="wobbly brian">
24
-
<meta property="og:title" content="{{ .Title}}">
25
-
<meta property="og:description" content="{{ .Description}}">
26
-
<meta property="og:locale" content="en_ie">
27
-
<meta property="og:type" content="website">
28
-
<meta property="og:image" content="https://wobblybrian.xyz/og.jpg">
29
-
<meta name="twitter:card" content="summary_large_image">
30
-
<meta name="twitter:image" content="https://wobblybrian.xyz/og.jpg">
31
-
<meta name="twitter:title" content="{{ .Site.Title }} - {{ .Title }}">
32
-
8
+
<link rel="icon" sizes="32x32" type="image/png" href="/favicon.png">
9
+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
10
+
<meta property="og:logo" content="https://wobblybrian.xyz/apple-touch-icon.png">
11
+
{{ partial "opengraph.html" . }}
12
+
{{ partial "twitter_cards.html" . }}
33
13
</head>
+2
-13
layouts/partials/header.html
+2
-13
layouts/partials/header.html
···
1
1
<header>
2
2
3
-
<div class="header-top">
4
-
<p>wobbly brian</p>
3
+
<div class="header-inner">
4
+
<h1>{{ .Site.Title }}</h1>
5
5
</div>
6
-
7
-
<nav aria-label="Main Navigation">
8
-
<ul>
9
-
{{ $currentPage := $.Page }}
10
-
{{ range site.Menus.main }}
11
-
<li class="{{ if or (and (eq .URL "/") $currentPage.IsHome) ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}active{{ end }}">
12
-
<a href="{{ .URL }}">{{ .Name }}</a>
13
-
</li>
14
-
{{ end }}
15
-
</ul>
16
-
</nav>
17
6
18
7
</header>
static/apple-touch-icon.png
static/apple-touch-icon.png
This is a binary file and will not be displayed.
+44
-193
static/css/style.css
+44
-193
static/css/style.css
···
15
15
}
16
16
17
17
:root {
18
-
/* Font */
19
18
--heading: 'Space Grotesk';
20
19
--body: 'Inter';
21
-
22
-
/* Text colours */
23
20
--text: rgb(225, 225, 225);
24
-
--text-2: rgb(200, 200, 200);
25
-
26
-
/* UI colours */
27
-
--bg: rgb(255, 127, 200);
28
-
--card-bg: rgba(0, 0, 0, 0.4);
29
-
--clear-dark: rgba(0, 0, 0, 0.7);
30
-
--clear-light: rgba(20, 20, 20, 0.7);
31
-
32
-
--header-height: 90px;
21
+
--text-2: rgb(170, 170, 170);
22
+
--purple-element: rgb(54, 31, 44);
23
+
--purple-accent: rgb(76, 38, 60);
24
+
--purple-bg: rgb(90, 52, 74);
33
25
34
26
}
35
27
36
-
/* CSS Reset */
28
+
/* Reset */
37
29
38
30
*, *::before, *::after {
39
31
box-sizing: border-box;
···
64
56
color: var(--text);
65
57
}
66
58
67
-
h1, h2, h3, h4, h5, h6 {
59
+
h1, h2 {
68
60
font-weight: 400;
69
61
font-family: var(--heading);
70
62
text-wrap: balance;
···
81
73
line-height: 1.3;
82
74
}
83
75
84
-
h3 {
85
-
font-size: 1.5rem;
86
-
line-height: 1.3;
87
-
}
88
-
89
-
h4 {
90
-
font-size: 1.35rem;
91
-
line-height: 1.4;
92
-
}
93
-
94
-
h5 {
95
-
font-size: 1.2rem;
96
-
line-height: 1.5;
97
-
}
98
-
99
-
h6 {
100
-
font-size: 1.1rem;
101
-
line-height: 1.5;
102
-
}
103
-
104
-
code {
105
-
user-select: all;
106
-
}
107
-
108
-
/* Page Content */
109
-
110
-
.container > :first-child {
111
-
margin-top: 0;
112
-
}
113
-
114
-
.container > :last-child {
115
-
margin-bottom: 0;
116
-
}
117
-
118
-
119
-
.container > p {
120
-
margin-block: 1lh;
121
-
max-width: 68ch;
122
-
}
123
-
124
-
.container > a {
125
-
text-decoration: underline;
126
-
font-weight: 600;
127
-
&:hover {
128
-
color: var(--text-2);
129
-
}
130
-
}
131
-
132
-
.container :is(h1, h2, h3, h4, h5, h6) {
133
-
margin-block: 1lh;
134
-
}
135
-
136
-
.container ul {
137
-
margin-block: 1lh;
138
-
padding-left: 1rem;
139
-
}
140
-
141
-
.container li {
142
-
max-width: 68ch;
143
-
margin-bottom: 1lh;
144
-
&:last-of-type {
145
-
margin-bottom: 0;
146
-
}
147
-
}
148
-
149
76
/* Site */
150
77
151
78
body {
152
79
font-size: 16px;
153
80
font-family: var(--body);
154
81
color: var(--text);
155
-
background-color: var(--bg);
156
-
line-height: 1.6;
82
+
background: var(--purple-bg);
83
+
line-height: 1.5;
157
84
min-height: 100vh;
158
85
}
159
86
160
-
.wobbly {
161
-
position: fixed;
162
-
width: 100%;
163
-
height: 100%;
164
-
overflow: hidden;
165
-
}
166
-
167
-
/* Header */
168
-
169
-
header {
87
+
main {
170
88
max-width: 50rem;
171
-
height: var(--header-height);
172
89
margin-inline: auto;
173
90
}
174
91
175
-
.header-top {
176
-
display: flex;
177
-
align-items: center;
178
-
padding-left: 3rem;
179
-
background-color: var(--clear-dark);
180
-
min-height: 50px;
92
+
header {
93
+
position: sticky;
94
+
top: 0;
95
+
background-color: var(--purple-accent);
181
96
}
182
97
183
-
.header-top p {
184
-
font-family: var(--heading);
185
-
font-size: 1.2rem;
186
-
}
187
-
188
-
/* Navigation */
189
-
190
-
nav {
98
+
.header-inner {
191
99
max-width: 50rem;
192
-
height: 40px;
193
-
}
194
-
195
-
nav ul {
196
-
display: flex;
197
-
list-style: none;
198
-
height: 100%;
199
-
padding: 0;
200
-
}
201
-
202
-
nav li:first-of-type a {
203
-
padding-left: 3rem;
204
-
}
205
-
206
-
nav li {
207
-
flex: 1 1 0;
208
-
min-width: 0;
209
-
background-color: var(--clear-dark);
100
+
padding-block: 1rem;
101
+
margin-inline: auto;
102
+
padding-inline: 3rem;
210
103
}
211
104
212
-
.active {
213
-
background-color: var(--clear-light);
214
-
}
215
-
216
-
nav li:hover {
217
-
background-color: var(--clear-light);
218
-
}
219
-
220
-
nav li a {
221
-
display: flex;
222
-
align-items: center;
223
-
height: 100%;
224
-
padding-left: 1rem;
225
-
text-decoration: none;
226
-
font-family: var(--heading);
227
-
font-size: 0.9rem;
228
-
}
229
-
230
-
/* Main box */
231
-
232
-
main {
233
-
max-width: 50rem;
234
-
margin-inline: auto;
235
-
}
105
+
/* Content */
236
106
237
107
.container {
238
-
height: calc(100dvh - var(--header-height));
239
-
background: var(--clear-light);
240
108
padding-inline: 3rem;
241
109
padding-block: 3rem;
242
110
overflow: auto;
243
111
}
244
112
245
-
/* Page info */
113
+
.container > :first-child {
114
+
margin-block-start: 0;
115
+
}
246
116
247
-
.info {
248
-
margin-bottom: 3rem;
249
-
}
117
+
.container > :last-child {
118
+
margin-block-end: 0;
119
+
}
250
120
251
-
.info h1 {
252
-
margin-block: 0;
121
+
.container > p {
122
+
margin-block: 1lh;
123
+
max-width: 68ch;
253
124
}
254
125
255
-
.info p {
256
-
color: var(--text-2);
257
-
font-size: 0.9rem;
258
-
text-transform: lowercase;
259
-
margin-block: 1rem;
260
-
&:last-of-type {
261
-
margin-bottom: 0;
262
-
}
126
+
.container > h2 {
127
+
margin-block-start: 3rem;
128
+
margin-block-end: 1rem;
263
129
}
264
130
265
-
/* Grids */
131
+
/* Grid */
266
132
267
-
.grid {
133
+
.social {
268
134
display: grid;
269
-
grid-template-columns: 1fr;
270
135
gap: 1rem;
271
-
}
272
-
273
-
.social {
274
136
grid-template-columns: repeat(2, 1fr);
275
137
}
276
138
277
-
/* Card */
278
-
279
139
.card {
280
-
background-color: var(--card-bg);
140
+
display: flex;
141
+
background-color: var(--purple-element);
281
142
padding: 1.5rem;
282
143
fill: var(--text);
283
144
text-decoration: none;
145
+
border: 2px solid var(--purple-element);
284
146
text-transform: lowercase;
147
+
transition: all 100ms;
285
148
}
286
149
287
-
.flex {
288
-
display: flex;
289
-
}
290
-
291
-
.card:hover {
292
-
text-decoration: underline;
150
+
.card:hover,
151
+
.card:focus {
152
+
background-color: var(--purple-accent);
153
+
border: 2px solid var(--text);
293
154
}
294
155
295
156
.card svg {
296
157
width: 35px;
297
-
margin-right: 1.5rem;
158
+
margin-inline-end: 1.5rem;
298
159
}
299
160
300
161
.card .caption {
301
162
color: var(--text-2);
302
163
font-size: 0.85rem;
303
164
}
304
-
305
-
/* Media Queries */
306
165
307
166
@media screen and (max-width: 50rem) {
308
167
.container {
309
168
padding-inline: 1rem;
310
169
}
311
170
312
-
nav li a {
313
-
font-size: 0.8rem;
314
-
}
315
-
316
-
nav li:first-of-type a {
317
-
padding-left: 1rem;
318
-
}
319
-
320
-
.header-top {
321
-
padding-left: 1rem;
171
+
.header-inner {
172
+
padding-inline: 1rem;
322
173
}
323
174
}
324
175
325
176
@media screen and (max-width: 35rem) {
326
-
.flex {
177
+
.card {
327
178
flex-direction: column;
328
179
}
329
180
static/favicon.png
static/favicon.png
This is a binary file and will not be displayed.
static/og.jpg
static/og.jpg
This is a binary file and will not be displayed.