hal

Ikeda Riyoko—perhaps the most famous member of the “year 24 group” that played a large part in creating the foundations of the shoujo manga genre—is often credited with laying the groundwork for depictions of queer characters in shoujo, and in particular with creating the archetype of the gender-bending heartthrob heroine, or “girl prince.” Building on earlier representations of butch or transmasculine characters in early shoujo manga such as Princess Knight, and the Takarazuka theater tradition of the otokoyaku male role actor, Ikeda’s enormously popular gender non-conforming heroes—Lady Oscar from The Rose of Versailles, Rei from Dear Brother, Julius from the Window of Orpheus, and the titular character of Claudine—helped to establish that there was a major mainstream audience excited to cheer for a hotheaded, androgynous tomboy with a heart of gold. Lady Oscar in particular has fingerprints all over the history of anime and manga, from a gender-bending cameo in Pokémon to serving as the inspiration for iconic characters like Tenjou Utena.

When I first read The Rose of Versailles last year, I expected its depictions of queer and transmasculine characters to be somewhat limited—after all, the comic was written for mainstream audiences and a mainstream publisher in the 1970s. But across Ikeda’s work, I was deeply surprised with the level of care and nuance with which Ikeda approaches transmasculine love stories. While there is obviously a lot about Ikeda’s portrayal of transmasculine characters that feels dated to modern audiences (for example, her comics often do fall back on “biological” ideas of women’s weakness and emotionality, and sometimes psychologize her character’s genders in uncomfortable ways), I was surprised by how much of these comics still hit for me today. What makes them work for me is both the extreme pathos with which Ikeda writes transmasculine character’s experiences of rejection—and, at rare moments, gender euphoria —but also the fact that her trans characters are not simply given a one-size fits all born-in-the-wrong-body narrative. Instead, they are each portrayed as unique individuals with varied personal relationships to their gender, their sexuality, and the historical context of the society they live in.

https://www.animefeminist.com/transmasculinity-and-queer-sexuality-in-the-works-of-ikeda-riyoko/

#riyoko ikeda #shoujo #dear brother #oniisama e #rose of versailles #Berubara #versailles no bara #lady oscar

@astr-hal shared with:

#save

hal @astr-hal2/28/2024, 4:23 PM

Lily Valeen @ItsMeLilyV

Cassandra Matthews @ctmatthews2/28/2024, 12:47 PM

The game development articles and resources that helped me

I've been making games for a very long time at this point, so here are the game development articles and resources that have helped me the most over the years. I kept putting off writing this post because I was worried I'd accidentally forget a really good article or two, but I can always just go back and edit them in when I inevitably remember them later.

Anyway, here they are, roughly organized by topic. I hope they help you as much as they helped me!

Gameplay programming

Sonic Physics Guide - A resource on the Sonic Retro wiki that explains how the classic 2D Sonic the Hedgehog games implemented their movement and physics code. It does a great job of demystifying the whole process, especially for people who have only ever coded platformers using a physics engine's built-in capsule colliders and so on.

Just play games and study them frame-by-frame, either by recording your gameplay and watching the video footage or by using an emulator with a Frame Advance feature. It's an important resource for seeing how things work!

#gamedev #Blog post

@astr-hal shared with:

#save

hal @astr-hal2/26/2024, 8:15 AM

Millennium @milliesquilly

Millennium @milliesquilly2/26/2024, 7:04 AM

advice for new cohost users

why not channel all your high energy and emotions into making increasingly intricate projects in Decker, the delightful hypercard-esque multimedia platform for your personal computer, developed by cohost's own @internet-janitor!

For example, you could make 18 zines and counting over a period of 15 months, plus work on jam projects such as elaborate synthesizer software and embarrasingly personal visual novels.

anyway, zine 19 is in progress!

#decker #zine #e-zine #The Cohost Global Feed

@astr-hal shared with:

#save

hal @astr-hal2/25/2024, 2:55 PM

CharLatte @princess-sheep

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

css pride flags

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

🩷 Mina 💜@Minalien7/27/2023, 1:51 AM

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)

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

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>

#css crimes

astra★@lunettian7/27/2023, 5:03 AM

haha sweet

💯
💯
💯

@astr-hal shared with:

#yayy #save

Pinned Tags