Zephiris - Another Transfem Programmer

See : https://jfyfractal3.tumblr.com/image/739612919646568448

I wanna see how much of the tumbr user base is queer so I made this 😋

Reblog for larger sample size! ☺️

i need my space unless youre the right person then dont go anywhere

Background decorative elements

I felt like the placement of your background images within the body tag to the top and bottom of your main content div is pretty intuitive overall. The only thing I could think of to improve the vines would be to make them pseudo elements (another YouTube video by Kevin Powell) of the body element so that way you don't have to have empty divs cluttering your html for them. Pseudo elements are useful for purely decorative elements because they're created purely out of CSS; no HTML required!

Now for color: below the fold bc hyperfixation go brrr

TLDR: Color contrast is hard; especially with the current color systems we have today (HSB/RGB) since the numeric incantations of popular color systems don't line up with how our eyes actually perceive color, especially when it comes to brightness. Google made a new color system (along with a tool based on that color system to generate color palettes) that lines up better with how humans perceive color but it still isn’t perfect. IMO using tools like palettte.app (with 3 t’s) and hand-selecting colors numbered by how light they are - more about that below - works best and gives projects more of a hand-made feel but Google's tool works well enough for making a quick and professional looking color palette.

Now for a very colorful rant:

Making CSS variables with the format

colorName-brightnessValue

makes it easier to meet contrast standards when coding up a website. I'll usually organize my colors to range from 0 to 1000 exclusive where 0 is black and 1000 is white. I usually use 100, 300, 500, 700, and 900 the most so I have those 5 shades of each main color ready to go whenever I start a new project. (I use the same 4 colors for all my projects so it's easy to copy and paste the colors from the last project into the new one!)

That way if I know my background is violet-100 and my text color is violet-700 that the text will be legible because of the difference in brightness values is 600 just based on the variable names alone. Generally a difference of at least 500 (assuming you go linearly in perceived brightness) is enough to get AAA contrast levels.

For an example, here are my css variables for zephiris.me:

Others do the numbering of the shades differently. Here's how tailwind does it:

Tailwind CSS color guide's section on making a custom color palette has links to some helpful tools on how to hand-pick several shades of a set of colors so that the brightnesses of the colors decrease with the numeric value in a way that actually lines up with people's perception of color.

On that same page, tailwind also has all those color palettes shown above free for you to steal use in your projects!

Google's Material 3 design framework has shades of every color go from 0 to 100 for brightness instead of my 0-1000 brightness or Tailwind's 0-1000 darkness.

