me/pronouns/index.php


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68


<!DOCTYPE html>
<html lang="en">
  <head>
    <?php include($_SERVER['DOCUMENT_ROOT'] . '/boilerplate.php'); ?>
    <title>pronounce | <?php echo($_SERVER['HTTP_HOST']);?></title>
    <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>
          <h3>Pronouns</h3>
          <dl>
            <dt>she/her</dt>
            <dd>👍</dd>
            <dt>it/its</dt>
            <dd>👍</dd>
            <dt>they/them</dt>
            <dd>this pronoun can be unlocked with a $5 monthly subscription</dd>
          </dl>
        </section-->
      </section>
    </main>

    <?php include($_SERVER['DOCUMENT_ROOT'] . "/footer.php"); ?>


  </body>
</html>