Skip to content

Commit

Permalink
simplify
Browse files Browse the repository at this point in the history
  • Loading branch information
@garbados
garbados committed Nov 1, 2017
1 parent 573dbd5 commit a6570fb
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.dat
194 changes: 194 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hall of Gender Forms</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/bulma.css">
</head>
<body>
<section class="section hero is-info" id="header">
<div class="hero-body">
<div class="container">
<h1 class="title">
Hall of Gender Forms
</h1>
<h2 class="subtitle">
A collection of approaches.
</h2>
</div>
</div>
</section>
<section class="section">
<div class="container" id="bad-approach">
<div class="notification is-danger">
<h3 class="title">
This is a bad approach.
</h3>
</div>
<div class="box">
<div class="field">
<label class="label">Select a gender:</label>
<div class="control">
<button class="button">Male</button>
<button class="button">Female</button>
</div>
</div>
</div>
<div class="content">
<p>
It is a bad approach because gender is not a binary state.
(Please get over it.)
</p>
</div>
<article class="message is-warning">
<div class="message-header">
<p>
"But it's a boolean in the database! A migration would be unthinkable!"
</p>
</div>
<div class="message-body">
So whatcha gonna tell
<a href="http://www.npr.org/sections/thetwo-way/2017/06/16/533207483/oregon-adds-a-new-gender-option-to-its-driver-s-licenses-x">the state of Oregon</a>
when their contract's on the line?
How about
<a href="http://time.com/4915330/canada-passports-gender-x-option/">Canada</a>?
</div>
</article>
</div>
</section>
<section class="section">
<div class="container" id="worse-approach">
<div class="notification is-danger">
<h3 class="title">
This is worse.
</h3>
</div>
<div class="box">
<div class="field">
<label class="label">Select a gender:</label>
<div class="control">
<button class="button">Male</button>
<button class="button">Female</button>
<button class="button">Transgendered</button>
</div>
</div>
</div>
<div class="content">
<p>
Trans people are not a special case.
</p>
</div>
<article class="message is-warning">
<div class="message-header">
<p>
"Well, we really just want to tell us which kind of junk you have."
</p>
</div>
<div class="message-body">
If you mean to be asking about someone's sex, mind you that it isn't a binary either. The scope of sexual dimorphism in humans is vast and little understood.
</div>
</article>
</div>
</section>
<section class="section">
<div class="container" id="not-better-approach">
<div class="notification is-warning">
<h3 class="title">
You cannot beat this problem with long lists.
</h3>
</div>
<div class="box">
<div class="field">
<label class="label">Select a gender:</label>
<div class="control">
<button class="button">Agender</button>
<button class="button">Androgyne</button>
<button class="button">Androgynous</button>
<button class="button">Bigender</button>
<button class="button">Cis Female</button>
<button class="button">Cis Feminine</button>
<button class="button">Cis Male</button>
<button class="button">Cis Masculine</button>
<button class="button">Cis Woman</button>
<button class="button">Demigirl</button>
<button class="button">Demiguy</button>
<button class="button">Female</button>
<button class="button">Feminine</button>
<button class="button">Femme</button>
<button class="button">Genderqueer</button>
<button class="button">Genderweird</button>
<button class="button">Gender Fluid</button>
<button class="button">Intergender</button>
<button class="button">Intersex</button>
<button class="button">Male</button>
<button class="button">Man</button>
<button class="button">Masculine</button>
<button class="button">Neutrois</button>
<button class="button">Nonbinary</button>
<button class="button">Other</button>
<button class="button">Pangender</button>
<button class="button">Third Gender</button>
<button class="button">Trans Female</button>
<button class="button">Trans Male</button>
<button class="button">Trans Man</button>
<button class="button">Trans Feminine</button>
<button class="button">Trans Femme</button>
<button class="button">Trans Woman</button>
<button class="button">Woman</button>
</div>
</div>
</div>
<div class="content">
<p>
Gender is indeterminate.
</p>
</div>
</div>
</section>
<section class="section">
<div class="container" id="getting-better">
<div class="notification is-success">
<h3 class="title">
A person must speak for themselves.
</h3>
</div>
<div class="box">
<div class="field">
<label class="label">Please enter your gender:</label>
<div class="control">
<input class="input" type="text" placeholder="However you can manage to express it, friendo.">
</div>
</div>
</div>
<div class="content">
<p>
Accept that anything is possible.
</p>
</div>
<article class="message is-info">
<div class="message-header">
<p>
"What about attackers with a gigabyte of gender?"
</p>
</div>
<div class="message-body">
Set a maximum length of a few hundred characters. Who cares? Disk is cheap.
</div>
</article>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Hall of Gender Forms</strong>
by
<a href="https://github.com/garbados/">Diana Thayer</a>
</p>
</div>
</div>
</footer>
</body>
</html>

0 comments on commit a6570fb

Please sign in to comment.