Improved Focus #106
Description
Torchlight.dev uses some pretty neat styling for focusing lines that allows unblurring on hover. I think that's certainly an improvement as oftentimes you might want to see the focused content and be able to easily read the code around it. Related to #102.
/*
Blur and dim the lines that don't have the `.line-focus` class,
but are within a code block that contains any focus lines.
*/
.torchlight.has-focus-lines .line:not(.line-focus) {
transition: filter 0.35s, opacity 0.35s;
filter: blur(.095rem);
opacity: .65;
}
/*
When the code block is hovered, bring all the lines into focus.
*/
.torchlight.has-focus-lines:hover .line:not(.line-focus) {
filter: blur(0px);
opacity: 1;
}