NremのCosenseテーマの機能と焦点
star現行のデザインは、以下のページで確認してください。 一時適用記法
バーの右側の余白をクリックしてください
Note: いい感じに煮え固まり次第、個別ページに分割する。
課題:最適な行間は、テキスト領域の幅(文字数)に依存する
課題:欧文テキストと日本語テキストとでは最適な行間が異なる
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要素も無差別的に強調してしまう。 タイトルバーを
同じデザインを共有している別のプロジェクトへの編集誤爆対策
ナビゲーションバーのプロジェクト名を赤字に変更する
アクセントカラー
未読テロメア
navbar、背景色、ページの影
ページリストのカードビューのUIの挙動をさらに直感的にする
マウスオーバーした時に、グラデーションを利用してカードの下部が背景に沈み込むように、上部が上に浮き上がるような表示にする。
Cosense標準の遷移時のアニメーションとあわさって良い感じの視覚効果が得られると思う。
未整理
標準のCosenseテーマがあおrつぃね
UserCSSのみで標準テーマを切り替えることはできない。
回避策:@container style
[** ]サイズ以上のstar太字テキストが見出し行の行頭にあるとき、セクション上部に区切り線がつく。 区切り線のデザインは、先頭縦ラインや下線タイプにしても別によかったが、表示が他の記法と競合しやすい。
灰白色系のテーマは、コントラスト設計だけでだいたい完成するので作るのが比較的楽である。
コントラスト設計はすべての基礎である。
初めてデザインするカスタムテーマの第一号、叩き台に相応しい。
UIデザインにおけるフラットデザインの持つ特性の是非
フラットデザインと灰白色系の
ブラウザからフォーカスが外れている時、背景色であるページ枠のbox-shadowなど一部の要素の色が変わる。
特に意味はない。
配色関連
配色は異なるが、基本のカラーパレットとして Ubuntu.icon Ubuntu の Yaru テーマのカラーパレットを流用している。 配色自体は独自のものである。
全体的な配色が異なっていても根幹となるカラーパレットが共通していると統一感が得られる。
? 進捗:CSSのコードハイライトのみ部分的に対応済み
以下のすべてが仕様なのか不具合なのかは不明
引用文内のインデント記号を箇条書き構文のものに変更。
引用文内のインデント(箇条書き構文)のオーバーフローしたテキストにインデントの高さが反映されるように。
箇条書き(インデント)の行にカーソル行の背景色が反映されない問題の修正。