1795 lines
47 KiB
HTML
1795 lines
47 KiB
HTML
<!doctype html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
|
||
<title>on pronouns | hello hello</title>
|
||
<meta name="description" content="Lee Cattarin... on the internet!">
|
||
<link rel="alternate" href="/feed.xml" type="application/atom+xml" title="hello hello">
|
||
|
||
<meta property="og:title" content="on pronouns">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:description" content="Lee Cattarin... on the internet!">
|
||
<meta property="og:site_name" content="hello hello">
|
||
|
||
<meta property="og:image" content="/img/starling.jpg">
|
||
<meta property="og:image:alt" content="Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder.">
|
||
|
||
|
||
<meta name="generator" content="Eleventy v3.1.2">
|
||
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
|
||
|
||
|
||
<script src="https://kit.fontawesome.com/884dded219.js" crossorigin="anonymous"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<style>.post-metadata {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin: 1.5rem 0 .5rem;
|
||
}
|
||
|
||
.post-metadata p {
|
||
font-size: .9rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
gap: .5rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags li {
|
||
margin: 0;
|
||
}
|
||
|
||
.post-tags li a {
|
||
text-decoration: none;
|
||
color: var(--color-teal);
|
||
padding: 0 .5rem;
|
||
border-radius: 1rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
border: .08rem solid var(--color-teal);
|
||
line-height: 2;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .1s ease-in, left .1s ease-in;
|
||
}
|
||
|
||
.post-tags li a:focus-visible {
|
||
outline: none;
|
||
background-color: var(--color-teal);
|
||
color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.post-tags li a:hover {
|
||
outline: none;
|
||
background-color: var(--color-teal);
|
||
color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.post-tags li a:focus-visible {
|
||
outline-offset: .08rem;
|
||
outline: .08rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.post-tags li a:hover {
|
||
outline-offset: .08rem;
|
||
outline: .08rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
.post-tags li a:active {
|
||
top: .1rem;
|
||
left: .1rem;
|
||
box-shadow: .05rem .05rem var(--color-shadow);
|
||
}
|
||
/* Adapted from PrismJS 1.30.0 Tomorrow Night theme
|
||
https://prismjs.com/download
|
||
*/
|
||
code,
|
||
pre,
|
||
code[class*=language-],
|
||
pre[class*=language-] {
|
||
font-family: var(--font-family-code);
|
||
background-color: var(--color-bg-alt);
|
||
font-size: .9rem;
|
||
text-shadow: 0 1px var(--color-shadow);
|
||
-moz-tab-size: 4;
|
||
-o-tab-size: 4;
|
||
tab-size: 4;
|
||
-webkit-hyphens: none;
|
||
-moz-hyphens: none;
|
||
-ms-hyphens: none;
|
||
hyphens: none;
|
||
}
|
||
|
||
pre,
|
||
pre[class*=language-] {
|
||
margin: 1rem 0;
|
||
padding: 1rem;
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
overflow-wrap: break-word;
|
||
border-radius: .5rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
:not(pre)>code,
|
||
:not(pre)>code[class*=language-] {
|
||
padding: .2rem;
|
||
border-radius: .25rem;
|
||
white-space: normal;
|
||
}
|
||
|
||
/* Selected text */
|
||
code ::-moz-selection,
|
||
code::-moz-selection,
|
||
pre ::-moz-selection,
|
||
pre::-moz-selection,
|
||
code[class*=language-] ::-moz-selection,
|
||
code[class*=language-]::-moz-selection,
|
||
pre[class*=language-] ::-moz-selection,
|
||
pre[class*=language-]::-moz-selection,
|
||
code ::selection,
|
||
code::selection,
|
||
pre ::selection,
|
||
pre::selection,
|
||
code[class*=language-] ::selection,
|
||
code[class*=language-]::selection,
|
||
pre[class*=language-] ::selection,
|
||
pre[class*=language-]::selection {
|
||
text-shadow: none;
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
/* Syntax highlighting */
|
||
.token.namespace {
|
||
opacity: .7;
|
||
}
|
||
|
||
.token.bold,
|
||
.token.important {
|
||
font-weight:700
|
||
}
|
||
|
||
.token.italic {
|
||
font-style:italic
|
||
}
|
||
|
||
.token.block-comment,
|
||
.token.cdata,
|
||
.token.comment,
|
||
.token.doctype,
|
||
.token.prolog,
|
||
.token.punctuation {
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
.token.attr-name,
|
||
.token.deleted,
|
||
.token.namespace,
|
||
.token.tag {
|
||
color: var(--color-red);
|
||
}
|
||
|
||
.token.boolean,
|
||
.token.function,
|
||
.token.number {
|
||
color: var(--color-orange);
|
||
}
|
||
|
||
.token.class-name,
|
||
.token.constant,
|
||
.token.property,
|
||
.token.symbol {
|
||
color: var(--color-yellow);
|
||
}
|
||
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.regex,
|
||
.token.string,
|
||
.token.variable,
|
||
.token.inserted {
|
||
color: var(--color-green);
|
||
}
|
||
|
||
.token.entity,
|
||
.token.operator,
|
||
.token.url,
|
||
.token.function-name {
|
||
color:var(--color-blue);
|
||
}
|
||
|
||
.token.atrule,
|
||
.token.builtin,
|
||
.token.important,
|
||
.token.keyword,
|
||
.token.selector {
|
||
color: var(--color-purple);
|
||
}
|
||
#postlist,
|
||
#taglist {
|
||
list-style: none;
|
||
}
|
||
|
||
#postlist, .post,
|
||
#taglist, .tag {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Odd-numbered posts & tag layout/coloration */
|
||
.post:nth-child(odd) .postlink,
|
||
.tag:nth-child(odd) .taglink {
|
||
grid-template-areas:
|
||
'img h2'
|
||
'img info'
|
||
'img .';
|
||
grid-template-columns: 45% auto;;
|
||
--color-primary: var(--color-teal);
|
||
--color-accent: var(--color-pink);
|
||
}
|
||
|
||
/* Even-numbered posts & tags layout/coloration */
|
||
.post:nth-child(even) .postlink,
|
||
.tag:nth-child(even) .taglink {
|
||
grid-template-areas:
|
||
'h2 img'
|
||
'info img'
|
||
'. img';
|
||
grid-template-columns: auto 45%;
|
||
--color-primary: var(--color-pink);
|
||
--color-accent: var(--color-teal);
|
||
}
|
||
|
||
/* Layout for all posts on mobile */
|
||
@media (max-width: 650px) {
|
||
.post:nth-child(n) .postlink,
|
||
.tag:nth-child(n) .taglink {
|
||
grid-template-areas:
|
||
'img'
|
||
'h2'
|
||
'info';
|
||
grid-template-columns: auto;
|
||
}
|
||
}
|
||
|
||
/* Link */
|
||
.postlink,
|
||
.taglink {
|
||
display: grid;
|
||
border: .25rem solid var(--color-primary);
|
||
border-radius: 1.25rem;
|
||
box-shadow: .35rem .35rem var(--color-shadow);
|
||
margin: 2rem 0;
|
||
text-decoration: none;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .05s ease-in, left .05s ease-in;
|
||
}
|
||
|
||
.postlink:focus-visible,
|
||
.taglink:focus-visible {
|
||
background-color: var(--color-primary);
|
||
outline: none;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover,
|
||
.taglink:hover {
|
||
background-color: var(--color-primary);
|
||
}
|
||
}
|
||
|
||
/* Forced colors */
|
||
@media (forced-colors: active) {
|
||
.postlink:focus-visible,
|
||
.taglink:focus-visible {
|
||
outline-offset: .25rem;
|
||
outline: .25rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover,
|
||
.taglink:hover {
|
||
outline-offset: .25rem;
|
||
outline: .25rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
.postlink:active,
|
||
.taglink:active {
|
||
box-shadow: none;
|
||
top: .2rem;
|
||
left: .2rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
}
|
||
|
||
/* Post & tag elements */
|
||
.post h2, .post img,
|
||
.post ul, .post li,
|
||
.tag h2, .tag p,
|
||
.tag img {
|
||
margin: 0;
|
||
}
|
||
|
||
.post h2,
|
||
.tag h2 {
|
||
grid-area: h2;
|
||
padding: .25rem .5rem;
|
||
text-transform: uppercase;
|
||
font-size: 1.5rem;
|
||
color: var(--color-primary);
|
||
border-radius: 1rem 1rem 0 0;
|
||
border-bottom: .25rem solid var(--color-accent);
|
||
}
|
||
|
||
.post:nth-child(even) h2,
|
||
.tag:nth-child(even) h2 {
|
||
text-align: right;
|
||
}
|
||
|
||
.postlink:focus-visible h2,
|
||
.taglink:focus-visible h2 {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover h2,
|
||
.taglink:hover h2 {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
/* Images */
|
||
.post img,
|
||
.tag-imgs {
|
||
grid-area: img;
|
||
}
|
||
|
||
.tag-imgs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: .15rem;
|
||
}
|
||
|
||
.tag-imgs img {
|
||
aspect-ratio: 3 / 2;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.missing-image {
|
||
width: 100%;
|
||
aspect-ratio: 3 / 2;
|
||
background-color: var(--color-bg-alt);
|
||
border-radius: calc(1rem);
|
||
}
|
||
|
||
.taglink:focus-visible .missing-image {
|
||
opacity: .7;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.taglink:hover .missing-image {
|
||
opacity: .7;
|
||
}
|
||
}
|
||
|
||
/* Post tags */
|
||
.postlist-tags {
|
||
grid-area: info;
|
||
list-style: none;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
gap: .5rem;
|
||
padding: .5rem;
|
||
}
|
||
|
||
.post:nth-child(odd) .postlist-tags {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.postlist-tags li,
|
||
.tagcount {
|
||
background-color: var(--color-primary);
|
||
color: var(--color-bg);
|
||
padding: 0 .5rem;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
.postlink:focus-visible .postlist-tags li,
|
||
.taglink:focus-visible .tagcount {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
.postlink:hover .postlist-tags li,
|
||
.taglink:hover .tagcount {
|
||
background-color: var(--color-bg);
|
||
color: var(--color-primary);
|
||
}
|
||
}
|
||
|
||
/* Tag count */
|
||
.tag p {
|
||
grid-area: info;
|
||
padding: .5rem;
|
||
}
|
||
|
||
.tag:nth-child(odd) p {
|
||
text-align: right;
|
||
}
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
|
||
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
|
||
|
||
--color-dark: #2e303e;
|
||
--color-dark-alt: #3c3f52;
|
||
--color-light: #ebeeef;
|
||
--color-light-alt: #dbe1e3;
|
||
|
||
--color-teal-dark: #18737b;
|
||
--color-teal-light: #25b0bc;
|
||
--color-pink-dark: #94195d;
|
||
--color-pink-light: #ee9fcb;
|
||
|
||
--color-shadow: rgba(2, 10, 40, .25);
|
||
|
||
/* Used for syntax highlighting */
|
||
--color-red-light: #e95678;
|
||
--color-orange-light: #fab795;
|
||
--color-yellow-light: #fbe6bc;
|
||
--color-green-light: #29d398;
|
||
--color-blue-light: #26bbd9;
|
||
--color-purple-light: #ddaeea;
|
||
--color-grey-light: #b9c3c6;
|
||
|
||
--color-red-dark: #991433;
|
||
--color-orange-dark: #883206;
|
||
--color-yellow-dark: #6a4906;
|
||
--color-green-dark: #125940;
|
||
--color-blue-dark: #125663;
|
||
--color-purple-dark: #722999;
|
||
--color-grey-dark: #4a4b64;
|
||
|
||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||
|
||
--color-text-alt: light-dark(var(--color-dark-alt), var(--color-light-alt));
|
||
--color-bg-alt: light-dark(var(--color-light-alt), var(--color-dark-alt));
|
||
|
||
--color-teal: light-dark(var(--color-teal-dark), var(--color-teal-light));
|
||
--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
|
||
|
||
--color-red: light-dark(var(--color-red-dark), var(--color-red-light));
|
||
--color-orange: light-dark(var(--color-orange-dark), var(--color-orange-light));
|
||
--color-yellow: light-dark(var(--color-yellow-dark), var(--color-yellow-light));
|
||
--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
|
||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||
}
|
||
|
||
/* Base */
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-family);
|
||
color: var(--color-text);
|
||
background-color: var(--color-bg);
|
||
}
|
||
|
||
main {
|
||
width: 60vw;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
scroll-margin-top: 7rem;
|
||
}
|
||
|
||
@media (max-width: 1050px) {
|
||
main {
|
||
width: 75vw;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
main {
|
||
width: 92vw;
|
||
}
|
||
}
|
||
|
||
/* Headers */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
line-height: 1.25;
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 3rem;
|
||
font-size: 3.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
h2, h3, h4, h5, h6 {
|
||
scroll-margin-top: 5rem;
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 2rem;
|
||
font-size: 2.2rem;
|
||
}
|
||
|
||
h3 {
|
||
margin-top: 1.5rem;
|
||
font-size: 1.6rem;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
h1 { font-size: 2.8rem; }
|
||
h2 { font-size: 1.8rem; }
|
||
h3 { font-size: 1.35rem; }
|
||
}
|
||
|
||
h4, h5, h6 {
|
||
margin-top: 1rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Images */
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 1rem;
|
||
}
|
||
|
||
/* Paragraphs */
|
||
p {
|
||
margin: 1.25rem 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
strong,
|
||
b {
|
||
font-weight: 900;
|
||
}
|
||
|
||
/* Links */
|
||
a {
|
||
color: var(--color-text);
|
||
border-radius: .25rem;
|
||
text-decoration: underline;
|
||
text-decoration-style: solid;
|
||
text-decoration-thickness: .2em;
|
||
text-decoration-color: var(--color-teal);
|
||
transition: text-decoration-thickness .5s;
|
||
}
|
||
|
||
a:focus-visible {
|
||
text-decoration: none;
|
||
outline: .15rem solid var(--color-teal);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
a:hover {
|
||
text-decoration-thickness: .4em;
|
||
}
|
||
}
|
||
|
||
a:active {
|
||
text-decoration-thickness: .4em;
|
||
}
|
||
|
||
/* Heading anchors */
|
||
a.ha,
|
||
span.ha-placeholder {
|
||
color: var(--color-pink);
|
||
}
|
||
span.ha-placeholder {
|
||
opacity: .55;
|
||
}
|
||
|
||
|
||
/* Lists */
|
||
::marker {
|
||
color: var(--color-pink);
|
||
}
|
||
|
||
ul, ol, dl, li {
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
li {
|
||
line-height: 1.2 5;
|
||
margin-top: .65rem;
|
||
margin-bottom: .65rem;
|
||
}
|
||
|
||
li ul, li ol {
|
||
margin: .5rem 0;
|
||
}
|
||
|
||
dt {
|
||
font-weight: 900;
|
||
margin-top: .5rem;
|
||
}
|
||
|
||
dd {
|
||
margin-left: 2rem;
|
||
margin-bottom: .75rem;
|
||
}
|
||
|
||
/* Blockquotes */
|
||
blockquote {
|
||
margin: .5rem 0;
|
||
padding: 0 1rem;
|
||
border-radius: .25rem 1rem 1rem .25rem;
|
||
line-height: 1.25;
|
||
border-left: .5rem solid var(--color-pink);
|
||
}
|
||
|
||
blockquote,
|
||
blockquote p,
|
||
blockquote ol,
|
||
blockquote ul {
|
||
background-color: var(--color-bg-alt);
|
||
padding: .5rem;
|
||
}
|
||
|
||
blockquote p {
|
||
margin: 0;
|
||
}
|
||
|
||
/* Tables */
|
||
table {
|
||
width: 100%;
|
||
border-spacing: 0; /* border collapse doesn't play nice with radii */
|
||
border-radius: .3rem;
|
||
border: thin solid var(--color-pink);
|
||
}
|
||
|
||
th {
|
||
color: var(--color-bg);
|
||
background-color: var(--color-pink);
|
||
}
|
||
|
||
th code {
|
||
color: var(--color-text); /* Yes, I actually do this somewhere */
|
||
}
|
||
|
||
th, td {
|
||
padding: .5rem;
|
||
text-align: left;
|
||
}
|
||
|
||
tr:nth-child(even) { background-color: var(--color-bg-alt); }
|
||
th:not(:first-child) { border-left: thin solid var(--color-bg); }
|
||
th:first-child { border-top-left-radius: .25rem; }
|
||
th:last-child { border-top-right-radius: .25rem; }
|
||
td:not(:first-child) { border-left: thin solid var(--color-pink); }
|
||
|
||
/* Times */
|
||
time {
|
||
color: var(--color-grey);
|
||
}
|
||
|
||
/* Horizontal rules */
|
||
hr {
|
||
border: .25rem solid var(--color-pink);
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
/* Used on home, reference, gallery pages */
|
||
.centered {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Currently only used for resume, but it's generalizable */
|
||
.upper {
|
||
text-transform: uppercase;
|
||
}
|
||
/* Header */
|
||
header {
|
||
position: sticky;
|
||
top: 0;
|
||
background-color: var(--color-bg);
|
||
padding: .75rem 0;
|
||
z-index: 10;
|
||
border-bottom: thick solid var(--color-teal);
|
||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||
}
|
||
|
||
/* Header links, pagination links */
|
||
header a,
|
||
.pagination a,
|
||
.webring ul a {
|
||
border-radius: 1rem;
|
||
border: .125rem solid var(--color-pink);
|
||
color: var(--color-pink);
|
||
text-decoration: none;
|
||
padding: 0 .25rem;
|
||
box-shadow: .15rem .15rem var(--color-shadow);
|
||
font-size: 1.2rem;
|
||
/* Click animation handling */
|
||
position: relative;
|
||
top: 0;
|
||
left: 0;
|
||
transition: top .05s ease-in, left .05s ease-in;
|
||
}
|
||
|
||
header a,
|
||
.pagination .older a,
|
||
.webring .prev a,
|
||
.webring .rand a {
|
||
padding-right: .35rem;
|
||
}
|
||
|
||
.pagination .newer a,
|
||
.webring .next a,
|
||
.webring .rand a {
|
||
padding-left: .35rem;
|
||
}
|
||
|
||
header a:focus-visible,
|
||
.pagination a:focus-visible,
|
||
.webring ul a:focus-visible {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-pink);
|
||
background-color: var(--color-pink);
|
||
outline: none;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover,
|
||
.pagination a:hover,
|
||
.webring ul a:hover {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-pink);
|
||
background-color: var(--color-pink);
|
||
}
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
header a:focus-visible,
|
||
.pagination a:focus-visible,
|
||
.webring ul a:focus-visible {
|
||
outline-offset: .125rem;
|
||
outline: .125rem solid;
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover,
|
||
.pagination a:hover,
|
||
.webring ul a:hover {
|
||
outline-offset: .125rem;
|
||
outline: .125rem solid;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Click animation */
|
||
header a:active,
|
||
.pagination a:active,
|
||
.webring ul a:active {
|
||
top: .1rem;
|
||
left: .1rem;
|
||
box-shadow: .05rem .05rem var(--color-shadow);
|
||
}
|
||
|
||
/* Current page */
|
||
header a[aria-current="page"] {
|
||
border-color: var(--color-teal);
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
header a[aria-current="page"]:focus-visible {
|
||
color: var(--color-bg);
|
||
border-color: var(--color-teal);
|
||
background-color: var(--color-teal);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a[aria-current="page"]:hover {
|
||
color: var(--color-bg);
|
||
background-color: var(--color-teal);
|
||
border-color: var(--color-teal);
|
||
}
|
||
}
|
||
|
||
/* Header link icons, pagination icons */
|
||
header i,
|
||
.pagination i,
|
||
.webring ul i {
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
header i,
|
||
.pagination .older i,
|
||
.webring .prev i,
|
||
.webring .rand i:nth-child(1) {
|
||
padding-left: .25rem;
|
||
}
|
||
|
||
.pagination .newer i,
|
||
.webring .next i,
|
||
.webring .rand i:nth-child(2) {
|
||
padding-right: .25rem;
|
||
}
|
||
|
||
header a[aria-current="page"] i {
|
||
color: var(--color-pink);
|
||
}
|
||
|
||
header a:focus-visible i,
|
||
a[aria-current="page"] a:focus-visible i,
|
||
.pagination a:focus-visible i,
|
||
.webring ul a:focus-visible i {
|
||
color: var(--color-bg);
|
||
}
|
||
|
||
@media (any-hover: hover) {
|
||
header a:hover i,
|
||
header a[aria-current="page"]:hover i,
|
||
.pagination a:hover i,
|
||
.webring ul a:hover i {
|
||
color: var(--color-bg);
|
||
}
|
||
}
|
||
|
||
/* Skip link */
|
||
#skip {
|
||
left: -999px;
|
||
position: absolute;
|
||
top: auto;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
z-index: -99;
|
||
}
|
||
|
||
#skip:focus-visible {
|
||
display: inline-block;
|
||
left: auto;
|
||
top: auto;
|
||
width: auto;
|
||
height: auto;
|
||
overflow: auto;
|
||
margin: 0 10%;
|
||
z-index: 999;
|
||
}
|
||
|
||
/* Nav */
|
||
header ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
header ul,
|
||
header li {
|
||
margin: 0;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.menu-text {
|
||
display: none; /* Icons only on small screens */
|
||
}
|
||
|
||
header a {
|
||
padding: .15rem .5rem;
|
||
}
|
||
|
||
header i {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 1rem 0;
|
||
font-size: .9rem;
|
||
border-top: thick solid var(--color-pink);
|
||
}
|
||
|
||
footer ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: .5rem;
|
||
justify-content: center;
|
||
margin: 0;
|
||
}
|
||
|
||
footer li {
|
||
margin: 0;
|
||
}
|
||
|
||
footer li:nth-child(2)::before,
|
||
footer li:nth-child(2)::after {
|
||
content: " ● " / "";
|
||
color: var(--color-teal);
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
footer ul {
|
||
flex-flow: column;
|
||
text-align: center;
|
||
}
|
||
|
||
footer li:nth-child(2)::before,
|
||
footer li:nth-child(2)::after {
|
||
content: none;
|
||
}
|
||
}
|
||
|
||
footer a {
|
||
text-decoration-color: var(--color-pink);
|
||
}
|
||
|
||
footer a:focus-visible {
|
||
outline-color: var(--color-pink);
|
||
}
|
||
|
||
/* Pagination */
|
||
.pagination,
|
||
.pagination li {
|
||
margin: 0;
|
||
}
|
||
|
||
.pagination {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-areas: "older newer";
|
||
list-style: none;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
@media (max-width: 650px) {
|
||
.post-pagination {
|
||
grid-template-columns: 1fr;
|
||
grid-template-areas:
|
||
"older"
|
||
"newer";
|
||
gap: .75rem;
|
||
}
|
||
}
|
||
|
||
.pagination .older {
|
||
grid-area: older;
|
||
}
|
||
|
||
.pagination .newer {
|
||
grid-area: newer;
|
||
text-align: right;
|
||
}
|
||
|
||
/* webring navigation */
|
||
.webring {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.webring ul {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
list-style: none;
|
||
justify-content: space-around;
|
||
gap: .35rem;
|
||
}
|
||
|
||
.webring ul,
|
||
.webring li {
|
||
margin-left: 0;
|
||
}
|
||
@media print {
|
||
/* Nav elements */
|
||
header,
|
||
footer,
|
||
nav {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Base */
|
||
body {
|
||
background-color: #fff;
|
||
color: #000;
|
||
}
|
||
|
||
main {
|
||
width: 95vw;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 {
|
||
color: #000;
|
||
}
|
||
|
||
/* Links */
|
||
/* Hover is not really necessary, but it's annoying when testing otherwise */
|
||
a,
|
||
a:hover {
|
||
text-decoration-style: dotted;
|
||
text-decoration-thickness: .1rem;
|
||
text-decoration-color: #000;
|
||
}
|
||
|
||
a::after{
|
||
content: " (" attr(href) ")";
|
||
}
|
||
|
||
|
||
/* Code */
|
||
code,
|
||
pre,
|
||
code[class*=language-],
|
||
pre[class*=language-] {
|
||
text-shadow: none;
|
||
background-color: var(--color-light);
|
||
color: #000 !important;
|
||
}
|
||
|
||
.token.namespace {
|
||
opacity: 1;
|
||
}
|
||
|
||
.token.block-comment,
|
||
.token.cdata,
|
||
.token.comment,
|
||
.token.doctype,
|
||
.token.prolog,
|
||
.token.punctuation,
|
||
.token.attr-name,
|
||
.token.deleted,
|
||
.token.namespace,
|
||
.token.tag,
|
||
.token.boolean,
|
||
.token.function,
|
||
.token.number,
|
||
.token.class-name,
|
||
.token.constant,
|
||
.token.property,
|
||
.token.symbol,
|
||
.token.attr-value,
|
||
.token.char,
|
||
.token.regex,
|
||
.token.string,
|
||
.token.variable,
|
||
.token.inserted,
|
||
.token.entity,
|
||
.token.operator,
|
||
.token.url,
|
||
.token.function-name,
|
||
.token.atrule,
|
||
.token.builtin,
|
||
.token.important,
|
||
.token.keyword,
|
||
.token.selector {
|
||
color: #000;
|
||
}
|
||
}</style>
|
||
|
||
<script type="module">// Thank you to https://github.com/daviddarnes/heading-anchors
|
||
// Thank you to https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||
|
||
let globalInstanceIndex = 0;
|
||
|
||
class HeadingAnchors extends HTMLElement {
|
||
static register(tagName = "heading-anchors", registry = window.customElements) {
|
||
if(registry && !registry.get(tagName)) {
|
||
registry.define(tagName, this);
|
||
}
|
||
}
|
||
|
||
static attributes = {
|
||
exclude: "data-ha-exclude",
|
||
prefix: "prefix",
|
||
content: "content",
|
||
}
|
||
|
||
static classes = {
|
||
anchor: "ha",
|
||
placeholder: "ha-placeholder",
|
||
srOnly: "ha-visualhide",
|
||
}
|
||
|
||
static defaultSelector = "h2,h3,h4,h5,h6";
|
||
|
||
static css = `
|
||
.${HeadingAnchors.classes.srOnly} {
|
||
clip: rect(0 0 0 0);
|
||
height: 1px;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
width: 1px;
|
||
}
|
||
.${HeadingAnchors.classes.anchor} {
|
||
position: absolute;
|
||
left: var(--ha_offsetx);
|
||
top: var(--ha_offsety);
|
||
text-decoration: none;
|
||
opacity: 0;
|
||
}
|
||
.${HeadingAnchors.classes.placeholder} {
|
||
opacity: .3;
|
||
}
|
||
.${HeadingAnchors.classes.anchor}:is(:focus-within, :hover) {
|
||
opacity: 1;
|
||
}
|
||
.${HeadingAnchors.classes.anchor},
|
||
.${HeadingAnchors.classes.placeholder} {
|
||
display: inline-block;
|
||
padding: 0 .25em;
|
||
|
||
/* Disable selection of visually hidden label */
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
@supports (anchor-name: none) {
|
||
.${HeadingAnchors.classes.anchor} {
|
||
position: absolute;
|
||
left: anchor(left);
|
||
top: anchor(top);
|
||
}
|
||
}`;
|
||
|
||
get supports() {
|
||
return "replaceSync" in CSSStyleSheet.prototype;
|
||
}
|
||
|
||
get supportsAnchorPosition() {
|
||
return CSS.supports("anchor-name: none");
|
||
}
|
||
|
||
constructor() {
|
||
super();
|
||
|
||
if(!this.supports) {
|
||
return;
|
||
}
|
||
|
||
let sheet = new CSSStyleSheet();
|
||
sheet.replaceSync(HeadingAnchors.css);
|
||
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
|
||
|
||
this.headingStyles = {};
|
||
this.instanceIndex = globalInstanceIndex++;
|
||
}
|
||
|
||
connectedCallback() {
|
||
if (!this.supports) {
|
||
return;
|
||
}
|
||
|
||
this.headings.forEach((heading, index) => {
|
||
if(!heading.hasAttribute(HeadingAnchors.attributes.exclude)) {
|
||
let anchor = this.getAnchorElement(heading);
|
||
let placeholder = this.getPlaceholderElement();
|
||
|
||
// Prefers anchor position approach for better accessibility
|
||
// https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
|
||
if(this.supportsAnchorPosition) {
|
||
let anchorName = `--ha_${this.instanceIndex}_${index}`;
|
||
placeholder.style.setProperty("anchor-name", anchorName);
|
||
anchor.style.positionAnchor = anchorName;
|
||
}
|
||
|
||
heading.appendChild(placeholder);
|
||
heading.after(anchor);
|
||
}
|
||
});
|
||
}
|
||
|
||
// Polyfill-only
|
||
positionAnchorFromPlaceholder(placeholder) {
|
||
if(!placeholder) {
|
||
return;
|
||
}
|
||
|
||
let heading = placeholder.closest("h1,h2,h3,h4,h5,h6");
|
||
if(!heading.nextElementSibling) {
|
||
return;
|
||
}
|
||
|
||
// TODO next element could be more defensive
|
||
this.positionAnchor(heading.nextElementSibling);
|
||
}
|
||
|
||
// Polyfill-only
|
||
positionAnchor(anchor) {
|
||
if(!anchor || !anchor.previousElementSibling) {
|
||
return;
|
||
}
|
||
|
||
// TODO previous element could be more defensive
|
||
let heading = anchor.previousElementSibling;
|
||
this.setFontProp(heading, anchor);
|
||
|
||
if(this.supportsAnchorPosition) {
|
||
// quit early
|
||
return;
|
||
}
|
||
|
||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
anchor.style.setProperty("--ha_offsetx", `${placeholder.offsetLeft}px`);
|
||
anchor.style.setProperty("--ha_offsety", `${placeholder.offsetTop}px`);
|
||
}
|
||
}
|
||
|
||
setFontProp(heading, anchor) {
|
||
let placeholder = heading.querySelector(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
let style = getComputedStyle(placeholder);
|
||
let props = ["font-weight", "font-size", "line-height", "font-family"];
|
||
let [weight, size, lh, family] = props.map(name => style.getPropertyValue(name));
|
||
anchor.style.setProperty("font", `${weight} ${size}/${lh} ${family}`);
|
||
let vars = style.getPropertyValue("font-variation-settings");
|
||
if(vars) {
|
||
anchor.style.setProperty("font-variation-settings", vars);
|
||
}
|
||
}
|
||
}
|
||
|
||
getAccessibleTextPrefix() {
|
||
// Useful for i18n
|
||
return this.getAttribute(HeadingAnchors.attributes.prefix) || "Jump to section titled";
|
||
}
|
||
|
||
getContent() {
|
||
if(this.hasAttribute(HeadingAnchors.attributes.content)) {
|
||
return this.getAttribute(HeadingAnchors.attributes.content);
|
||
}
|
||
return "#";
|
||
}
|
||
|
||
// Placeholder nests inside of heading
|
||
getPlaceholderElement() {
|
||
let ph = document.createElement("span");
|
||
ph.setAttribute("aria-hidden", true);
|
||
ph.classList.add(HeadingAnchors.classes.placeholder);
|
||
let content = this.getContent();
|
||
if(content) {
|
||
ph.innerHTML = content; // CHANGED HERE
|
||
}
|
||
|
||
ph.addEventListener("mouseover", (e) => {
|
||
let placeholder = e.target.closest(`.${HeadingAnchors.classes.placeholder}`);
|
||
if(placeholder) {
|
||
this.positionAnchorFromPlaceholder(placeholder);
|
||
}
|
||
});
|
||
|
||
return ph;
|
||
}
|
||
|
||
getAnchorElement(heading) {
|
||
let anchor = document.createElement("a");
|
||
anchor.href = `#${heading.id}`;
|
||
anchor.classList.add(HeadingAnchors.classes.anchor);
|
||
|
||
let content = this.getContent();
|
||
anchor.innerHTML = `<span class="${HeadingAnchors.classes.srOnly}">${this.getAccessibleTextPrefix()}: ${heading.textContent}</span>${content ? `<span aria-hidden="true">${content}</span>` : ""}`;
|
||
|
||
anchor.addEventListener("focus", e => {
|
||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||
if(anchor) {
|
||
this.positionAnchor(anchor);
|
||
}
|
||
});
|
||
|
||
anchor.addEventListener("mouseover", (e) => {
|
||
// when CSS anchor positioning is supported, this is only used to set the font
|
||
let anchor = e.target.closest(`.${HeadingAnchors.classes.anchor}`);
|
||
this.positionAnchor(anchor);
|
||
});
|
||
|
||
return anchor;
|
||
}
|
||
|
||
get headings() {
|
||
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
|
||
}
|
||
|
||
get selector() {
|
||
return this.getAttribute("selector") || HeadingAnchors.defaultSelector;
|
||
}
|
||
}
|
||
|
||
HeadingAnchors.register();
|
||
|
||
export { HeadingAnchors }</script>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
|
||
<a href="#main" id="skip" title="skip to main content" aria-label="skip to main content">
|
||
<i class="fa-solid fa-forward" aria-hidden="true"></i> skip
|
||
</a>
|
||
|
||
<nav aria-label="main navigation">
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/reference/" title="read reference posts" aria-label="read reference posts">
|
||
<i class="fa-regular fa-folder-open" aria-hidden="true"></i>
|
||
<span class="menu-text">reference</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/gallery/" title="view the gallery" aria-label="view the gallery">
|
||
<i class="fa-regular fa-images" aria-hidden="true"></i>
|
||
<span class="menu-text">gallery</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/" title="" aria-label="">
|
||
<i class="fa fa-solid fa-crow" aria-hidden="true"></i>
|
||
<span class="menu-text">home</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/about/" title="about Lee" aria-label="about Lee">
|
||
<i class="fa-regular fa-user" aria-hidden="true"></i>
|
||
<span class="menu-text">about</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/contact/" title="contact Lee" aria-label="contact Lee">
|
||
<i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i>
|
||
<span class="menu-text">contact</span>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
</header>
|
||
|
||
|
||
<main id="main">
|
||
|
||
|
||
|
||
|
||
|
||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||
<article>
|
||
<h1 id="on-pronouns">on pronouns</h1>
|
||
|
||
<div class="post-metadata">
|
||
<p>
|
||
posted on
|
||
<time datetime="2023-12-22">December 22, 2023</time>
|
||
by Lee Cattarin
|
||
</p>
|
||
|
||
|
||
<ul class="post-tags">
|
||
|
||
<li>
|
||
|
||
<a href="/tags/gender/">gender</a>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
<img src="/img/starling.jpg" alt="Image unrelated to post. A starling, a beautifully iridescent black bird, stands on a hanging suet feeder." loading="lazy" decoding="async" width="1000" height="666">
|
||
|
||
|
||
<p>Created in cooperation with <a href="https://www.linkedin.com/in/julia-pinedo-094162117/" target="_blank" rel="external">Julia Pinedo</a>.</p>
|
||
<p>Adapted from a workplace session on pronouns and gender identity.</p>
|
||
<h2 id="what-are-pronouns">What are pronouns?</h2>
|
||
<p>and for that matter, what's gender?</p>
|
||
<h3 id="pronouns">Pronouns</h3>
|
||
<ul>
|
||
<li>Words used in place of nouns</li>
|
||
<li>English has 1st (I, we), 2nd (you), and 3rd (he, she, they, it) person pronouns
|
||
<ul>
|
||
<li>When we talk about pronouns in the context of gender identity, we’re referring to <strong>3rd person pronouns</strong> – words you use to talk about someone to another person</li>
|
||
<li>It is still always correct to use you/yours (2nd person) pronouns</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="ok-whats-gender">Ok, what's gender?</h3>
|
||
<ul>
|
||
<li>In English as well as some other languages, pronouns are <em>gendered</em>
|
||
<ul>
|
||
<li>Other languages may have more or fewer grammatical genders</li>
|
||
<li>Other cultures, particularly non-Western ones, may have more <em>social</em> genders</li>
|
||
</ul>
|
||
</li>
|
||
<li>One way we classify humans</li>
|
||
<li>Ostensibly related to biology, but mostly tied into gendered social norms</li>
|
||
<li>Everyone's got it!</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p><em>Gender</em> is derived from the Latin work <em>genus</em>, meaning “kind” or “type.” Gender is the social organization of bodies into different categories of people. In the contemporary United States, this sorting into categories is based on sex, but historically and cross-culturally there have been many different social systems of organizing people into genders.</p>
|
||
</blockquote>
|
||
<p>– Transgender History: the Roots of Today’s Revolution, Susan Stryker (she/her)</p>
|
||
<blockquote>
|
||
<p><em>Gender</em> literally means “kind” or “type” or “classification” – it’s related to words like <em>genre</em> and <em>general</em> – and has no necessary connection to real-world biology.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<h3 id="gender-terms">Gender terms</h3>
|
||
<ul>
|
||
<li><strong>Cisgender</strong>: someone who is the gender assigned to them at birth</li>
|
||
<li><strong>Transgender</strong>: someone who is a gender other than, or in addition to, the gender assigned to them at birth</li>
|
||
<li><strong>Nonbinary</strong>: an umbrella term or individual identity for anyone whose gender does not wholly and solely align with one binary gender
|
||
<ul>
|
||
<li><strong>Genderfluid</strong> and <strong>agender</strong> are two common nonbinary identities</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Two-spirit</strong>: an umbrella term for Indigenous people who fulfill traditional third-gender roles</li>
|
||
</ul>
|
||
<h2 id="a-brief-foray-into-history">A brief foray into history</h2>
|
||
<p>this is all new, right? ...right?</p>
|
||
<h3 id="alternate-pronouns-arent-new">Alternate pronouns aren't new</h3>
|
||
<blockquote>
|
||
<p>...Francis Brewster coined <em>E</em>, <em>es</em>, and <em>em</em> in 1841, and Charles Crozat Converse announced <em>thon</em> and <em>thons</em> in 1884...</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>...<em>ze</em> appears in 1864, introduced by someone known only by the initials J.W.L., and <em>hir</em> first popped up a century ago, invented, or at least introduced to readers in California, by the editor of the Sacramento Bee on August 14, 1920.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<ul>
|
||
<li>Even singular "they" which is seen as new has been in use since the 1300s - and predates singular "you"</li>
|
||
</ul>
|
||
<h3 id="fuss-over-pronouns-isnt-new">Fuss over pronouns isn't new</h3>
|
||
<blockquote>
|
||
<p>In 1916, when Jeanette Rankin, of Montana, became the first woman elected to the US House of Representatives, the <em>Minneapolis Star Tribune</em> ran this headline challenging the grammatical rule that says the masculine pronoun [he] can refer to women: “Can ‘She’ Be ‘He’, a Congressman, and Be Woman?” Pronouns aren’t just a part of speech. Pronouns are political.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<h3 id="trans-and-nonbinary-people-arent-new">Trans and nonbinary people aren't new</h3>
|
||
<blockquote>
|
||
<p>In 1841, Francis Brewster took time from his medical practice to write a grammar in which he labeled his new pronouns “masculor feminine.” <em>Masculofeminina</em> is Latin for “man-woman, or hermaphrodite<a href="#hermaphrodite">*</a>,” and Brewster’s use of this unusual term is the first hint at nonbinary gender in a grammar book.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<ul>
|
||
<li>Magnus Hirschfeld (1868 – 1935) was a German physician and sexologist credited with coining the term transvestite to describe people we would today likely consider transgender</li>
|
||
<li>Hirschfeld’s Institute for Sexual Research, opened in 1919 in Berlin, performed the first modern gender affirmation surgeries in 1930</li>
|
||
</ul>
|
||
<h3 id="history-repeats-itself">History repeats itself</h3>
|
||
<ul>
|
||
<li>Hirschfeld’s Institute was an early target of Nazi book burnings</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>Men seemed eager to blame women for the pronoun problem. If finding a new pronoun was the <em>job</em> of the women’s movement, then singular <em>they</em> was the <em>fault</em> of the women’s movement.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<h2 id="prescriptivism-and-descriptivism">Prescriptivism and descriptivism</h2>
|
||
<ul>
|
||
<li>Prescriptivism handles language from a top-down standpoint: it is defined by an authority, and we use it as defined</li>
|
||
<li>Descriptivism recognizes that we build our own language, and that authorities (like dictionaries) are just documenting its use</li>
|
||
<li>Language is built by and for us, to serve our needs</li>
|
||
<li>It has evolved to get to where we are now, and will continue to evolve
|
||
<ul>
|
||
<li><em>thou</em> used to be a singular <em>you</em>, which was plural-only</li>
|
||
</ul>
|
||
</li>
|
||
<li>Corporate environments are great examples of constantly shifting language – especially around our acronyms</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>Calling words “invented” makes them sound artificial. But word coining is a natural process, one that’s essential for any language to survive.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<h2 id="why-it-matters">Why it matters</h2>
|
||
<blockquote>
|
||
<p>…the use of appropriate pronouns has a positive impact on mental health, and the use of inappropriate pronouns can form part of a general pattern of harassment and abuse.</p>
|
||
</blockquote>
|
||
<p>– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)</p>
|
||
<ul>
|
||
<li>Misgendering is generally part of a larger pattern</li>
|
||
<li>Even if misgendering isn’t coming from a place of ill intent, consistent misgendering builds up to be very detrimental</li>
|
||
<li>Referring to people correctly shows respect and understanding - just like learning to pronounce an unfamiliar name</li>
|
||
<li>Nonbinary is not a monolith. No gender (experience, expression) is a monolith</li>
|
||
<li>Pronouns are just one small part of a much larger picture</li>
|
||
</ul>
|
||
<h2 id="pronoun-interactions">Pronoun interactions</h2>
|
||
<p>...and how do I help?</p>
|
||
<h3 id="introductions">Introductions</h3>
|
||
<ul>
|
||
<li>Introduce yourself with pronouns to set norms</li>
|
||
<li>Encourage, <em>but don’t force</em>, others to do the same</li>
|
||
<li><strong>Don’t single out the visibly trans person!</strong></li>
|
||
</ul>
|
||
<h3 id="corrections">Corrections</h3>
|
||
<h4 id="correcting-yourself">Correcting yourself</h4>
|
||
<ul>
|
||
<li>Repeat what you were saying with the correct pronoun</li>
|
||
<li>Respond with “thank you” to others’ corrections</li>
|
||
<li>Move on! Don’t make a big deal of it</li>
|
||
</ul>
|
||
<h4 id="correcting-others">Correcting others</h4>
|
||
<ul>
|
||
<li><em>Gently</em> interject with the proper pronoun</li>
|
||
<li>Talk to the speaker afterwards about their mistake – no shaming!</li>
|
||
<li>Check in with the person who was misgendered</li>
|
||
</ul>
|
||
<h3 id="digital-tools">Digital tools</h3>
|
||
<ul>
|
||
<li>Set your pronouns in Teams</li>
|
||
<li>Add pronouns to your email signature</li>
|
||
</ul>
|
||
<h3 id="practice"><em><strong>PRACTICE!</strong></em></h3>
|
||
<ul>
|
||
<li>Deliberately think or speak about a specific person using the correct pronouns</li>
|
||
<li>Use practice passages such as <a href="https://genderneutralpronoun.wordpress.com/about/alice/" target="_blank" rel="external">Alice in Wonderland Texts - Gender Neutral Pronoun Blog</a></li>
|
||
<li>Correcting others is actually great practice – it helps you be more aware of pronouns in speech</li>
|
||
<li>The key to success will be repetition and reinforcement</li>
|
||
<li>Mistakes are normal, and this <em>does</em> take effort</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>It is not unusual for speakers of English to find it difficult to switch pronouns about a person, because we (English-speakers) don’t have that many pronouns, historically, and we tend not to introduce new ones quite as often as we introduce, say, nouns.</p>
|
||
</blockquote>
|
||
<p>– pronouns 101: introduction to your loved one’s new pronouns, Kirby Conrod (they/them)</p>
|
||
<h2 id="more-scenarios">More scenarios</h2>
|
||
<p>beyond just "they"</p>
|
||
<h3 id="what-if-you-dont-know-someones-pronouns">What if you don't know someone's pronouns?</h3>
|
||
<ul>
|
||
<li>Use they/them/theirs - this is language you already use! e.g. "Someone left their phone here"
|
||
<ul>
|
||
<li>Note that if you <em>know</em> someone doesn't use they/them, this is misgendering - "they" is not always neutral</li>
|
||
</ul>
|
||
</li>
|
||
<li>Use the person’s name</li>
|
||
</ul>
|
||
<h3 id="multiple-pronouns">Multiple pronouns</h3>
|
||
<ul>
|
||
<li>Some people use multiple sets of pronouns</li>
|
||
<li>For some, there’s a preference; others like all offered sets equally
|
||
<ul>
|
||
<li>Ask if you aren’t certain!</li>
|
||
</ul>
|
||
</li>
|
||
<li>Using both/all sets offered at varying times can make the person feel seen
|
||
<ul>
|
||
<li>Don’t feel you need to alternate within one sentence or context – this can be confusing for you and others</li>
|
||
</ul>
|
||
</li>
|
||
<li>For some, using a more normative and a less normative pronoun can be a first step in coming out
|
||
<ul>
|
||
<li>It's often an attempt at authentically revealing a previously-hidden part of themself</li>
|
||
</ul>
|
||
</li>
|
||
<li>Ignoring a less normative set of pronouns in favor of the "easier" set can feel like ignoring part of that person</li>
|
||
</ul>
|
||
<h3 id="neopronouns">Neopronouns</h3>
|
||
<ul>
|
||
<li>Some people use pronouns other than he, she, they, or it</li>
|
||
<li>Because these pronouns are newer to the English language, they are termed “neopronouns”</li>
|
||
<li>Examples:
|
||
<ul>
|
||
<li>Ze/hir/hirs or ze/zir/zirs</li>
|
||
<li>Xe/xem/xyrs (or various other spellings)</li>
|
||
<li>Ey/em/eirs</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<p>While I can't speak for all neopronoun users, here are some of my personal reasons for using ze/hir in addition to he/him:</p>
|
||
<ol>
|
||
<li><strong>Reflect my own gendered identity.</strong> Personally, my experiences when others have used they/them for me have been negative. Especially early in transition and in times where I aligned more strongly with being a man, it often felt like a way for folks to avoid gendering me. Because of this, I still have a deep dislike towards being referred to with those pronouns. Ze/hir or other neopronouns reflect a strongly gendered nonbinary identity to me.</li>
|
||
<li><strong>Connect with queer history.</strong> My particular preference for ze/hir comes from <a href="https://www.lesliefeinberg.net/" target="_blank" rel="external">Leslie Feinberg's</a> use of these pronouns. I understand myself as in community with other queer/trans people and my pronoun usage reflects that.</li>
|
||
<li><strong>Encourage learning, curiosity, and willingness to play.</strong> I notice often that cisgender (non-trans) folks are so afraid of making mistakes that it hinders learning and growth. I want to encourage folks to try new things around me, and to be playful with language rather than afraid. I think our ability to adapt language to our needs is beautiful and powerful, and I want to encourage that.</li>
|
||
<li><strong>Pave the way for more vulnerable queer people to express themselves.</strong> As someone in a position of relative privilege, it is far easier for me to publicly use neopronouns than it may be for other queer/trans folks who find they align with neos. If someone has already seen me using neos, they are less likely to push back on the next person they see doing so - even if that means I am the one to deal with that pushback.</li>
|
||
<li><strong>Be more visible as a trans person.</strong> This ties back to (1). While some trans people prefer to fly under the radar so to speak and be read as a cis person of their gender, there is no cis version of "nonbinary". For me, being understood by others as a binary cis man feels stifling and incorrect. Neopronouns are one way to make my transness more visible as someone who is otherwise not always read as queer. And, as in (4), that visibility helps pave the way for others :)</li>
|
||
</ol>
|
||
<h3 id="any-all-pronouns">Any/all pronouns</h3>
|
||
<ul>
|
||
<li>Some people accept any pronouns for various reasons</li>
|
||
<li><strong>This is not an opportunity to ask them which ones they "really prefer"</strong></li>
|
||
</ul>
|
||
<h2 id="resources">Resources</h2>
|
||
<h3 id="books">Books</h3>
|
||
<ul>
|
||
<li>On pronouns:
|
||
<ul>
|
||
<li><a href="https://bookshop.org/p/books/what-s-your-pronoun-beyond-he-and-she-dennis-baron/8279940" target="_blank" rel="external">What's Your Pronoun?: Beyond He and She a book by Dennis Baron</a></li>
|
||
<li><a href="https://www.archiebongiovanni.com/they-them" target="_blank" rel="external">A Quick And Easy Guide To They/Them Pronouns — Archie Bongiovanni and Tristan Jimerson</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>On trans identity and history:
|
||
<ul>
|
||
<li><a href="https://bookshop.org/p/books/transgender-history-the-roots-of-today-s-revolution-susan-stryker/7605046" target="_blank" rel="external">Transgender History: The Roots of Today's Revolution by Susan Stryker</a></li>
|
||
<li><a href="https://bookshop.org/p/books/whipping-girl-a-transsexual-woman-on-sexism-and-the-scapegoating-of-femininity-julia-serano/7604121" target="_blank" rel="external">Whipping Girl: A Transsexual Woman on Sexism and the Scapegoating of Femininity by Julia Serano</a><a href="#transsexual">*</a></li>
|
||
<li><a href="https://bookshop.org/p/books/in-transit-being-non-binary-in-a-world-of-dichotomies-dianna-e-anderson/18114824" target="_blank" rel="external">In Transit: Being Non-Binary in a World of Dichotomies by Dianna E. Anderson and Emily Vanderwerff</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3 id="articles">Articles</h3>
|
||
<ul>
|
||
<li><a href="http://kirbyconrod.com/" target="_blank" rel="external">Prof. Kirby Conrod</a> is a nonbinary professor of linguistics
|
||
<ul>
|
||
<li><a href="https://kconrod.medium.com/pronouns-101-introduction-to-your-loved-ones-new-pronouns-3fef080266d0" target="_blank" rel="external">pronouns 101: introduction to your loved one’s new pronouns by Kirby Conrod</a></li>
|
||
<li><a href="https://kconrod.medium.com/pronouns-102-how-to-stop-messing-up-pronouns-9bd66911118" target="_blank" rel="external">pronouns 102: how to stop messing up pronouns by Kirby Conrod</a></li>
|
||
<li><a href="https://kconrod.medium.com/intermediate-pronoun-studies-reader-question-1-cd6063030a98" target="_blank" rel="external">Intermediate Pronoun Studies: pronouns conflicting with presentation by Kirby Conrod</a></li>
|
||
<li><a href="https://kconrod.medium.com/intermediate-pronoun-studies-multiple-pronouns-71e34cd28c54" target="_blank" rel="external">intermediate pronoun studies: multiple pronouns by Kirby Conrod</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="https://www.juliaserano.com/writings.html" target="_blank" rel="external">Julia Serano</a> writes eloquently on many aspects of transness, especially as it interacts with science</li>
|
||
<li><a href="https://www.npr.org/2020/06/02/867780063/4-ways-to-make-your-workplace-equitable-for-trans-people" target="_blank" rel="external">How to be a trans ally at work : Life Kit : NPR</a></li>
|
||
</ul>
|
||
<h3 id="other-resources">Other resources</h3>
|
||
<ul>
|
||
<li><a href="https://www.gendercensus.com/" target="_blank" rel="external">Gender Census</a> catalogs the words nonbinary people use for themselves</li>
|
||
<li><a href="https://pronouns.page/" target="_blank" rel="external">Pronouns.page</a> has resources on pronouns and gender-neutral language in multiple languages</li>
|
||
<li><a href="https://www.genderpodcast.com/" target="_blank" rel="external">GENDER REVEAL</a> is a podcast with a different trans guest each episode – an excellent look into the diversity of trans experiences</li>
|
||
<li><a href="https://franny.itch.io/parlare-gender-neutral-pronoun-app?secret=toQDv9bqZ1Cj63gGV9kBd9VVLY" target="_blank" rel="external">Parlare by franny</a>, an app that teaches gender-neutral pronoun use</li>
|
||
</ul>
|
||
<h2 id="asides">* asides</h2>
|
||
<h3 id="hermaphrodite">hermaphrodite</h3>
|
||
<p>not currently considered polite by some; do not use it for others unless they use it for themselves</p>
|
||
<h3 id="transsexual">transsexual</h3>
|
||
<p>not currently considered polite by some; do not use it for others unless they use it for themselves</p>
|
||
|
||
</article>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<nav aria-label="pagination">
|
||
<ol class="pagination post-pagination">
|
||
|
||
<li class="older">
|
||
<a href="/stephanie-collar/">
|
||
<i class="fa-solid fa-hand-point-left" aria-hidden="true"></i> stephanie collar
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class="newer">
|
||
<a href="/circle-bag/">
|
||
circle bag <i class="fa-solid fa-hand-point-right" aria-hidden="true"></i>
|
||
</a>
|
||
</li>
|
||
|
||
</ol>
|
||
</nav>
|
||
|
||
|
||
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
<section class="related-posts">
|
||
<h2 id="related-posts">related posts</h2>
|
||
<ol id="postlist">
|
||
|
||
<li class="post">
|
||
<a class="postlink" href="/fishhook-pride-keychains/">
|
||
|
||
<img src="/img/fishhook-keychain-nonbinary.jpg" alt="a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors." loading="lazy" decoding="async" width="1000" height="750">
|
||
|
||
<h2 id="fishhook-pride-keychains">fishhook pride keychains</h2>
|
||
<ul class="postlist-tags">
|
||
|
||
<li>leather</li>
|
||
|
||
<li>gender</li>
|
||
|
||
</ul>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="post">
|
||
<a class="postlink" href="/queer/">
|
||
|
||
<img src="/img/queer-print.jpg" alt="A print of the word queer in black ink. The letters are rounded with elongated oval negative space." loading="lazy" decoding="async" width="1000" height="750">
|
||
|
||
<h2 id="queer">queer</h2>
|
||
<ul class="postlist-tags">
|
||
|
||
<li>print</li>
|
||
|
||
<li>card</li>
|
||
|
||
<li>sticker</li>
|
||
|
||
<li>pin</li>
|
||
|
||
<li>gender</li>
|
||
|
||
</ul>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="post">
|
||
<a class="postlink" href="/gender-as-a-proxy-variable/">
|
||
|
||
<img src="/img/gender-zine-cover.png" alt="Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding." loading="lazy" decoding="async" width="1000" height="444">
|
||
|
||
<h2 id="gender-as-a-proxy-variable">gender as a proxy variable</h2>
|
||
<ul class="postlist-tags">
|
||
|
||
<li>gender</li>
|
||
|
||
<li>zine</li>
|
||
|
||
</ul>
|
||
</a>
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
</section>
|
||
|
||
|
||
</heading-anchors>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<ul>
|
||
<li>
|
||
<a href="/colophon" title="colophon" aria-label="colophon">
|
||
colophon
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/" title="go home" aria-label="go home | hello hello from Lee Cattarin in 2026">
|
||
hello hello from Lee Cattarin in 2026</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://heckin.technology/inherentlee/leecat.art" title="source code" aria-label="source code" target="_blank" rel="external">
|
||
src
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</footer>
|
||
|
||
|
||
<!-- This page `/on-pronouns/` was built on 2026-02-20T16:46:10.305Z -->
|
||
<body>
|
||
</body></body> |
