Estamos experimentando reduzir o tamanho do texto e a altura da linha, e aumentar a altura dos blocos de código, a fim de melhorar a legibilidade de blocos de código maiores. Isso é problemático principalmente para blocos de código grandes que excedem 20 linhas ou mais. O resultado é que mais código pode ser visto na viewport normal.
Antes
Depois
A mudança foi feita aqui:
Parece que alterar o tamanho da fonte de código inline como este é provavelmente um efeito colateral não intencional?
Sim, isso foi não intencional, devemos modificar para que apenas blocos completos sejam alterados e não código inline.
Para que conste, eu apenas uso isso na minha instância de desenvolvimento hackity hack:
pre code {
font-size: var(--font-down-1);
}
resultado
Enviei um PR para remover alterações de estilo em texto monoespaçado inline e também para aumentar ligeiramente a altura da linha em blocos de <pre>.
Isso está infelizmente prejudicando a legibilidade em trechos mais curtos.
Por exemplo:
A fonte é menor, a altura da linha é mais curta.
Isso só pode impactar blocos de código muito longos? Isso deveria ser uma mudança principal @jordan.vidrine?
Eu também quero destacar a diferença aqui entre este experimento e o Stack Overflow.
Experimento atual
Stack Overflow
Algumas coisas que noto imediatamente são:
Preciso investigar mais o hljs e ver por que nosso caso de uso está colocando os títulos em negrito.
Adoro que você tenha dado uma olhada no Stack Overflow, porque se alguém descobriu como exibir blocos de código, seriam eles.
Outra observação, o tamanho da fonte não parece estar mudando, apesar de ter mudado… (15px → 13px, mas as cores compensam um pouco)
O ritmo visual e a altura da linha parecem muito melhores aqui:
Stack Overflow
Experimento Atual
A altura da linha é notavelmente um problema e nosso “encolhimento” foi longe demais, pois nossa fonte base é maior e mais espaçada que a do Stack Overflow.
Apoio muito a remoção do negrito em nosso experimento atual e o aumento do tamanho e da altura da linha.
Esta PR fez as seguintes alterações: https://github.com/discourse-org/design-experiments/pull/77
Isso parece ótimo, Jordan. Neste caso, acho que usar o peso da fonte consistente ajuda na legibilidade. Estou gostando do aumento do preenchimento também.
Obrigado, concordo. Acho que gostaria também de analisar as cores e por que o hljs está usando as cores que está usando. Não vi esse padrão de cores usado em nenhum lugar online.
Sou fã das mudanças na tipografia, mas acho que o fundo escuro é demais. O fundo mais claro é muito mais fácil de ler.
Mudança chegando.
Após mais pesquisas, vejo que as cores que estamos usando são baseadas em um esquema desatualizado usado pelo github, possivelmente há 10 anos, ou até mesmo 4.
Há espaço aqui para mudar as cores padrão para algo atualizado?
O Github tem um esquema de cores atualizado desde então, juntamente com outras opções para ser um esquema claro padrão.
Stack Overflow
Atom One Light
Novo Github
hljs padrão 
Minha preferência pessoal seria por algo com cores mais suaves - em seus exemplos, Stack Overflow é a minha escolha.
depois de alguns dias ainda tenho que apertar um pouco os olhos com o tamanho de fonte menor, não acho que valha a pena a economia de espaço
Você sente o mesmo no Stack Overflow (por exemplo)? O tamanho da fonte e os cálculos da altura da linha são os mesmos agora entre Discourse e SO.
max-height no Discourse é ligeiramente menor em 500px contra 600px.
O contraste é muito pior no nosso caso e faz uma grande diferença quando você está tentando ler texto pequeno, por exemplo (Stack Overflow à direita):
Sim, eu entendo o que você quer dizer.
O que você acha dessas alterações no PR que abri: https://github.com/discourse-org/design-experiments/pull/79
Aqui está uma opção onde adiciono preto ao fundo no modo escuro, em vez de usar algo baseado em secundário ou primário. Faço isso via rgba(0,0,0,0.25)
Alguém poderia fazer um teste com o componente/tema de numeração de linha de blocos de código recente também incluído? Agradeço desde já.
