katproto.girlonthemoon.xyz
+2
-2
site/about/index.php
+2
-2
site/about/index.php
···
22
22
23
23
<h2 id="about-kat" class="highlight">about kat</h2>
24
24
25
-
<div class="about-wrapper">
26
-
<figure class="about-icon tape">
25
+
<div class="polaroid-wrapper">
26
+
<figure class="polaroid-icon tape">
27
27
<img src="/assets/images/hcard.png" loading="lazy" alt="selfie of me holding up my camcorder and covering half my face with it as i look into the view finder. the image is black and white, dithered, and covered in spotted half tones">
28
28
29
29
<figcaption>me with my camcorder <span aria-label="hashtag my camcorder">#mycamcorder</span> (2025)</figcaption>
+6
-6
site/assets/styles/polaroid.css
+6
-6
site/assets/styles/polaroid.css
···
1
-
.about-wrapper {
1
+
.polaroid-wrapper {
2
2
margin-top: 1.5em;
3
3
}
4
4
5
-
.about-icon {
5
+
.polaroid-icon {
6
6
background: var(--accent-color);
7
7
width: fit-content;
8
8
padding: .2rem 1rem 2rem 1rem;
···
10
10
display: block;
11
11
}
12
12
13
-
figure.about-icon {
13
+
figure.polaroid-icon {
14
14
inline-size: fit-content;
15
15
margin-inline: auto;
16
16
}
17
17
18
-
figure.about-icon img {
18
+
figure.polaroid-icon img {
19
19
display: block;
20
20
margin: 1rem auto;
21
21
width: 200px;
22
22
}
23
23
24
-
figure.about-icon figcaption {
24
+
figure.polaroid-icon figcaption {
25
25
color: white;
26
26
contain: inline-size;
27
27
}
···
32
32
height: 30px;
33
33
margin: -1em auto .5rem auto;
34
34
width: 200px;
35
-
background-color: color-mix(in srgb, lightblue, transparent 10%);
35
+
background-color: lightblue;
36
36
border-right: 1px dotted #86c5da;
37
37
border-left: 1px dotted #86c5da;
38
38
opacity: 0.5;
+9
site/elsewhere/index.php
+9
site/elsewhere/index.php
···
31
31
<li><a href="https://bsky.app/profile/did:plc:jl5dgp7xb34xfqlpywt7kcp5/">bluesky</a></li>
32
32
<li><a href="https://social.lol/@lachesis">fediverse</a></li>
33
33
</ul>
34
+
35
+
<h2 id="code" class="highlight">code</h2>
36
+
37
+
<ul class="nav-secondary">
38
+
<li><a href="https://github.com/xxwhirlpool/">github</a></li>
39
+
<li><a href="https://git.sr.ht/~chasinglightning/">sourcehut</a></li>
40
+
<li><a href="https://tangled.org/@did:plc:jl5dgp7xb34xfqlpywt7kcp5">tangled</a></li>
41
+
<li><a href="https://bytes.4-walls.net/kat">bytes</a> <span class="li-parenthesis">(personal forgejo instance)</span></li>
42
+
</ul>
34
43
35
44
<h2 id="contact" class="highlight">contact</h2>
36
45