cvx
(Jarek Radosz)
22
私もこの意見に強く同意します。
デフォルトのフォントサイズを15pxから16pxに引き上げました。コードブロックのフォントサイズを13pxに下げるのは大きな変更です。数文字行が増えることと、可読性の向上は良いトレードオフでしょうか?
インラインコードのスタイルも更新されますか?現在、それらは異なる背景色、フォントの色、フォントファミリーを持っています。これは、通常のテキスト、インラインコード要素、コードブロックが多く混在する投稿で非常に顕著です。これにより、インラインコードとブロックのコードスニペットの相互参照が少し難しくなります。
変更とは関係ありませんが(コードブロックに関連しています)- ホバー時のボタンアイコンを改善するアイデアはありますか?12pxと0.7の不透明度では、ほとんど見えません(特にコードと重なっている場合)。
「いいね!」 4
素晴らしい観察です。これは、ボタンが見えすぎたために変更されました。btn-flatに変更されましたが、それが過剰だったことは理解できます。これはコードブロックにカスタムスタイルを適用することを意味するでしょうか?
「いいね!」 1
fitzy
(Michael Fitz-Payne)
24
フォントサイズを大きくしますか?昨日ローカルで14pxを試したのですが、デフォルトのフォントに比べて少しだけ目に優しくなりました。
「いいね!」 3
// これはコメントアウトされたコードです
import Component from "@glimmer/component";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import bodyClass from "discourse/helpers/body-class";
import concatClass from "discourse/helpers/concat-class";
import ReaderModeOptions from "./reader-mode-options";
export default class ReaderModeToggle extends Component {
@service readerMode;
get bodyClassText() {
if (this.readerMode.isTransitioning) {
return "reader-mode-transitioning reader-mode";
} else if (this.readerMode.readerModeActive) {
return "reader-mode";
} else {
return "";
}
}
handleDocumentKeydown(e) {
if (e.ctrlKey && e.altKey && (e.key === "r" || e.key === "®")) {
this.readerMode.toggleReaderMode();
}
}
@action
addEventListener() {
document.addEventListener("keydown", this.handleDocumentKeydown.bind(this));
}
@action
cleanUpEventListener() {
document.removeEventListener("keydown", this.handleDocumentKeydown);
}
<template>
{{bodyClass this.bodyClassText}}
<DButton
{{didInsert this.addEventListener}}
{{didInsert this.readerMode.setupWidth}}
{{willDestroy this.cleanUpEventListener}}
@action={{this.readerMode.toggleReaderMode}}
@icon="book-reader"
@preventFocus={{true}}
title="Toggle Reader Mode (ctrl + alt + r)"
class={{concatClass
"icon"
"btn-default"
"reader-mode-toggle"
(if this.readerMode.readerModeActive "active")
}}
/>
{{#if this.readerMode.readerModeActive}}
<ReaderModeOptions />
{{/if}}
</template>
}
こちらが最新のアップデートです 
「いいね!」 8
fitzy
(Michael Fitz-Payne)
26
この最新版、@jordan.vidrine さん、とても気に入りました!
「いいね!」 2
sam
(Sam Saffron)
27
最新のアップデートはかなり良くなったと感じています。色合いも気に入っていますし、テキストの16pxフォントとのサイズ競合もなくなりました。
def hello
puts "hello world"
end
マイナーな点としては、グレーの背景がまだ少し地味に感じられるので、もう少し明るい方が好みです。しかし、全体的にはかなり良い感触です。
@cvx、現在の見解はいかがですか?
「いいね!」 1
bryce
(Bryce Huhtala)
28
三次色の薄いバージョンを使用してみてはどうでしょうか。
rgba(var(--tertiary-rgb), 0.058)
「いいね!」 2
テーマカラーパレットの色を使おうかとも思ったのですが、それが何になるか予測できません。ひどく間違った結果になるかもしれません 
でも、青は好きです。
「いいね!」 1
ダークモードですか、それともライトモードですか?
私が選んだグレーは、以前のものより明るい(そう思います)です。var(--primary-50)を使用しています。
「いいね!」 1
@sam / @fitzy この1週間の変化について、どのように感じていますか?
sam
(Sam Saffron)
32
IMO、これをコアにマージすべきです。見た目がずっと良くなりました。
古い配色だと古いサイトで目が痛くなります 
「いいね!」 3
fitzy
(Michael Fitz-Payne)
34
現在の状況はコアのものと比較して、私は間違いなく賛成です。
しかし、コミット 98b2763 の max-height の変更を失いました。これは意図的でしたか?コメントアウトされ、その後のコミットで削除されたのを確認しました。
もしそうなら、ローカルオーバーライドで対応できます。
「いいね!」 1
はい、現在のコードブロックサイズにできるだけ近づけるために削除されました。
「いいね!」 1
david
(David Taylor)
38
新しいパディングは .hljs 要素にのみ適用されているようで、単純なコードブロック(ハイライトなし)には適用されません。
hello
console.log("test")
これにより、ハイライト(したがって .hljs クラス)が非同期に適用されるため、初期ロード時に投稿の高さがジャンプすることもあります。
パディングの変更が .hljs クラスがなくてもコードブロックに適用されるように修正できますか?
「いいね!」 6
これらに気づいていただきありがとうございます!これらのスタイルをhljsブロックだけでなくcodeにも適用されるように更新しました。
「いいね!」 4
さらに修正を追加する必要があります。追加した修正により、インラインコードブロックが独自の行にレンダリングされるようになりました。
これは正しくレンダリングされないインラインコードブロックの例です。
「いいね!」 2
Tris20
(Tristan)
42
「いいね!」 3