NremのCosenseテーマの機能と焦点
star現行のデザインは、以下のページで確認してください。 一時適用記法
バーの右側の余白をクリックしてください
要求されるデザイン特性の焦点Note: いい感じに煮え固まり次第、個別ページに分割する。
暗所では光を知覚する桿体細胞の働きが、色や形を詳細に知覚する錐体細胞に対して大きくなることで字形の細部を認識する能力が落ちる。
ディスプレイ光における最も明るい色は白色である。
黄色や白っぽい青はヒトにとって白に近い性質を持つ明るい色だが、明度を抑えつつ彩度を上げることができる。
暗い背景とテキストが合わさり黒と黄の警戒色になることで意識に留まりやすくなる効果を期待している。
リンク等の他の色付きのテキストや端末の「夜間モード」との兼ね合いがある。 夜間モードがオンの状態では、白いテキストも含めて画面全体が黄橙がかった表示になる。
黄色くなりすぎない程度の彩度を探っている。
夜間モードがオンの状態で全体的な色合いの調和が取れる。
これは残念なことに、作者にカラーパレットを作るセンスがないため結果としてそういう塩梅になっただけである。 他の色にすることも検討している。
視認性の改善を意図したもの。
他の色にすることも検討している。
源暎アンチックの字形のシャープさと密度ムラの低さが、「Noto Sans JP」のような標準的なゴシック体や細かな線の多い「UD デジタル 教科書体」と比較して、暗所での視認性を改善すると作者が見込んだため。
? ウェブフォントが読み込まれない不具合が発生している
薄明環境下での日本語テキストは、作者の体感だと等幅フォントのほうが視認性がよい。
何らかの理由でフォントが読み込まれない時は、代わりにUDゴシック書体「BIZ UDゴシック」でテキストが表示される。
課題：最適な行間は、テキスト領域の幅（文字数）に依存する
課題：欧文テキストと日本語テキストとでは最適な行間が異なる
Scrapbox のデフォルトの行間は、概ね1.866666667rem程度の値である
（app.cssのfont-size: 15pxとline-height: 28pxの比）
実際の表示は、ブラウザの既定のフォントの「文字の高さ」によって多少変動する。
課題：ウィンドウサイズの違いは、単純に端末のサイズやデスクトップの表示領域の制約によるもの
「一度に表示される情報量を減らす」ために狭い画面にするわけではない。
star欧文テキストの行間が開きすぎない程度の比率になるように、欧文フォントと日本語フォントのそれぞれの文字の高さを変更した。 @font-face定義のプロパティsize-adjustによる。
大文字が日本語のマス目よりもわずかに高く表示される程度
starブラウザの幅に応じてフォントサイズと行間が変動する。 手狭な画面サイズではテキストがわずかに小さく表示される。
これによりモバイル端末での画面情報量が若干増加した。
Cosense の標準値より広い画面幅でページ余白を縮小するように変更。
ページ脇のメニューボタンが画面上部のナビゲーションバーに移動する閾値より大きい値に。
このことによって、ウィンドウの幅を縮めた時のUIの配置変更が視覚的により自然になった。
問題ではない
課題：箇条書き記号のバリエーションが少ない
Cosense 標準では中黒と数字にしか対応されていない。
課題：箇条書きの深さが判別しづらいことがある
箇条書きのデザインを調整すべし。
Bullet list:
深さに応じて記号が変わるように（4段階で一周する）
? 未実装
Order lists:
あらゆるstar文字を箇条書きの記号にできるように記法を追加。 ? 未実装
使用法：インデント直後の1文字目を2、3文字目を. （ピリオド＋半角スペース）にする、
これにより、アルファベット順やいろは順の箇条書きに対応される。
その他
深さに応じて indent-rainbow または縦ラインを表示する
現在の編集行への注意を誘導する
Anĝela Osto の暗い影を多用するUIデザインは、「今行っている操作」と関係のないUI要素も無差別的に強調してしまう。 タイトルバーを
同じデザインを共有している別のプロジェクトへの編集誤爆対策
ナビゲーションバーのプロジェクト名を赤字に変更する
未整理
標準のCosenseテーマがあおｒつぃね
UserCSSのみで標準テーマを切り替えることはできない。
回避策：@container style
[** ]サイズ以上のstar太字テキストが見出し行の行頭にあるとき、セクション上部に区切り線がつく。 区切り線のデザインは、先頭縦ラインや下線タイプにしても別によかったが、表示が他の記法と競合しやすい。
灰白色系のテーマは、コントラスト設計だけでだいたい完成するので作るのが比較的楽である。
コントラスト設計はすべての基礎である。
初めてデザインするカスタムテーマの第一号、叩き台に相応しい。
UIデザインにおけるフラットデザインの持つ特性の是非
フラットデザインと灰白色系の
ブラウザからフォーカスが外れている時、背景色であるページ枠のbox-shadowなど一部の要素の色が変わる。
特に意味はない。
配色関連
配色は異なるが、基本のカラーパレットとして Ubuntu.icon Ubuntu の Yaru テーマのカラーパレットを流用している。 配色自体は独自のものである。
全体的な配色が異なっていても根幹となるカラーパレットが共通していると統一感が得られる。
? 進捗：CSSのコードハイライトのみ部分的に対応済み
以下のすべてが仕様なのか不具合なのかは不明
引用文内のインデント記号を箇条書き構文のものに変更。
引用文内のインデント（箇条書き構文）のオーバーフローしたテキストにインデントの高さが反映されるように。
箇条書き（インデント）の行にカーソル行の背景色が反映されない問題の修正。