brownplt / code.pyret.org

Website for serving Pyret to folks.
Other
24 stars 45 forks source link

Make definitions and interactions have a white background #326

Closed schanzer closed 2 years ago

schanzer commented 4 years ago

Taking screenshots of REPL output for use in lesson plans is painful, because there's always a light gray background that needs to be scrubbed out. This is insanely inconvenient for anyone preparing lesson materials, slides, etc.

blerner commented 4 years ago

I really don't want to do this -- the bright nearly-white is glaring enough, and I'd rather it were dimmer, honestly! What I'd prefer, though, is if we supported two or three stylesheets (maybe available in the Bonnie menu), for "default", "dark mode", and "high-contrast / teacher mode", where the latter is best for projectors (with frequently crappy bulbs and low contrast) or for this use-case of screenshots.

shriram commented 4 years ago

Doesn't the light grey background actually help, by making clear this is a specialized context? Essentially like "quotation marks"?

schanzer commented 4 years ago

No. The gray doesn't help. There's an implicit assumption among young people (and some old people!) that the absence of color is white. And while that is totally nuts, it's also both understandable and a constraint that Bootstrap has to live with (or devote lesson time to correcting).

I'll be honest - this tripped me up when I was writing a lesson yesterday. I had an outline circle that looked almost white in CPO, and I copy/pasted it into an image file with a white background. For a brief moment, I looked back at CPO to see if I'd accidentally made the image gray! And if it messed me up, it's likely to trip up teachers and students.

But my chief complaint isn't really that it's potentially confusing. It's just that it makes copy/pasting REPL output into usable slides kind of a nightmare. I like @blerner 's suggestion of multiple style sheets, but given that there are multiple issues left over from CSPdWeek last year I'm concerned about making what would be a one-line CSS fix into a years-long engineering task to support multiple stylesheets.

jpolitz commented 4 years ago

Can you give an example of a problematic screenshot? Is it that you want to pair expressions with output, so right clicking and saving the image doesn't work? I usually right-click and save as, which should have the right transparency for any background.

blerner commented 4 years ago

I'm almost inclined to make this be a new theme, in line with the work on #329 #332 , which would allow us to customize things even further for "Screen sharing" mode: we could have punchier contrast in colors to avoid washed out projector displays, larger fonts, whatever ideas we want...

schanzer commented 2 years ago

I'm happy with the theme work serving as a solution to this issue. Closing.