diff --git a/static/about.mts b/static/about.mts
new file mode 100644
index 0000000..709e958
--- /dev/null
+++ b/static/about.mts
@@ -0,0 +1,17 @@
+import { findImageOrFail } from "./dom.mjs";
+
+async function populateUser(selector: string, origin: string, userId: string) {
+ const avatarImage = findImageOrFail(document.body, selector);
+ const userData = await fetch(`https://${origin}/api/users/show`, {
+ method: "POST",
+ body: JSON.stringify({
+ userId,
+ })
+ }).then(r => r.json());
+ if (userData.avatarUrl) {
+ avatarImage.src = userData.avatarUrl;
+ }
+}
+
+populateUser("#charlotteAvatar", "eepy.moe", "9xt2s326nxev039h");
+populateUser("#kioAvatar", "kitsunes.club", "9810gvfne3");
diff --git a/static/crossroad.html b/static/crossroad.html
index 8ca3031..b769c4d 100644
--- a/static/crossroad.html
+++ b/static/crossroad.html
@@ -11,6 +11,7 @@
+
+
diff --git a/static/main.css b/static/main.css
index 7667227..4781220 100644
--- a/static/main.css
+++ b/static/main.css
@@ -63,6 +63,10 @@ abbr[title] {
/* Generic styling properties */
+.wrap-balance {
+ text-wrap: balance;
+}
+
.align-start {
text-align: start;
}
@@ -139,6 +143,14 @@ abbr[title] {
min-height: 50%;
}
+.half-width-max {
+ max-width: 50%;
+}
+
+.half-height-max {
+ max-height: 50%;
+}
+
.full-width {
min-width: 100%;
}
@@ -163,6 +175,10 @@ abbr[title] {
margin-top: auto;
}
+.margin-none-top {
+ margin-top: 0;
+}
+
.margin-large-bottom {
margin-bottom: var(--large);
}