Tumblr のカスタムテーマの更新

https://zenn.dev/15/articles/be0de208661310

HTML と CSS がぐちゃぐちゃになってきてメンテナンスが無理になってきたので、Tailwind 風のデザインシステムを作ったりしてメンテナンス性を上げたい。

Tumblrのブログのトップから個別ページに遷移したときにブラウザの履歴に同じURLが2個残ってしまって、マウスの戻るやiOSの戻るジェスチャで一発で戻れなくなってしまう問題、右上のコントロールメニューが出てくるときに履歴を追加してしまってるせいだった
おそらくバグっぽいのだけれども、Backbone.js とかに依存しているっぽいし、直るとは思えない。
一旦 js で iframe をすべて非表示（無効）にしてコントロールメニューが履歴を書き換える前に止めることに成功。

Subject と Date が並んでるところの適切なマークアップがわからない。
dd dl dt はちょっと違う気がする。
MDN のページの似たような構造を見ると、リストで括られてはいるが Subject は p で、Date は span とかで、そんなに構造化されていないので、まあ無理なのかもしれない。
https://developer.mozilla.org/ja/

Tailwind は CDN が js なのかー
CSS で実現できるところだけほしいけどなさそうなので自前で書く

:visited に opacity 使えないのつらい

div 使ったら負けだと思ってたけど普通に負けた

font-size って 18px くらいの方が見やすいよな～って思ってデカ目にしてたけど、それは視力の問題だったりするのでブラウザなり OS なりの拡大を使ってもらうほうが良い気がしてきた。

あと index view では header が大きめでも、 page view では header が小さいほうが記事の内容がファーストビューに多く入るし記事に集中できるよな、って思ってたけど、header がチカチカ切り替わるほうがデメリットな気もしてきた。

ブログとホムペは人の遷移の仕方が違う

Windows の Edge で font-family: Roboto が反映される謎…
DevTools を見るとローカルファイルから持ってきてるっぽいけどローカルに Roboto 入れてないし、Chrome だと Roboto 反映されない

js 使わないで遷移させて like の挙動にするのに超時間かかった

そして Tumblr の文法で表現しきれないところは仕方なく js で…

だいたいできたので明日は運用中のブログに適用してみる

なんか :visited とかの反映が PC だとうまくいくけど、iOS とか Android だとダメだな…
クラス名が悪いのか

なるほど iOS Safari と Android Chrome だと、もともと class 名を当ててたスタイルを prefers-color-scheme: dark の中で上書きしようとしても、class 名がないと詳細度が負けるからスタイルが当たらない

iOS Safari, macOS Safari だと :visited に filter とか無効なスタイルを書いても無視されるわけじゃなくて a のデフォルトが強制的に当たるっぽい

DONE

text-box-trim (leading-trim) が早く来てほしい
https://qiita.com/rhrh__8/items/b1fbfaf6b604a3ffb8b0#text-box-trim--text-box-edge