ブログデザイン

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に変更