Improved Focus

[kylebutts]

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;
}

[pomber]

Good idea. I'll think about it.