Google also has a nice resource which will automatically generate a color palette for you (I like doing it manually with palettte.app [with 3 t's] but if you just need a quick and easy palette that meets contrast standards, Google’s resource works pretty well).

Google actually has a very interesting blog post on why it’s so hard to make accessible colors and get the right amount of contrast with current color systems like HSB/RGB etc.. To fix this, they created a new color system, HCT (Hue Chroma Tone), which helps solve that problem by having HCT's Tone value better match our human perception of brightness.

Wrangling Several Colors to Work Together

My main advice for overall UI design is to pick three colors: a primary color (for background colors), a secondary color (for card backgrounds/text colors), and a tertiary color (for any elements that should be interacted with like buttons and links). I made a site to try out various combinations of colors and share those palettes with others a while ago (apparently November of 2021, thanks GitHub!)

Recently Juxtopposed made a more professional version of what I made called realtimecolors.com along with an accompanying video. Her website also features a palette generator where you just enter in one color and it will generate a set of palettes off that one color!

Unfortunately neither mine nor Juxtopposed's websites support multiple shades of each key color, so to get those additional shades make sure to either use Google's generator or one of the tools mentioned by Tailwind once you have a general set of colors that you feel works well together.

Color Palette Inspiration

What works best for me is to pick colors based on environments which I enjoy to be surrounded by. I based my color palette for zephiris.me on:

the night sky's bluish-purple hue (maybe I wear rose-tinted glasses ok?)

greenish-blue seafoam from ocean waves

golden rays of sun filtering through pine trees

Lastly, I used the trans flag colors to describe my gender for obvious symbolic reasons - I also like being next to a particular shark :p

Conclusion

Meeting color contrast standards can get way easier by numbering your colors based on how light they are. There are plenty of ways to get a set of colors labeled by lightness:

using palettes already made from Tailwind

Have Google do some math wizardry to generate you a custom palette

Use tools like palettte.app to create your own set of colors to play with

Regardless of what option you choose, the overall added structure of numbering colors' brightnesses makes it dramatically easier to make incredibly legible, accessible, and colorful designs.

Colorful rant over!

i like your website! it looks very nice

especially the gradient colored text!! you used a separate font to make it more legible

whenever i try to do something like that, it always becomes really hard to read... maybe i should learn some basic web design?

my website looks like this and it took two days of fiddling with css

Thank you! The biggest thing with making text legible is making sure there is enough contrast between the text color and the background or make the text big enough that it’s legible even if there isn’t that much contrast. The best guide on color contrast that I know of is the Mozilla docs! If you scroll down to the solution part there it has many tools to check text contrast.

Since your website has a warm bright canvas background darker colors and gradients would work better and end up being more legible.

If you’re looking to learn more about web development and especially CSS I strongly recommend Kevin Powell on YouTube! His videos on flexbox and grid are very helpful in understanding those new browser features and making responsive websites (websites that look great on any screen size). For example, I used grid for the nickname table and for my projects so that on desktop those elements would be wider and shorter while on mobile they’d get narrower and taller.

I love your site too, especially the canvas theme with the green branch/orange leaves and the clever span box to show your favorite color complete with a title tag featuring the hex code!

To be clear my site took me at least 20 hours of fiddling and development to make. Feel free to look at the site code (and my commit history) on GitHub!

why don't the mitochondria cause cancer. if i was a mitochondria i would be suddenly struck by tremendous joie de vivre and remember my youth as a bacteria and be like holy shit why am i listening to this fucker. im gonna eat all my surroundings im freeeeee. ig probably its bc they depend a bunch on proteins encoded in the nucleus but like. cmon dude

my she/it wolf dog girlfriend ate your golden retriever bf… sorry 😢

Mom, I know what I'll say at your funeral.

I'll tell them three good memories of you. One of you showing me moonflowers.

One of you accidentally admitting to smoking pot in college, blushing and running away. Denying it from then on.

My earliest memory, your finger running over the words of books as you read them.

Then I'll tell them how you put the rabbits outside in their hutch when I could see they were terrified of being in the hot open air. How I begged you not to again and again. Finding their stiff, still bodies when I came home. How you left them alone out there and their hearts couldn't take it.

I wonder what the one who died last thought. I wonder how many hours they were alone, baking, terrified.

I'll tell them about how I found two kittens next to an empty cloth sack in the river. How I never knew if the others had run or just washed away.

I cleaned them and fed them, they were old enough to eat. Old enough to fight and survive. Still so wobbly, so covered in dirt and fleas and their own shit. I gently washed both of them, pet them, showed them kindness.

You called every friend you had to get someone to take them. Eventually they left to be farm cats. I could have run and hid with them, stolen them food- you had already started calling me fat and hiding any food it was easy for a child to make themselves. I knew the taste of baking ingredients, I knew how to steal better. I could have stolen for them. I could have run and kept them. They could have been mine.

But I didn't even understand that I could have just run yet. And I realized how much better they would have it somewhere else, even if it was just as farm cats. I sent them away to live a better life than I could in that house.

I once saw my babysitter being beaten by her father, I was only 12 and she went away to college the next year. I didn't trust my mom enough to tell her, and who else was there to tell? I learned to hide and avoid problems from my Dad, and she was his anchor. Wrapped right around his neck.

If you're young and reading this, just survive. Just get away. College is one way, don't let them talk you into taking extra classes - then move to another county and never pay it back. It'll be cheaper.

Or just run. Find a group that will help you through the Internet and go.

Or sign up to work on a cargo ship the second you turn 18.

Just don't stay there. Don't be like those rabbits dying on the porch, trapped. You're a human. You can open the cage and run. Just keep going one direction. Be kind when you can, but be free first

My friend’s little brother (non-verbal) used to hide people’s shoes if he liked the person, because it meant they had to stay longer. The more difficult it was to find your shoes, the more he liked you.

One day my cousin came over, and she was a bitch. When it was time to leave, my friend’s brother handed her shoes directly to her and she went on and on about how he must have a crush on her because he only “helped” her.

Hey wait I’m one of those :D

life is beautiful because there's neurodivergent lesbains on the internet

m1=52.3 m2=97.4 m3=62.6 (solar masses) v1x=-2.801 v1y=-1.534 v2x=5.925 v2y=2.449 v3x=-0.815 v3y=-2.604 (km/s) x1=-35.0 y1=-17.0 x2=32.0 y2=9.0 x3=1.0 y3=-28.0 (AU from center) Music: Prelude in C-Sharp Minor – Rachmaninoff