新サイトのご意見募集

ええ、私もそれを読んだ瞬間に同じことを思いました。あなたのサイトもチェックします!実はAirテーマから始めて、CSSなどでかなりカスタマイズしていたのですが、現在のテーマとAirテーマを比較すると、何というか…「ベーシックすぎる」気がします。一般的にミニマリズムが好きなので、これは奇妙なことですが、笑。

@Lilly@bryce@omarfilipが遅いと言っていたのは、私自身の特定の夜の時間帯で、サーバーがホストされている場所でも同じような時間帯でした。もしよろしければ、@Heliosurge@daemon@merefieldの皆さんにお願いなのですが、他の人たちが遅いと言っていた12時間後(もしご都合が良く、起きていらっしゃればですが、笑)にチェックしていただけますか?時間帯によるものなのかどうか、知りたくてたまりません。

それは素晴らしいですね!特にサーバーがホストされている場所から世界の反対側にいるのに。

素晴らしいです!! 他に何かフィードバックや推奨事項はありますか?

「いいね!」 1

試してみたところ、ほぼ瞬時に読み込まれるようになりました。最初はメモリキャッシュから読み込んでいるだけだと思いましたが、そうではないようです。

「いいね!」 2

ああ、なるほど。ええ、奇妙ですね。これは時間帯の問題を指しているようですね。サーバーがホストされていた場所と、その時間にオンラインだったであろうほとんどの人々を考えると、夜の時間帯であることを考えると理にかなっています。それでも…百万ドル/十億ドル規模の企業は、どんな時間帯であっても、そのような問題はないでしょう、そうですよね? 大規模なウェブサイトで遅いと感じたことはありますが、それはほとんどの場合まれなことです。

ネブラスカ州で500MBのサービスを利用していますが、私にとっても非常に速く読み込まれました。

「いいね!」 1

私にとっては午前3時になります。これは私が普段寝ている時間です。 :wink:

「いいね!」 1

8時30分PDT現在、かなり速く読み込まれます。

「いいね!」 1

ページは私には速く読み込まれます。:+1: 良い感じです。

Discourseについてですが、タグのスタイリングはあまり好きではありません(私の意見ですが):

  • タグなので、ここで全幅になるとは期待していません。
  • 視覚的に多くの注意を引きます。
  • コントラストの問題 – あまり読みやすくありません。

ランダムな例:

頑張ってください!

「いいね!」 2

フィードバックありがとうございます!
はい、実際にタグの幅を調整してみましたが、サイズ変更後に中央揃えする方法がわかりませんでした。色に関しては、ライトモードとダークモードの両方に合う、これ以上の色が見つかりませんでした。ライトモードでボックスを明るくすると、ダークモードでは明るすぎて同じ問題が発生します。

たとえば、タグを「要素を調査」して max-width プロパティを 40% に変更すると、視覚的には良くなりますが、毎回試してもテキストだけが移動し、背後のボックスは移動しないため、全体を中央揃えする方法がわかりません。

それらのタグを中央揃えするには、flexbox プロパティを使用できます。タグは、すでに display: flex に設定されている親コンテナー内にあります。

Flexbox を使用すると、子要素をコンテナー内でどのように配置するかを簡単に制御できます。開発者ツールには便利な機能があり、display: flex の横にある小さなアイコンをクリックすると、目的の効果が得られるコントロールのセットが表示されます。

この場合、justify-content: center でうまくいきます。

複数のタグでも機能することに注意してください。

さらに詳しく知りたい場合は、こちらの flexbox に関する優れた定番チュートリアルをご覧ください。これは、CSS ツールボックスに非常に役立つツールです :grin:

「いいね!」 3

おお、本当にありがとうございます!はい、タグが2つ表示されると、1つだけ中央に表示されるよりもずっと自然に見えますが、正直なところ、ほとんどの投稿で複数のタグを使用している人はあまり見かけません。うーん…CSSなどで、そこに表示されるタグと、トピック/投稿の別の部分を組み合わせて、2つの要素が表示されるようにする方法を見つける必要があるかもしれません。あるいは、すべて非表示にするという選択肢もありますが、まあ。

それよりも、カテゴリをそれに置き換えることはできますか?

ダークモードでもうまく機能するように、色のDiscourse CSS変数を使用することを推奨します。(何かを検査して下にスクロールできます)


中央揃えにするには:編集:Bryceがすでに回答しました!

.discourse-tags {
    justify-content: center;
}
color: var(--secondary-low) !important;
background: var(--blend-primary-secondary-5) !important;


また、dark-light-choose(<lightcolor>, <darkcolor>)関数を使用して、ライトカラーとダークカラーを定義することもできます。これにより、ダークモードが設定されている場合とされていない場合で、適切なカラーが使用されます。

「いいね!」 4

うーん、これは間違っていますか?Inspect Elementに貼り付けたところ、次のようになりました。

background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

「いいね!」 1

これはDiscourseコアで利用可能なSCSS関数です。処理されるように、テーマのCSSで使用する必要があります。ブラウザで直接使用しても機能しません。

「いいね!」 1

読み込みはまだ速いですね。ほんの一瞬しか見えません。

アラカルトでコンポーネントを追加できるのは素晴らしいですね。私はまだコード側を学んでいるので、あなたの方が進んでいます。昔、Discourseの前は、BASICや古いTurbo Pascalしか触ったことがありませんでした。でも、少しずつ進歩しています。

「いいね!」 1

うーん、わかりました。私の .scss ファイルには次のようなものがあります。

.discourse-tags {
        display: flex;
        margin: 1em 0 0 0;
        /* justify-content: center; */
        a {
          display: inherit;
          flex: 1 0 auto;
          justify-content: center;
          max-width: 35%;
          //line-height: var(--line-height-small);
          line-height: 1.1rem;
          border: 0.5em solid transparent;
          /* color: #000000 !important; */
          color: var(--secondary-low) !important;
          background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

最後の 2 行に注目してください。ライトモードとダークモードで、ダークモードの 3a3b3c 色に切り替わるのではなく、#f0f2f5 色のままになっているようです。何か原因はわかりますか?

要素を検査すると、プロパティは次のように表示されたままです。
background: #f0f2f5 !important;
上記でリンクした URL を試して、それらを $tagbglight と $tagbgdark に変更し、定義などを試しましたが、うまくいきませんでした。

dark-light-choose('#f0f2f5', '#3a3b3c') を実行すると、次のようになります。

これは、以前と同じような結果です。
注: 要素を検証すると二重引用符が表示されます。コードでは、あなたがしたように単一引用符を使用しました。

最終結果で引用符が表示されるので、次を試してみてはどうでしょうか。

dark-light-choose(unquote("#f0f2f5"), unquote("#3a3b3c"))

これで正しい色を選択できるかはわかりませんが!

引用は削除されますが、モードを切り替える際に背景色としてこの色しか表示されません:#f0f2f5

それは奇妙ですね。関数自体がプライマリカラーとセカンダリカラーの明るさを比較しているようです。なぜ機能しないのかわかりません。:thinking:

@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

CSS 変数を color_definitions.scss で定義する必要があると思います。

例:

:root {
    --bg-custom: dark-light-choose(#f0f2f5, #3a3b3c);
}

その後、次のように使用できます:

background: var(--bg-custom) !important;