fortune Add debugging class

In the recent article, I published: https://medium.freecodecamp.org/learn-this-one-weird-trick-to-debug-css-88529aa5a6a3 I talked about a global CSS debugger. Another method of using this, however, is scoped to an element and its children. E.g.

.debug *:not(path):not(g) {
	color:                    hsla(210, 100%, 100%, 0.9) !important;
	background:               hsla(210, 100%,  50%, 0.5) !important;
	outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

	box-shadow: none !important;
}

The difference here is that now whatever is classed as .debug so will it and its children expose the debugger, which could also be customized using CSS variables (such as color).

May 07 '18 20:05 zaydek-old

Pro-tip: do <html class="debug"> then the whole website debugged without a bookmark!

May 07 '18 21:05 zaydek-old

i'm into this. would be nice to point to fortune rather than write this debug class from scratch each time it's useful

Aug 14 '18 16:08 chasestarr

@ZAYDEK do you want to open a pr?

Aug 14 '18 16:08 chasestarr