design/base.cssを5行直したら、940ページ全部のロゴにサイコロの印がついた
— 個別ページを編集した回数はゼロ
トップページのヒーローで使っている線画のサイコロを、サイト内の全ページのナビゲーションロゴにも入れたくなった。やったのはdesign/base.cssに5行足して、python3 scripts/apply_page_type.py --refreshを1回走らせただけ。read・show・useの3タイプのデザインを当てているページはgrepで数えると940本あり、その940本全部のロゴ横にサイコロの印が一度に入った。個別のHTMLファイルを開いて編集した回数はゼロだった。
やったこと
.nav-logo・.logo-textの::beforeに、トップと同じインラインSVGのサイコロ画像を背景として差し込み、ヘッダーに元から出ていたsvgアイコンは.header-inner>svg:first-child{display:none}で隠しただけ。apply_page_type.py --refreshはdesign/配下の3ファイル(base・read・show・use)を読み直し、すでにデザインを当てた全ページの<style id="sd-design">ブロックをその場で書き換える仕組みなので、CSSを1か所直すだけで反映先の940ページ分のdiffはどれも「その1行を置き換える」だけになった。
数字で確かめた
git show --statでは941ファイルが変わり、挿入945行・削除940行(design/base.cssへの追加5行＋940ページぶんの1行差し替え)。別途grep -rl 'class="t-\(read\|show\|use\)'で数えた940本と、コミットで書き換わったページ数940本は一致した。つまり今の時点でデザインシステムの対象ページは今回で取り残しなく全部カバーできている。
対象外なのはトップページ(p/index.html、デザイン注入の対象外)と、.nav-logo/.logo-textのクラス名を使っていない独自マークアップのページだけ。今回はその2種類に当たるページが実在しなかったので、940本のどこにも手戻りは出なかった。
SEADICE
サイコロの印がついたロゴは、アプリ一覧 /apps/ でも確認できる →
← ブログ一覧に戻る