somrigostsås 🧀
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 10/4/2024 in #front-end
Improving placement and transform for rotated items in a wheel
So I've been playing with this concept of having tasks divided into twelve months, a concept known as a year wheel. The idea is to display only a portion of it, because looking at the whole wheel gives you a headache, no matter how the text is flipped. And when you scroll, the wheel spins (scroll-driven animations). Here's my prototype: https://codepen.io/huma-erik/pen/dyxMwLK
As you can see, it works as intended, except for having each
.month align to the middle of the wheel. They do if there are two task items within .tasks, but that's just because an ugly hack with margin-block-start: -18px. Other amounts of tasks will be slightly misaligned, because their rendered heights isn't 18px * 2 (inspect the month of Nov, and you'll see). I tried using translateY(-50%) instead, but that's in conflict with items being rotated. Should I use trigonometry for this, or is there an easier approach?15 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 9/11/2024 in #os-and-tools
Animate between a moon path to a circle
I have this moon SVG that I want to animate to a sun (in a web app). I would use a clip path if it wasn't for the path having a stroke and not being filled.
Now I'm looking for a tool to convert the path to a circle (for the sun), with the same amount of vector points. Is there such a tool somewhere? Or do you have any other recommendations how to solve this?
4 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 9/5/2024 in #front-end
Navigation indicator using scroll-driven animations?
4 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 8/13/2024 in #front-end
Implementing dark mode where you can save your settings
So we have a React app where the user should be able to choose light, dark or system settings for the theme. At first, I implemented all the color tokens (variables) for the light theme, and then wrapped the dark ones in a
@media (prefers-color-scheme: dark) {} query. Now I'm wondering what should be done as the user changes the settings within the app. I'm doing a window.matchMedia('(prefers-color-scheme: dark)').matches if the user doesn't have any settings stored locally, and then adding a data attribute to the <html> tag, but I'm not sure that's the right approach.
What are you recommending?1 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 5/2/2024 in #front-end
"Overlay" section, between section, with dynamic content
5 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 2/9/2024 in #front-end
Vertically align `label` and `input`, without messing up the line-height?
5 replies
KPCKevin Powell - Community
•Created by somrigostsås 🧀 on 2/2/2023 in #front-end
Having a button behave like a link inside a paragraph (wrapping text)
I've been trying to accomplish something for some time now, but can't figure out how to do it. I have a paragraph with some text in it. At one point, I want to add a button (which opens a modal). The problem is, I don't want the text to break to a new line. I want it to behave like a link. I've tried
display: inline, different types of white-space, overflow-wrap and so on, but nothing works. I've even tried to compare the computed CSS between the button and an a tag, but can't seem to find anything relevant that would cause it to behave the way it does. Any ideas on how to solve this?12 replies