Ezequiel

@Matytoonist

Bnnuy brainrot(?

He/Him
matytoonistarchive.neocities.org/

19yo argentinian cis guy
Things i like range from art, to software, to DIY electronics, and whatever current project im having

big button that reads "powered by linux" featuring Xenia's left eye from the original drawing om the left
button that reads "bunny browser" parodying the netscape logo with a rabbit siluette

Ezequiel @Matytoonist9/1/2023, 3:23 PM

eevee @lexyeevee

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

Ezequiel

@Matytoonist

Bnnuy brainrot(?

css pride flags

in reply to @lexyeevee's post: