akiroom.comのトップページのデザインを変更した

ホントは前々から気づいていたんだけど、 akiroom.com のトップページの背景画像がちぎれていたり、Thunderbolt DisplayやRetina Displayで見ると醜い状態になっていたのがいよいよ気になるようになった。

新しいデザイン置き換えたんだけど、だいたい1時間ぐらいでアップデートできたのでよかった

  • Githubでプライベートリポジトリを作成: https://github.com/akiroom/akiroom-com-top (プライベートなので404になります)
  • middlemanを使って、HAML, SCSS+Compassで書いたものをビルドした
  • Bootstrapは使わず、media queryは手書き
  • 画像や色はあまり選ぶのが面倒なので使わず

1時間でそれっぽいものができるのは、本当に良い時代ですね。

HAMLのタグ末尾の><(不等号記号)

これはWhitespace Removalの機能で、タグの周囲の空白を除去してくれる機能。この不等号記号をワニの口だと考えるとちょうどよくて、>を付けると外側の空白、< を付けると内側の空白がそれぞれ除去される。以下、それぞれのサンプル。 続きを読む HAMLのタグ末尾の>< (不等号記号)