Contrast in CSS code blocks font weight in SASS Guide too low for legibility #54
Comments
|
Oh wow, yeah in your screenshot that looks much lighter than it appears when I look on my Mac. Thanks for bringing this to my attention. I'll fix it this weekend. :) |
|
I did some looking on this one. It seems you are a bit hamstrung, and the configuration of my machine is also contributing to problems. rouge is the one providing the style, and it's the one dictating the fonts. My machine also has a version of Courier New from winetricks. (Oddly enough, I have source-code-pro, I don't know why it isn't using it.) So the low contrast and the light font are sort of working together. It might be far more bold on your computer because you don't have Courier New? Anyway, the low contrast is kind of a problem anyway. Check this out: https://github.com/richleland/pygments-css/blob/master/trac.css the highlighting tags Rouge generates are based of pygment stylesheets. Here's what it looks like with trac: and here's what it looks like if you remove courier new and fall back to monospace you can outright replace rouge's generation with the css directly in assets/components/_code.scss.erb and you can remove courier new in /assets/foundation/_code.scss Forwarning: I am not a designer. |
|
Thanks so much for you insight on this @Ghoughpteighbteau! I got busy over the weekend and wasn't able to take a look but this gives me a better understanding of what to do when I can take a look this weekend! :-) |
|
oh. One word of warning! It looks like rouge might not be parsing scss correctly. That's why the % sign is red with a red background, it's an error state. I... don't know what's happening there. Best of luck! |
|
Deploying right now, should be done soon. When you get a chance, can you let me know if things are better? I thought about switching to a light on dark theme, but I'd like to see if switching just to bolder colors and improving the font stack helps. Thanks! |
|
Oh: I used this font stack: http://www.sitepoint.com/eight-definitive-font-stacks-2/ as a back up to the source code pro web font. |
|
very nice! 👍 |
Port Built-in Modules docs
…a different color theme.
Port Built-in Modules docs
----- It is inappropriate to include political and offensive content in public code repositories. Public code repositories should be neutral spaces for collaboration and community, free from personal or political views that could alienate or discriminate against others. Political content, especially that which targets or disparages minority groups, can be harmful and divisive. It can make people feel unwelcome and unsafe, and it can create a hostile work environment. Please refrain from adding such content to public code repositories. --- sass#1 sass#2 sass#3 sass#4 sass#5 sass#6 sass#7 sass#8 sass#9 sass#10 sass#11 sass#12 sass#13 sass#14 sass#15 sass#16 sass#17 sass#18 sass#19 sass#20 sass#21 sass#22 sass#23 sass#24 sass#25 sass#26 sass#27 sass#28 sass#29 sass#30 sass#31 sass#32 sass#33 sass#34 sass#35 sass#36 sass#37 sass#38 sass#39 sass#40 sass#41 sass#42 sass#43 sass#44 sass#45 sass#46 sass#47 sass#48 sass#49 sass#50 sass#51 sass#52 sass#53 sass#54 sass#55 sass#56 sass#57 sass#58 sass#59 sass#60 sass#61 sass#62 sass#63 sass#64 sass#65 sass#66 sass#67 sass#68 sass#69 sass#70 sass#71 sass#72 sass#73 sass#74 sass#75 sass#76 sass#77 sass#78 sass#79 sass#80 sass#81 sass#82 sass#83 sass#84 sass#85 sass#86 sass#87 sass#88 sass#89 sass#90 sass#91 sass#92 sass#93 sass#94 sass#95 sass#96 sass#97 sass#98 sass#98 sass#99
I can understand how practicality and vanity can collide, I'm a little vain myself, but this isn't legible.
I'm to understand OSX tends to weigh fonts a bit heavier than linux or windows machines. So this is common. Still, even at heavy font weights, it's still bad.
The text was updated successfully, but these errors were encountered: