NremのCosenseテーマの機能と焦点
https://img.icons8.com/ios-glyphs/90/christmas-angel.pngこのサイトのCosenseテーマ #designNremのCosenseテーマの開発
Scrapbox themes by Nrem /issue
star現行のデザインは、以下のページで確認してください。
サンプル
このサイトのCosenseテーマ
一時適用記法
バーの右側の余白をクリックしてください
スキン未適用にする(比較用)--project-theme noskin
サンプル--project-theme nremiel.aureolo
サンプル--project-theme nremiel.osto
サンプル--project-theme nremiel.radiado-dark
Note: いい感じに煮え固まり次第、個別ページに分割する。
「注意を内容に向けさせるためにあえてデザインを簡便にする」は誤り
薄明環境下におけるテキストの視認性の低下への対応
課題:最適な行間は、テキスト領域の幅(文字数)に依存する
課題:欧文テキストと日本語テキストとでは最適な行間が異なる
Scrapbox のデフォルトの行間は、概ね1.866666667rem程度の値である
(app.cssのfont-size: 15pxとline-height: 28pxの比)
実際の表示は、ブラウザの既定のフォントの「文字の高さ」によって多少変動する。
課題:ウィンドウサイズの違いは、単純に端末のサイズやデスクトップの表示領域の制約によるもの
「一度に表示される情報量を減らす」ために狭い画面にするわけではない。
star欧文テキストの行間が開きすぎない程度の比率になるように、欧文フォントと日本語フォントのそれぞれの文字の高さを変更した。
@font-face定義のプロパティsize-adjustによる。
大文字が日本語のマス目よりもわずかに高く表示される程度
starブラウザの幅に応じてフォントサイズと行間が変動する。
手狭な画面サイズではテキストがわずかに小さく表示される。
これによりモバイル端末での画面情報量が若干増加した。
Cosense の標準値より広い画面幅でページ余白を縮小するように変更。
ページ脇のメニューボタンが画面上部のナビゲーションバーに移動する閾値より大きい値に。
このことによって、ウィンドウの幅を縮めた時のUIの配置変更が視覚的により自然になった。
Cosense の設計思想としてセクション分けそのものが推奨されていないa
問題ではない
課題:箇条書き記号のバリエーションが少ない
Cosense 標準では中黒と数字にしか対応されていない。
課題:箇条書きの深さが判別しづらいことがある
箇条書きのデザインを調整すべし。
Bullet list:
深さに応じて記号が変わるように(4段階で一周する)
? 未実装
Order lists:
あらゆるstar文字を箇条書きの記号にできるように記法を追加。
? 未実装
使用法:インデント直後の1文字目を2、3文字目を. (ピリオド+半角スペース)にする、
これにより、アルファベット順やいろは順の箇条書きに対応される。
その他
深さに応じて記号を変える
深さに応じて indent-rainbow または縦ラインを表示する
/yuiseki/settings#5fe7114dd7d3c3000084fbf9
/customize/インデントレベルをわかりやすくする
/nishio/インデント表示
/villagepump/インデントに縦線を表示するようにした
テロメアの配色
入力中のテキストにフォーカスする
今自分が編集している行にフォーカスしやすくする
Anĝela Osto の暗い影を多用するUIデザインは、「今行っている操作」と関係のないUI要素も無差別的に強調してしまう。
タイトルバーを
同じデザインを共有している別のプロジェクトへの編集誤爆対策
ナビゲーションバーのプロジェクト名を赤字に変更する
redAŭreolo にCosenseの標準テーマの色を反映させる
Aŭreolo Auto Colorize (prototype)
アクセントカラー
未読テロメア
navbar、背景色、ページの影
ページリストのカードビューのUIの挙動をさらに直感的にする
マウスオーバーした時に、グラデーションを利用してカードの下部が背景に沈み込むように、上部が上に浮き上がるような表示にする。
Cosense標準の遷移時のアニメーションとあわさって良い感じの視覚効果が得られると思う。
ニューモーフィズムの潮流に似ている? まあ、突き詰めなくても、ただこれだけで十分だろう。
未整理
標準のCosenseテーマがあおrつぃね
この値をUserScriptで変更することは可能。
UserCSSのみで標準テーマを切り替えることはできない。
回避策:@container style
[** ]サイズ以上のstar太字テキストが見出し行の行頭にあるとき、セクション上部に区切り線がつく。
「/customize/sectionを水平線で区切る」を改変して組み込んだもの。
区切り線のデザインは、先頭縦ラインや下線タイプにしても別によかったが、表示が他の記法と競合しやすい。
yellowこれとは別に、/icons/brを .icon として手動で挿入する方法もある。
灰白色系のテーマは、コントラスト設計だけでだいたい完成するので作るのが比較的楽である。
コントラスト設計はすべての基礎である。
初めてデザインするカスタムテーマの第一号、叩き台に相応しい。
Cosenseの標準テーマ「Default Light」や「Default Compact」に見劣りしないものを。
UIデザインにおけるフラットデザインの持つ特性の是非
フラットデザインと灰白色系の
purple(Termika Radiado)
ブラウザからフォーカスが外れている時、背景色であるページ枠のbox-shadowなど一部の要素の色が変わる。
特に意味はない。
配色関連
配色は異なるが、基本のカラーパレットとして Ubuntu.icon Ubuntu の Yaru テーマのカラーパレットを流用している。
あと Google のマテリアルデザインのパレットも流用する予定。
配色自体は独自のものである。
全体的な配色が異なっていても根幹となるカラーパレットが共通していると統一感が得られる。
コードブロックのカラースキームはYaru-darkが忠実に再現されたもの(予定)。
? 進捗:CSSのコードハイライトのみ部分的に対応済み
作者が Yaru のコードハイライトを気に入っているため。
Cosense.iconCosenseの標準テーマの不具合の修正Scrapbox themes by Nrem /issue
以下のすべてが仕様なのか不具合なのかは不明
引用文内のインデント記号を箇条書き構文のものに変更。
引用文内のインデント(箇条書き構文)のオーバーフローしたテキストにインデントの高さが反映されるように。
箇条書き(インデント)の行にカーソル行の背景色が反映されない問題の修正。