[5ym]

画面を、denpa の「見た目の決まり」(docs/design.md。塗らない。囲みすぎない。浮かせすぎない。でも、ちゃんと伝わる)に合わせて作り直した。機能・文言・サーバー側(src/lib/server/**)は変えていない。

変えたこと

• 層を 3 つに
  • 地: 読み物(ノート・日記・自己記述・持ち主の地図)・まとまり(.panel は枠も地も無し)・1 行の並び(足どり・閉じた問い)・数字(「いま」の数字は札をやめた)・設定の節
  • 件の面(.item-list の .item): 2〜3 行ある一覧。面とごく薄い影だけで、縁と区切りの線は無い
  • 操作の層: ヘッダー・下のタブ・「その他」のメニュー・主のボタン・話すの入力欄・つながりの図の上の操作・設定の「保存する」
• ヘッダー: 上端では平らで、巻くと面と影が出る(animation-timeline: scroll())。ぼかし(backdrop-filter)をやめた。1000px 未満はヘッダーを出さず下のタブ(640px 未満は いま・話す・ノート・問い・その他、640px からは全部とログアウト)
• 印: いまいる画面・選んでいる日は、塗りをやめて主の色の下線と太字(画面を移ると下線が滑る。CSS のアンカー)。メニューの中は左の縦線。話すの自分の発言は青い吹き出しをやめて左の縦線
• 色: 状態の色は状態にだけ。バッジ(.tag)は状態だけにして、系統・テーマ・出どころ・数は控えた字を「・」でつなぐ。通知(.note)は淡い面と頭のアイコン(状態の色で塗らない・左の線を引かない)。葦の緑はロゴとつながりの図の「個性」だけ
• ボタン・入力欄: 主のボタンは色で塗らず、操作の層の面と影のカプセルに太字。控えは平ら。浮いたもの・件の面の中では主も平ら。入力欄は線の無い面で、焦点は外側の 2px の線
• 動き: CSS の透明度と transform だけ。時間 4 つと曲線 3 つの名前から選ぶ。動き続けるもの(歩いているの点・待っている印)は、動きを減らす設定とソフトウェアで描いている端末(src/lib/lite.ts)で止める
• 作り: Pico は残し、pico の層(@layer)に入れて読む(こちらの規則が詳細度に関係なく勝つ)。依存は足していない。値の名前(--dp-*)は denpa の src/app.css に合わせた
• CLAUDE.md の「画面」を、denpa の決まりに従うこと・当て方・Ashi だけの違いに書き直した

当てはめなかったもの

番組表・映像の上の操作・サイドバー・ダイアログ・トースト・テーブルトップ(Ashi に無い部品)。スマホの形は幅だけで決め(折り畳み端末は見ない)、下のタブは読んでいる間も引っ込めない(巻いた向きを見る JS を持たない)。明暗は端末の設定に従う(切り替えを持たない)。

確かめたこと

• wslc の Linux コンテナ(oven/bun)で bun run lint・bun run check(警告 0)・bun test tests(349 本)・bun run build(警告 0)
• 作り物の見本のデータでサーバーを起こし、ブラウザで全部の画面を見た: 明るいほう・暗いほう、広い形(約 1870px)、スマホの形(390px・700px・820px。同じページの中の狭い枠で)。ヘッダーが巻くと浮くこと・「その他」のメニュー・つながりの図の色・横にはみ出さないこと
• 見ていないもの: 実機のスマホ・Safari・Firefox、動きを減らす設定、X のアカウントをつないだ状態の画面

🤖 Generated with Claude Code

https://claude.ai/code/session_01T8TqVdo6LUrWKdVQgbScVU