Sorry! This post has been deleted by its original author.
- he/it/they
- watashinokoko.carrd.co/
year 2000
system
i like languages and art
mi lernas esperanto kaj 日本語
Glorious Trainwrecks (Games)
www.glorioustrainwrecks.com/my music compilation site
mikoto.neocities.org/
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 Eggbug Times
the fourth website to ever exist
Local Poster Makes Newspaper Template
"Figured it might come in handy," she says
Prolific repeat poster 0xabad1dea announced Friday that she had developed a newspaper template for cohost instead of playing Pokemon Violet even though the cartridge is right there. "It just seemed like the thing to do," she said. Witnesses report that she sat there fiddling with it for an inordinate amount of time and opened like nine tabs about CSS properties because she's really rusty. Oh it's eleven now. Oh no.
"I'm going to actually go play Pokemon now, I swear," she was heard saying before actually proceeding to come up with more text to make the sample columns longer. "It just needs a bit more so that it looks like a proper newspaper. I had chicken soup with rice for dinner, it was nice. It's rainy and cold today. This is my favorite twitter alternative on the Citadel."
Testimony indicates that anyone can copy-paste this post to make their own newspaper, but this power must be used with responsibility. Interested readers can find the raw html at this github gist.
0xabad1dea contributed to reporting.
hey new kids this may help