···

       
24
       
24
       
 
       
  }

     

       
25
       
25
       
 
       
}

     

       
26
       
26
       
 
       


     

       
27
       
27
       
+
       
/* abbr popup trick */

     

       
28
       
28
       
+
       
/* https://cyrneko.eu/css-tricks.html */

     

       
29
       
29
       
+
       


     

       
30
       
30
       
+
       
@media (pointer: coarse),

     

       
31
       
31
       
+
       
(hover: none) {

     

       
32
       
32
       
+
       
  [title] {

     

       
33
       
33
       
+
       
    position: relative;

     

       
34
       
34
       
+
       
    display: inline-flex;

     

       
35
       
35
       
+
       
    justify-content: center;

     

       
36
       
36
       
+
       
  }

     

       
37
       
37
       
+
       


     

       
38
       
38
       
+
       
  [title]:focus::after,

     

       
39
       
39
       
+
       
  [title]:hover::after {

     

       
40
       
40
       
+
       
    content: attr(title);

     

       
41
       
41
       
+
       
    position: absolute;

     

       
42
       
42
       
+
       
    top: 120%;

     

       
43
       
43
       
+
       
    color: var(--text-color-white);

     

       
44
       
44
       
+
       
	background: var(--accent-color);

     

       
45
       
45
       
+
       
    width: max-content;

     

       
46
       
46
       
+
       
    padding: .5rem;

     

       
47
       
47
       
+
       
    z-index: 10;

     

       
48
       
48
       
+
       
    border: 0;

     

       
49
       
49
       
+
       
  }

     

       
50
       
50
       
+
       
}

     

       
51
       
51
       
+
       


     

       
52
       
52
       
+
       


     

       
27
       
53
       
 
       
:root {

     

       
28
       
54
       
 
       
	--text-color: #1e6899;

     

       
29
       
55
       
 
       
	--text-color-white: #fff;

     
···

       
75
       
101
       
 
       
	text-align: center;

     

       
76
       
102
       
 
       
}

     

       
77
       
103
       
 
       


     

       
78
       
78
       
-
       
ul {

     

       
104
       
104
       
+
       
ul, ol {

     

       
79
       
105
       
 
       
	padding-left: 1em;

     

       
80
       
106
       
 
       
}

     

       
81
       
107
       
 
       


     

       
82
       
82
       
-
       
ul li {

     

       
108
       
108
       
+
       
ul li, ol li {

     

       
83
       
109
       
 
       
	margin: .5em 0 .5em 0;

     

       
84
       
110
       
 
       
}

     

       
85
       
111
       
 
       


     
···

       
211
       
237
       
 
       
	padding: 0 !important;

     

       
212
       
238
       
 
       
}

     

       
213
       
239
       
 
       


     

       
214
       
214
       
-
       
/* nav main */

     

       
240
       
240
       
+
       
/* nav secondary */

     

       
215
       
241
       
 
       


     

       
216
       
242
       
 
       
nav ul.nav-secondary {

     

       
217
       
243
       
 
       
	text-align: left;

     
···

       
233
       
259
       
 
       


     

       
234
       
260
       
 
       
nav ul.nav-secondary > li {

     

       
235
       
261
       
 
       
	padding: 0 !important;

     

       
236
       
236
       
-
       
}

     

       
237
       
237
       
-
       


     

       
238
       
238
       
-
       
ul.nav-secondary-personal::before {

     

       
239
       
239
       
-
       
	content: "🌐";

     

       
240
       
240
       
-
       
}

     

       
241
       
241
       
-
       


     

       
242
       
242
       
-
       
ul.nav-secondary-contact::before {

     

       
243
       
243
       
-
       
	content: "📧";

     

       
244
       
244
       
-
       
}

     

       
245
       
245
       
-
       


     

       
246
       
246
       
-
       
ul.nav-secondary-support::before {

     

       
247
       
247
       
-
       
	content: "💙";

     

       
248
       
262
       
 
       
}

     

       
249
       
263
       
 
       


     

       
250
       
264
       
 
       
/* link icons */

     

···

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
define("BASE_URL", "https://girlonthemoon.xyz/");

     

       
4
       
4
       
 
       


     

       
5
       
5
       
-
       
$bday = new DateTime("2004-10-13");

     

       
5
       
5
       
+
       
$bday = new DateTime("2004-10-12");

     

       
6
       
6
       
 
       
$interval = new DateTime("now");

     

       
7
       
7
       
 
       
$age = date_diff($bday, $interval);

     

       
8
       
8
       
-
       
$age_fmt = $age->format("%Y years")

     

       
8
       
8
       
+
       
$age_fmt = $age->format("%Y years");

     

       
9
       
9
       
 
       


     

       
10
       
10
       
 
       
?>

     

···

       
1
       
1
       
-
       
<!DOCTYPE html>

     

       
2
       
2
       
-
       
<html lang="en">

     

       
3
       
3
       
-
       


     

       
4
       
4
       
-
       
<head>

     

       
5
       
5
       
-
       
<meta charset="UTF-8">

     

       
6
       
6
       
-
       


     

       
7
       
7
       
-
       
<link rel="icon" type="image/x-icon" href="139.png">

     

       
8
       
8
       
-
       
<link rel="stylesheet" href="main.css">

     

       
9
       
9
       
-
       


     

       
10
       
10
       
-
       
<title>girl on the moon :: featured</title>

     

       
11
       
11
       
-
       


     

       
12
       
12
       
-
       
<style>

     

       
13
       
13
       
-
       
.desc::before {

     

       
14
       
14
       
-
       
content: "↳";

     

       
15
       
15
       
-
       
}

     

       
16
       
16
       
-
       
</style>

     

       
17
       
17
       
-
       
</head>

     

       
18
       
18
       
-
       


     

       
19
       
19
       
-
       
<body>

     

       
20
       
20
       
-
       


     

       
21
       
21
       
-
       
<article>

     

       
22
       
22
       
-
       
<p><span class="highlight">documentation</span></p>

     

       
23
       
23
       
-
       
<ul>

     

       
24
       
24
       
-
       
<li><a href="https://stash.4-walls.net/selfhostdw/">self hosting dreamwidth with docker</a><br>

     

       
25
       
25
       
-
       
<span class="desc">how to deploy a production instance of the <a href="https://github.com/dreamwidth/dreamwidth/">dreamwidth</a> code in docker</span></li>

     

       
26
       
26
       
-
       
<li><a href="https://superlove.sayitditto.net/works/338">OTW-archive paperclip to active storage</a><br>

     

       
27
       
27
       
-
       
<span class="desc">now obsolete and superseded by upstream doing their own migration, but notable because i did it first</span></li>

     

       
28
       
28
       
-
       
</ul>

     

       
29
       
29
       
-
       


     

       
30
       
30
       
-
       
<p><span class="highlight">miscellaneous</span></p>

     

       
31
       
31
       
-
       
<ul>

     

       
32
       
32
       
-
       
<li><a href="https://stash.4-walls.net/hotdiva2004/">hotdiva2004</a><br>

     

       
33
       
33
       
-
       
<span class="desc">writing prompt generator powered by charm CLI's <a href="https://github.com/charmbracelet/hotdiva2000">hotdiva2000</a>, a random string generator</span></li>

     

       
34
       
34
       
-
       
</ul>

     

       
35
       
35
       
-
       
</article>

     

       
36
       
36
       
-
       


     

       
37
       
37
       
-
       
</body>

     

       
38
       
38
       
-
       


     

       
39
       
39
       
-
       
</html>

     

···

       
28
       
28
       
 
       
			<dl>

     

       
29
       
29
       
 
       
				<dt><a href="https://bubblegum.girlonthemoon.xyz/articles/html-day-2025">HTML day 2025</a> (<time datetime="2025-08-02">august 2nd, 2025</time>)</dt>

     

       
30
       
30
       
 
       
					<dd>

     

       
31
       
31
       
-
       
						 <a href="/ruru/index.html">in the orange light</a>: dedicated to <i>dambara ruru</i>

     

       
31
       
31
       
+
       
						 <a href="/ruru/index.html">in the orange light</a>: dedicated to <i>dambara ruru</i>.

     

       
32
       
32
       
 
       
					</dd>

     

       
33
       
33
       
 
       
			</dl>

     

       
34
       
34
       
 
       
		</section>

     

···

       
15
       
15
       
 
       
	

     

       
16
       
16
       
 
       
	<?php include "nav_main.php" ?>

     

       
17
       
17
       
 
       


     

       
18
       
18
       
-
       
	<p><span class="highlight">kat, <?php echo $age_fmt ?>, she/her</span>. i like computers and music and other irrelevant stuff. i have several servers at home and i never shut up about them. my server related hobbies include spinning up random docker containers, hosting sites no one will use, and breaking my home internet router, among other things.</p>

     

       
18
       
18
       
+
       
	<p><span class="highlight">kat, <?php echo $age_fmt ?> old, she/her</span>. i like computers and music and other irrelevant stuff. i have several servers at home and i never shut up about them. my server related hobbies include spinning up random docker containers, hosting sites no one will use, and breaking my home internet router, among other things.</p>

     

       
19
       
19
       
 
       


     

       
20
       
20
       
 
       
	<p>some of my work:</p>

     

       
21
       
21
       
 
       
	

     

···

       
1
       
1
       
-
       
<nav aria-label="extra links">

     

       
2
       
2
       
-
       


     

       
3
       
3
       
-
       
	<ul class="nav-secondary">

     

       
4
       
4
       
-
       
		<li>

     

       
5
       
5
       
-
       
			<?php

     

       
6
       
6
       
-
       
				$hash = getenv("RESHASH");

     

       
7
       
7
       
-
       
				$hashUrl = "https://bytes.4-walls.net/girlonthemoon/girlonthemoon/commit" . "/" . $hash;

     

       
8
       
8
       
-
       
				echo "<span class='githashtag' aria-hidden='true'>#</span><a class='githashlink' href='$hashUrl'>$hash</a>";

     

       
9
       
9
       
-
       
			?>

     

       
10
       
10
       
-
       
		</li>

     

       
11
       
11
       
-
       
	</ul>

     

       
12
       
12
       
-
       


     

       
13
       
13
       
-
       
	<ul class="nav-secondary nav-secondary-personal">

     

       
14
       
14
       
-
       
		<li><a href="https://bubblegum.girlonthemoon.xyz/">blog</a></li>

     

       
15
       
15
       
-
       
		<li><a href="https://sakura.girlonthemoon.xyz">garden</a></li>

     

       
16
       
16
       
-
       
	</ul>

     

       
17
       
17
       
-
       


     

       
18
       
18
       
-
       
	<ul class="nav-secondary nav-secondary-contact">

     

       
19
       
19
       
-
       
		<li><a href="mailto:witnesslachesis@disroot.org?subject=hi%20from%20your%20site">email</a></li>

     

       
20
       
20
       
-
       
		<li><a href="assets/misc/pgp.txt">PGP key</a></li>

     

       
21
       
21
       
-
       
	</ul>

     

       
22
       
22
       
-
       
	

     

       
23
       
23
       
-
       
	<ul class="nav-secondary nav-secondary-support">

     

       
24
       
24
       
-
       
		<li><a href="https://www.patreon.com/c/girlonthemoon">patreon</a></li>

     

       
25
       
25
       
-
       
		<li><a href="https://ko-fi.com/girlonthemoon">ko-fi</a></li>

     

       
26
       
26
       
-
       
	</ul>

     

       
27
       
27
       
-
       
	

     

       
28
       
28
       
-
       
</nav>