Sylvia Lilith

@estrogen-and-spite

The implied bitch

She/It
linktr.ee/estrogenandspite

I have no idea what I’m doing and you can’t stop me.

Author, Trans Woman, Hypno Domme, Hopeless Romantic, Sadist, newly out system.

Pronouns are She/It, perpetually happy HRT gave me titties and sad it didn’t give me tentacles.

I had shame once.

Θ Δ

Dating: @lunasorcery

18+ only

Sylvia Lilith @estrogen-and-spite2/24/2024, 1:02 AM

beth (defunct)@bethposting

eevee @lexyeevee7/26/2023, 11:11 PM

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>

<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>

#css crimes #The Cohost Global Feed

You must log in to comment.

in reply to @lexyeevee's post:

Birdout: Paradise @SomeEgrets7/26/2023, 11:18 PM

i wonder if unicode play or black right-pointing triangle would be easier for the poly(new) flag? would probably be easier to fit+centre without the rotation/scale transformations?

@lexi7/26/2023, 11:18 PM

problem with unicode is that its handled by fonts, and fonts tend to be wildly different even though they should look the same lol

Gabu!! ☁️ ΘΔ @gabu7/26/2023, 11:22 PM

maybe replacing them with inline SVG would be more consistent across different systems?

eevee @lexyeevee7/26/2023, 11:35 PM

ah! but then you might start to question why you're not just making the whole flag in svg, a much more appropriate format

Irenes (many)@ireneista7/27/2023, 3:54 AM

wait, right

Birdout: Paradise @SomeEgrets7/26/2023, 11:48 PM

ah yeah i was definitely approaching it from the side of "using a character to kinda make this hack work" instead of explicitly drawing an exact shape

luna @lunasorcery7/26/2023, 11:18 PM

My css is very rusty but I feel like you could do the poly heart using the transparent border trick for the right-side triangle part, and a pair of spans with border-radius for the left-side rounded parts? Saves you having to be dependent on vendor-specific text rendering / glyphs.

eevee @lexyeevee7/26/2023, 11:34 PM

you can absolutely (ha) do that, but then you're up to like... six nested spans, which seems a little excessive

@lexi7/26/2023, 11:22 PM

commit 0000 (HEAD -> feat-aroace, origin/feat-aroace)
Author: lexi <cohost.org/lexi>
Date: Thu Jul 27 01:20:37 2023 +0200

