Did you know that poison ivy is a fae plant? If you stumble into it, it will change your pronouns...
To it/she
did you know that with css you can just make whatever little inline pride flag you want and i think that's pretty cool even if none of these particular ones are about me specifically wait a second that last one is aquafresh
here are some flags. expand for html. the nice part is that you can fiddle with the styling however you like; if you hate my faint inner white border then just delete it. alternatively you can prototype your own flag right from cohost!
rainbow
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #e50000 0% 16.7%, #ff8d00 16.7% 33.3%, #fe0 33.3% 50%, #028121 50% 66.7%, #004cff 66.7% 83.3%, #708 83.3% 100%);
"></span>
bi
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #d60270 0% 40%, #9b4f96 40% 60%, #0038a8 60% 100%);
"></span>
pan
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #ff1c8d 0% 33.3%, #ffd700 33.3% 66.7%, #1ab3ff 66.7% 100%);
"></span>
lesbian
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #d62800 0% 20%, #ff9b56 20% 40%, white 40% 60%, #d462a6 60% 80%, #a40062 80% 100%);
"></span>
gay (but like, for dudes)
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #078d70 0% 14.3%, #26ceaa 14.3% 28.6%, #98e8c1 28.6% 42.9%, white 42.9% 57.1%, #7bade2 57.1% 71.4%, #5049cc 71.4% 85.7%, #3d1a78 85.7% 100%);
"></span>
ace
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, black 0% 25%, #a4a4a4 25% 50%, white 50% 75%, #810081 75% 100%);
"></span>
trans
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #5bcffb 0% 20%, #f5abb9 20% 40%, white 40% 60%, #f5abb9 60% 80%, #5bcffb 80% 100%);
"></span>
nonbinary
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #fcf431 0% 25%, #fcfcfc 25% 50%, #9d59d2 50% 75%, #282828 75% 100%);
"></span>
agender
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, black 0% 14.3%, #bababa 14.3% 28.6%, white 28.6% 42.9%, #baf484 42.9% 57.1%, white 57.1% 71.4%, #bababa 71.4% 85.7%, black 85.7% 100%);
"></span>
genderfluid
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #fe76a2 0% 20%, white 20% 40%, #bf12d7 40% 60%, black 60% 80%, #303cbe 80% 100%);
"></span>
genderqueer
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #b57fdd 0% 33.3%, white 33.3% 66.7%, #49821e 66.7% 100%);
"></span>
intersex
i took a little liberty with the size of the circle to make it readable at this small size
<span style="
display: inline-grid;
place-items: center;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: #ffd800;
"><span style="display: block; height: 75%; aspect-ratio: 1; border: 2px solid #7902aa; border-radius: 100%;"></span></span>
π poly (old, bad)
this one uses an actual pi character, so your mileage may vary. of course it's not really correct anyway since the π is only supposed to be visible on the red part, but i blew it up a bit so it's not 3 pixels tall
<span style="
display: inline-grid;
place-items: center;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1ex;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, blue 0% 33.3%, red 33.3% 66.7%, black 66.7% 100%);
font-weight: bold;
color: yellow;
">π</span>
poly (new, good, more complicated tho)
positioning that heart was not easy, and it's a literal heart symbol so i can't guarantee anything about the rendering for anyone else
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #009fe3 0% 33.3%, #e50051 33.3% 66.7%, #340c46 66.7% 100%);
">
<span style="display: block; position: absolute; top: -0.666em; left: -0.333em; border: 1em solid white; border-color: transparent white; border-right: none;"></span>
<span style="display: block; position: absolute; bottom: 100%; text-align: center; font-size: 0.4em; transform-origin: bottom center; transform: translate(0.4rem, 0.333rem) rotate(-90deg) scaleX(1.5); color: #fcbf00;">♥</span>
</span>
aro
<span style="
display: inline-block;
height: 1rem;
aspect-ratio: 3 / 2;
line-height: 1;
vertical-align: middle;
border: 1px solid #666;
border-radius: 1px;
box-shadow: inset 0 0 1px #fff, 0 1px 2px #0004;
background: linear-gradient(to bottom, #3ba740 0% 20%, #a8d47a 20% 40%, white 40% 60%, #ababab 60% 80%, black 80% 100%);
"></span>
If you add in this clip path and adjust the height to 1.5rem and aspect-ratio to 1/1 (alt: replace aspect-ratio entirely with width: 1.5rem), you can also make some hearts! I recommend also removing the border for this, since CSS borders do not follow clip path.
clip-path: path('M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z');
(The clip path could be adjusted to work with a 1rem height, but I feel like larger looks nicer personally)
it's not quite the same and it makes the source even wordier, but,
you can sort of fudge the border and drop-shadow with a filter if you want. restoring the inner white glow (without a mess of extra elements) is, uhhh, left as an exercise to the reader
<span style="
display: inline-block;
width: 1.5em; height: 1.5em;
line-height: 1; vertical-align: middle;
filter: drop-shadow(0 0 1px black) drop-shadow(0 1px 2px #0004);
"><span style="
display: block; width: 100%; height: 100%;
background: linear-gradient(to bottom, #5bcffb 0% 20%, #f5abb9 20% 40%, white 40% 60%, #f5abb9 60% 80%, #5bcffb 80% 100%);
clip-path: path('M 12 4.248 c -3.148 -5.402 -12 -3.825 -12 2.944 c 0 4.661 5.571 9.427 12 15.808 c 6.43 -6.381 12 -11.147 12 -15.808 c 0 -6.792 -8.875 -8.306 -12 -2.944 Z');
" aria-label="transgender pride heart"></span>
</span>
edit: and of course you can use background-clip: text; 🦄
to make whatever pride emoji silhouette you want. 🧡
including a heart!
<span style="
display: inline-block;
font-size: 1.5em;
line-height: 1; vertical-align: middle;
filter: drop-shadow(0 0 1px black) drop-shadow(0 1px 2px #0004);
"><span style="
background: linear-gradient(to bottom, #5bcffb 0% 20%, #f5abb9 20% 40%, white 40% 60%, #f5abb9 60% 80%, #5bcffb 80% 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
" aria-label="transgender pride unicorn">🦄</span>
</span>
The mouse
She destroyed her cage
Yes
YES
The mouse is out
(with apologies to Nael)
This post doesn't contain 18+ content. We're not hiding it according to your content preferences, either. We just don't think you can handle it.
This post contains content. This post contains this post content. Can you this post contains content.
This post ▙▄ ▛
▙▟ ▙▄ content. We're H̶̢͕͉̓́Ǔ̶̟̞̳̩̹̖̼͓̩̩̺̻͎̭̂͊̅͆͐̓̀̕͘͝͠ͅṞ̵̛̛͎̘̲̖̄̀̈̒T̷͖͎̥̮̙̣̫̠̱̰̀͂̄̊́͑̏͊̀͗͝Ī̸͙̖̘̪̺̥̋̅̾̃͋͑̈̚͘Ṇ̷̨̥̦̱̰̦́͐̒̇͘͜͝͝͝͝ͅG̸̤͑͌͋͑͂̓́̕͘͠ ̴̛̟̠̰̯̞̰͇́̊̽͛̋͋̿̈́͠͝I̷̡̧̠͖̙̠͎̤͕͚͔̞̩̖̟͐̒̿̂͒̉͊̋̈̎̈́̾͠T̶̨̧̪̝̙̬͈̮̟̋̈ ̴̘͇̗̳͇̫͐͆̄̽̍Ḥ̸̡̣͉̹̭͈͕̗̪̹̅̊̉͜U̶̧̼͖̺̪͉̠̘͉̭̮̺̓̿̄̆̂̆̿̍̅͆͆̀̉͂̚Ŗ̶̡̗̺̤͍͇͓̪͔̇͒́͛̀͐͑͛̐̊͝ͅT̶̠̰̤̘̯̐̍̽͊̀̏͊̒͝S̸̡̛̼̼̜̱̘̯̦̰͉̳. Your mind I҈̸T҈҈ C̴҉A̶҈N҉̵T̷̶ help you now.
IN SHOCK AND AWE ITS GRUESOME MAW TEARS THROUGH SOULS WITH RAGGED CLAW BLOOD DIVINE AND SCREAMING LIGHT FILLS THE WIND AND AIR TONIGHT DREADFUL TEARS, THE DRAGON LEERS HALTS THE WORLDS GRINDING GEARS AN AWFUL SIGHT, THE ASH BURN BRIGHT I THINK WE SET THE WORLD ALIGHT
- Birds are dinosaurs: Comforting, joyful. Accepted and liked by most people. A little tartness in your sweet.
- Trees are a lifestyle, not a clade: Mildly unsettling. Generally tempered by how plant evolution is impossible to understand. The slight pleasant bitterness of a good cup of coffee.
- Snakes are lizards: Of course they are. You know this in your heart already. Nobody is bothered by this. A squeeze of lemon on fish.
- Tuataras aren't lizards: Only disturbing to a very specific kind of person. Like finding a dog-ear in a library book.
- Mosasaurs are lizards: A delicious little morsel. Fun for the whole family. They're varanids! They're big monitors going for a permanent swim. The crackling sensation of a Pop Rock.
- Insects are crustaceans: The New Coke of phylogenetic facts.
- Horseshoe crabs are chelicerates, not crustaceans, and thus most closely related to spiders and scorpions: The Pepsi of phylogenetic facts.
- Barnacles are crustaceans: Ohoho. Hohohoh. Now we're getting a little spicy. Now it's a little hot in here.
- Echinoderms are bilaterians: As in, starfish are part of the animal group characterized by having two symmetrical sides. Their embryos curl up in a complicated and impractical way to grow their entire radially symmetric body out one side. This is spicy, but rarefied, like a little horseradish in your sandwich.
- Echinoderms are more closely related to vertebrates (and their close relatives) than to anything else: Fairly messed up. The big division among complex animals is "do you develop asshole-first, or mouth-first"? Starfish live with us in the asshole-first clade. A slightly-too-generous dab of slightly-too-hot sauce.
- Fungi are more closely related to animals than plants: Anything having to do with fungi is inherently unsettling. The tartness of sour candy.
- Sharks have been around longer than trees: Not a phylogenetic fact, but it hits in a similar way. Like szechuan peppercorns to hot peppers.
- Tuna are more closely related to humans than to sharks: Like going into a corkscrew on a moderate rollercoaster. The world falling away a bit as your perspective gets twisted around.
- Whales are ungulates: Squirming, unpleasant, dry in the mouth. Inexplicably much more offputting than "mosasaurs are lizards." All the wasabi for your sushi meal in one hit.
- Salps are chordates: You are more closely related to a gelatinous colonial organism than to 95% of animal species on earth. A wasp's sting while you're trying to eat a fig.