1 files changed, 59 insertions, 0 deletions
diff --git a/me/pronouns/index.php b/me/pronouns/index.php
new file mode 100644
index 0000000..c6106f8
--- /dev/null
+++ b/me/pronouns/index.php
@@ -0,0 +1,59 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>pronounce | isopod.cool v4</title>
+    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
+    <style>
+      .entry-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: var(--stdpadding);
+      }
+      .labeled-entry {
+        display: flex;
+        align-items: center;
+        gap: calc(var(--stdpadding) / 2);
+      }
+      .labeled-entry img {
+        height: 2em;
+        filter: invert();
+      }
+    </style>
+  </head>
+  <body>
+    <?php include($_SERVER['DOCUMENT_ROOT'] . '/header.php'); ?>
+
+    <main>
+      <p class="prefers-contrast-less-message">If you're reading this with your eyes and not a screen reader, that means you have, somehow, indicated a preference that this page be displayed with reduced contrast. I genuinely have no clue how you did this, or how I as a web dev am supposed to handle it. I hope my solution of applying a reduced-contrast filter to the entire page is to your liking. If not, please contact me and tell me what you'd prefer I do here, because I'm genuinely lost.</p>
+      <section>
+        <h2>i got pronouns</h2>
+        <p class="h2caption">blue hair pending</p>
+        <p class="backlink"><a href="../"><< about me</a></p>
+        <p>I briefly had a page on <a href="https://pronouns.cc">pronouns.cc</a> once but hell if I'm gonna use it when I have my own website</p>
+        <div class="entry-container notice">
+          <span class="labeled-entry"><img src="good.svg" alt="Good"> Preferred</span>
+          <span class="labeled-entry"><img src="friend.svg" alt="Friends only"> Friends only</span>
+          <span class="labeled-entry"><img src="bad.svg" alt="Bad"> Don't</span>
+        </div>
+        <section>
+          <h3>Pronouns</h3>
+          <div class="entry-container">
+            <span class="labeled-entry"><img src="good.svg" alt="Good"> she/her</span>
+            <span class="labeled-entry"><img src="good.svg" alt="Good"> it/its</span>
+            <span class="labeled-entry"><img src="friend.svg" alt="Friends only"> they/them</span>
+            <span class="labeled-entry"><img src="bad.svg" alt="Bad"> he/him</span>
+          </div>
+        </section>
+      </section>
+    </main>
+
+    <?php include($_SERVER['DOCUMENT_ROOT'] . "/footer.php"); ?>
+
+
+  </body>
+</html>