リデザイン 2012-09-17

Posted on

スタイルは Sass で SCSS 文法で書くことにした。カラムレイアウトは全体の幅を決めてやってみたり、カラム単位の幅を決めてやってみたりいろいろ悩んで、今はカラムの幅を決める方法にしてみている。

normalize.css はライセンス部分以外のコメントを出力されないようにしたくらいでそのまま使っている。基本的なスタイルはシンプルにして、記事ページは記事ごとにスタイルを変えてみるのをたまにやってみたいと思っている。それにしても何もなさすぎなので、もうちょっとがんばりたい。記事ページのデザインが変わっても、共通デザインにするつもりの逆正三角のヘッダは border を使う方法にした。

$length: 60px;
$half-length: ($length / 2);
$color: rgb(0, 0, 0);

selector {
  width: $length;
  border-top: ($half-length * 1.732050807568877) solid $color;
  border-right: $half-length solid transparent;
  border-left: $half-length solid transparent;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

実際はわざわざ頂点を上下左右選べるようにミックスインを作ってまでやってみたけれど、無理やり感あるので変えそう。