PR (#1): add aroace flag

<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, #ef9007 0% 20%, #f6d317 20% 40%, white 40% 60%, #45bcee 60% 80%, #1e3f54 80% 100%);
"></span>

godspeed you! big animal @niss7/26/2023, 11:23 PM

nether "aquafresh" lands

eevee @lexyeevee7/26/2023, 11:33 PM

neither...?

godspeed you! big animal @niss7/26/2023, 11:35 PM

sorry i mean like. the aquafresh flag looks like the netherlands

uh anyway! these are cute. thanks for posting them

eevee @lexyeevee7/26/2023, 11:35 PM

OH lmao i thought you were telling me the joke didn't land

yeah red/white/blue is a popular combo

abadidea @0xabad1dea7/28/2023, 6:28 AM

reporting in from the proud nation of aquafresh

eevee @lexyeevee7/28/2023, 6:30 AM

i like the look of your prime minister

ira 🌷🐰@irina7/27/2023, 5:01 AM

luxembourg is a joke to you? that's right! they're a joke to everyone

h-land @h-land7/27/2023, 10:51 AM

oh. yeah, i already made my own comment on it, but

the blue leaning ever so slightly toward green makes it more luxembourg than netherlands imo

Izvy Raspberry @Izvy7/27/2023, 12:03 AM

I love the inclusion of the gay flag, but like for dudes. There is one flag that never ends up on these lists that has a much longer and more storied history. If you were to add a bear flag I'd 100% add it to my bio. I dont even care if it has the pawprint.

It's like the gay flag, but like, for not twinks

emma @trilobite7/27/2023, 12:14 AM

I think in this case if you want it without the pawprint, u would just replace the colors of the agender flag with the relevant hex codes (same equal size seven stripe pattern)

sourcing from here https://www.flagcolorcodes.com/international-bear-brotherhood we get:

<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, #613704 0% 14.3%, #D46300 14.3% 28.6%, #FDDC62 28.6% 42.9%, #FDE5B7 42.9% 57.1%, white 57.1% 71.4%, #545454 71.4% 85.7%, black 85.7% 100%);
"></span>

eevee @lexyeevee7/27/2023, 12:15 AM

alas! no html in comments

also there is 🐾 for overlaying purposes, i suppose

emma @trilobite7/27/2023, 12:16 AM

damnit! lexi seemed to figure it out how to display the code at least. so it goes.

eevee @lexyeevee7/27/2023, 12:17 AM

oh, yes, triple-backticks to make a code block should still work

unfortunately i cannot demo this because the triple-backticks are eaten

emma @trilobite7/27/2023, 12:21 AM

thats the ticket! tysm!

@lexi7/27/2023, 12:42 AM

```
you can escape this with \es though! this code block is written as \`\`\`, which in turn is written as \\\`\\\`\\\`. just escaping *inside* code blocks is hard, but as long as it's not in a code block you can escape to your heart's content

eevee @lexyeevee7/27/2023, 12:44 AM

but i wanted to do it in a code block

wait

```
i could just do this actually
```

@lexi7/27/2023, 12:46 AM

wait. how did you do that?

eevee @lexyeevee7/27/2023, 12:47 AM

the original way of doing a code block in markdown: indenting it

@lexi7/27/2023, 12:49 AM

omg how did i forget that

Izvy Raspberry @Izvy7/27/2023, 12:16 AM

Utterly destroyed 😔 but thank you for the effort

emma @trilobite7/27/2023, 12:22 AM

Give it a go now!

Izvy Raspberry @Izvy7/27/2023, 12:27 AM

Ahh thank you! It works in posts but it looks like in line css doesnt work in bios? Disappointing but I could probably find an svg for that or something

Joy @ahoyitsjoy7/27/2023, 12:43 AM

These are so cool! Thank you for making them! I actually love the faint inner white border.

eevee @lexyeevee7/27/2023, 12:45 AM

thanks! i once used an old icon set that included flags with a similar effect and i thought it was really nice. gives it a vague sense of being a Thing rather than just a pattern of colors

Camryn @Camryn7/27/2023, 12:44 AM

I wish the new poly flag didn't remind me so much of fandom wiki branding

Amaya’s Den 🍂@amayasnep7/27/2023, 12:59 AM

Now do the nonhuman unity flag >:3

eevee @lexyeevee7/27/2023, 1:03 AM

at this scale that middle bit would just look like ⚫ haha

@Radionaut7/27/2023, 1:22 AM

can you add the yugoslav flag

fae of the seelie court @seeliefae7/27/2023, 3:28 AM

hmmmm I wonder if I can make the old intersex flag designed by Natalie Phox

    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, #e9adf9 0% 16%, white 16% 32%, #a1cdee 32%, #a1cdee, #f0b7d6, #f0b7d6 68%, white 68% 84%, #e9adf9 84% 100%);
"></span>```

Plum @plumpan7/27/2023, 4:51 AM

Old firefox destroying this post something fierce

I don't know why the image embed is breaking today, send me back to chosting baby jail

eevee @lexyeevee7/27/2023, 5:24 AM

oops lol, i guess aspect-ratio is still relatively recent

i think you made an empty link? slap that bang in front

saori @gayanimegirl7/27/2023, 4:56 AM

god, gradients are my favorite part of css that i always forget about

eevee @lexyeevee7/27/2023, 4:59 AM

they can do so much i love them

@cofruitrigus7/27/2023, 7:16 AM

border: 1px solid #666;

Bottoms up and the devil laughs

h-land @h-land7/27/2023, 10:50 AM

aquafresh? that's luxembourg!

Cass @BetweenTheStars7/27/2023, 11:05 PM

Thank you for sharing how to do this!

Rosie @flowerpower7/27/2023, 11:55 PM

how did poly flag go from a fraternity to a carribean nation

Lena Hojoz @PuncakeLena7/28/2023, 7:39 PM

I think you'll find the last one is the "prinsenvlag"

Hx Or-Fi-S @Or-Fi-S7/28/2023, 7:42 PM

i'm glad you recognize the superiority of new polyam flag and also included it. :eggbug-relieved:

Mightfo @Mightfo8/19/2023, 6:36 PM

Made some more for fun!

Only just now realized you cant put html in comments, ah well... at least now I can slap these somewhere sometime.

Femboy
<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, #d260a5 0% 14.3%, #e4afcd 14.3% 28.5%, white 28.5% 43%, #57cef8 43% 57%, white 57% 71.4%, #e4afcd  71.4% 85.7%, #d260a5 85.7% 100%);
"></span>

Butch
<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, #d62c00 0% 14.3%, #f07528 14.3% 28.5%, #ff9b57 28.5% 43%, #fffcee 43% 57%, #ffcd88 57% 71.4%, #ffad09 71.4% 85.7%, #a16f00 85.7% 100%);
"></span>

GNC
<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, #50284c 0% 14.3%, #96477a 14.3% 28.5%, #5d96f7 28.5% 43%, #ffe6f8 43% 57%, #5d96f7 57% 71.4%, #96477a 71.4% 85.7%, #50284c 85.7% 100%);
"></span>

Demi
<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, #818181 0% 14.3%, #c6c6c6 14.3% 28.5%, #fbff76 28.5% 43%, #ffffff 43% 57%, #fbff76 57% 71.4%, #c6c6c6 71.4% 85.7%, #818181 85.7% 100%);
"></span>

Pinned Tags

Sylvia Lilith

@estrogen-and-spite

The implied bitch

css pride flags

in reply to @lexyeevee's post: