PNGを追放したり、:hoverに強く依存しないようにボタン類のコントラストを上げたり、カラースキームも#558899ベースから#1188bbベースにして背景色とのコントラストを上げたり。他はロゴとグローバル・フッターのデザインを変更したくらいで、コンテンツ部分はほとんど変わってない。そこかしこのSVGがFirefox 23まででギザギザだけど、ちょっと前に書いたようにすぐに治るのでこのままで。
これでもまだリンクと背景色のコントラスト比は3.79にしかなってないのであんまり意味なかった気がする。4.5以上のウェブサイトに憧れてる。
ロゴは丸くして、それに合わせて余白を調節した。広い画面ではロゴと見出しを結んだ直線とナビゲーションと日付を結んだ直線が直交するくらいに調節してる。狭い画面ではヘッダーの上下の余白を揃えたくらい。
グローバル・フッターはPNGのテクスチャを追放しただけでなく大幅にマークアップもいじった。自分関連のリンクとウェブサイト関連のリンクで大きく2つに分かれるようにして、長くてかっこいい英文はやめた。ソーシャル・アイコンは撤去してもいいかなーと思ったけど、それはそれで寂しい気もするので残しておいた。
必要になったハックは流行ってるっぽいので_shame.scssという名前でまとめた。Firefoxの小数の丸めがちょっと違っててカラム落ちすることへの対策のみ。0.01emはマジックナンバー。
$half-pixel: (0.5px / 16px) * 1em;とか作ってこれを使うともっと正確になる気がするけどまだやってない。というかブラウザーどころかプロパティー単位で%やemからpx単位に落としこむあたりの挙動が微妙に違うのがまぁまぁ困るので統一されることを願ってやまない。