はてダのデザインを刷新しました

見ての通り、はてダのデザインを変更しました。前回は既存テーマをいぢるだけだったのですが今回はCSSフルスクラッチです。しかも、CSS3*1を使ってみたのでSafari4,Firefox3.5,Chrome4以上推奨です。IEで確認するのが怖くてしょうがない...

(追記)確認してみたところ、推奨はFirefoxのみかも。CSS3のrotateの実装がバラバラなのでChromeではそもそも表示されず、Safariではちょびっとだけしか表示されないっぽいです。

まだ粗があるかもしれないので、見つけ次第直しますが一応現段階のCSSなどを載せておきます。
ヘッダ

<div class="main">
<hatena name="calendar">
<hatena name="section" listlimit="5">

フッタ

</div>
<div class="sidebar">
	<hatena name="profile" template="hatena-module">
        <hatena name="sectioncategory" template="dropdown">
	<hatena name="searchform" template="hatena-module">
　　　　<hatena name="pv" template="hatena-module">
</div>

CSS

body {
background-color: rgb(220, 220, 220);
}

a, a:visited  {
color: rgb(60, 60, 60);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

//日記のタイトル
h1 {
position: absolute;
left: -750px;
top: 700px;
font-size: 120px;
//回転
-webkit-transform: rotate(90deg); //webkitでのcss3実装
-moz-transform: rotate(90deg); //mozillaでのcss3実装
z-index: 0;
}

h1 a {
color: white !important;
}

h1 a:hover {
text-decoration: none !important;
}

//日付
h2 {
position: relative;
left: -600px;
background-color: rgb(230, 230, 0);
border-left: 600px solid rgb(230, 230, 0);
z-index: 0;
}

h2 a {
color: black;
text-decoration: none;
}

//メイン部分(右のカラム)
.main {
position: absolute;
width: 800px;
right: 5;
}

//サイドバー部分(左のカラム)
.sidebar {
position: fixed; //位置固定
width: 200px;
right: 810px;
height: 2000px;
top: 0;
padding-top: 70px;
background-color: rgba(160, 160, 160, 0.5); //RGB+透過度を指定できるcss3
border-right: 5px solid rgba(100, 100, 100, 0.3);
z-index: 1;
}

//編集 の文字を小さく
.edit {
font-size: 10px;
}

//見出しのタイトル
.title {
position: relative;
left: -600px;
width: 800px;
background-color: rgb(230, 0, 230);
border-left: 600px solid rgb(230, 0, 230);
z-index: -1;
}

.title a {
color: white !important;
text-decoration: none;
}

いやぁ、CSS3便利ですね。はじめてCSSを使ったときのような興奮を久しぶりにに味わいました。はてなにデザイン買ってもらえないかな(ry

*1:外部リソースが読み込めない仕様っぽいので