ブログデザイン

6月前半でいろいろとブログのデザインを変えた。

• ヘッダ画像
• 選択範囲
• 訪問済みリンク（a:visited）
• 引用箇所（blockquote）
• コード（pre, code）

ヘッダ画像は6/1の記事にしたsvgと同内容で、 デザインの各過程を並べたものだ。
同記事ではアニメーションを付けてある。

選択範囲はグレースケールにした。
後述のcode部分（正確にはpre要素内）は背景色が 異なるため、code::selectionのbackgroundを 変えることでほぼ同色になるようにしている。
background-colorは一般部が#fff、選択範囲が#666、 pre要素#1d1f21なのだが、範囲選択時の背景色の 演算がわからず、（（f-2）+6）/2≒10から#aaaとして みたら大体同じになったのでよしとする。

訪問済みリンクは元々#888で本文とほぼ同色だったせいで リンクかどうかわかりづらかったので、橙#ff8832にしてみた。

引用箇所は枠で囲み、文字は斜体にした。
先頭にはquot.を付けてある。

引用範囲

コードはターミナルウインドウっぽくした。
タイトルバーはborderを上だけ太くし、右上の丸はafter要素で作っている。

code

2016-06-18 追記 引用箇所をコードに合わせて枠囲いからbox-shadowに変更