Hey, @manton! You so often have to help us with technical problems - so I wanted to help you back, with a solution to a problem with the Micro.blog website!
(With a guest apperance of @pratik’s great photo.)
Hey, @manton! You so often have to help us with technical problems - so I wanted to help you back, with a solution to a problem with the Micro.blog website!
(With a guest apperance of @pratik’s great photo.)
@vincent Haha, yeah - they should. 😛 Personally I’m a sucker for blur, so I would try to keep it somehow. But maybe, when you know that the solution is to «turn off the parent’s blur» you can figure out a clever way to do it without js. ☺️
@vincent @manton I just remembered something! I think you can solve it, without javascript, with the pseudo-elements :focus or :focus-within!
I think it would work to do something like
header { background: rgba (237, 242, 247, .7); backdrop-filter: blur(20px) }
header:focus-within { background: rgb (237, 242, 247); backdrop-filter: none; }
(There I just did the same rgb levels, but without opacity - but I'd pick something a bit more gray or whatever matches the best.)