🏠 portland, or, usa
📆 mid-30s
💬 here to make friends and chat
🎮 video games
👩🏻💻 web development
👩🏻🏫 teaching others
🎨 digital aesthetics
💅🏻 makeup & jewelry
👗 gothic fashion
👩🏻🎨 making pixel art
🤘🏻 progressive metal
🎸 video game music
🟢 everything green
🌟 neon colors and transparent plastic
toggle dark mode via the post menu to see the animation. apparently the variable --tw-border-opacity is set to 1 in dark mode and not set in light mode. so you can use calc to multiply something by that value.
<div style="
transform: rotatex(calc(0.5turn * var(--tw-border-opacity, 0)));
transition: transform 500ms;
text-align: center;
border: 1px solid;
padding: 2rem 1rem;
">
hello there
</div>it's pretty rad to see --tw-border-opacity be rediscovered independently! i doubt it will last forever, it's an implementation detail, so it would be kind of nice to have a more blessed thing
i really liked your post btw. and yeah i'm hoping we could get some kind of official variable as well.
i noticed that we finally have some non-tailwind classes like .co-post, but i wasn't sure if these were yet more implementation details or if staff said they put that in there as a nice-to-have for custom theme authors...
it seems like it's both of those, which is great (https://cohost.org/staff/post/3627687-additional-updates). i've already seen at least one userscript author react positively to the change. oh also data-theme is set to light or dark appropriately which is nice
