From 3f2d28c0cc716dfd6d9b33201ec8ca8c01447a75 Mon Sep 17 00:00:00 2001
From: fen <fen1211@gmail.com>
Date: Thu, 10 Oct 2013 17:45:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=85=E6=A0=BC=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/common-js.php          |   8 +-
 admin/css/grid.css           | 650 +++++++++++++++++++++--------------
 admin/css/normalize.css      | 406 ++++++++++++++++++++++
 admin/header.php             |  14 +-
 admin/index.php              |   6 +-
 admin/login.php              |   4 +-
 admin/manage-comments.php    |   4 +-
 admin/manage-medias.php      |   4 +-
 admin/manage-metas.php       |   4 +-
 admin/manage-pages.php       |   4 +-
 admin/manage-posts.php       |   4 +-
 admin/manage-users.php       |   4 +-
 admin/media.php              |   4 +-
 admin/menu.php               |   2 +-
 admin/options-discussion.php |   4 +-
 admin/options-general.php    |   4 +-
 admin/options-permalink.php  |   4 +-
 admin/options-plugin.php     |   4 +-
 admin/options-reading.php    |   4 +-
 admin/options-theme.php      |   4 +-
 admin/page-title.php         |   4 +-
 admin/plugins.php            |   4 +-
 admin/profile.php            |   4 +-
 admin/register.php           |   4 +-
 admin/scss/grid.scss         | 149 ++++++++
 admin/theme-editor.php       |   4 +-
 admin/themes.php             |   4 +-
 admin/upgrade.php            |   4 +-
 admin/user.php               |   4 +-
 admin/welcome.php            |   4 +-
 admin/write-page.php         |   4 +-
 admin/write-post.php         |   4 +-
 32 files changed, 1009 insertions(+), 326 deletions(-)
 create mode 100644 admin/css/normalize.css
 create mode 100644 admin/scss/grid.scss

diff --git a/admin/common-js.php b/admin/common-js.php
index 1712e806..d39e0258 100644
--- a/admin/common-js.php
+++ b/admin/common-js.php
@@ -1,8 +1,8 @@
 <?php if(!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
-<script type="text/javascript" src="<?php $options->adminUrl('javascript/jquery.js?v=' . $suffixVersion); ?>"></script> 
-<script type="text/javascript" src="<?php $options->adminUrl('javascript/jquery-ui.js?v=' . $suffixVersion); ?>"></script> 
-<script type="text/javascript" src="<?php $options->adminUrl('javascript/typecho.js?v=' . $suffixVersion); ?>"></script>
-<script type="text/javascript">
+<script src="<?php $options->adminUrl('javascript/jquery.js?v=' . $suffixVersion); ?>"></script> 
+<script src="<?php $options->adminUrl('javascript/jquery-ui.js?v=' . $suffixVersion); ?>"></script> 
+<script src="<?php $options->adminUrl('javascript/typecho.js?v=' . $suffixVersion); ?>"></script>
+<script>
     (function () {
         $(document).ready(function() {
             <?php if ($notice->highlight): ?>                
diff --git a/admin/css/grid.css b/admin/css/grid.css
index e97847ba..5b0f399a 100644
--- a/admin/css/grid.css
+++ b/admin/css/grid.css
@@ -1,261 +1,389 @@
-/* vim: set et sw=4 ts=4 sts=4 fdm=marker ff=unix fenc=utf8 */
-/**
- * 格栅系统
- *
- * 根据 Taobao 栅格系统规范制定
- *
- * @change
- * 2008-09-19
- *      初始化版本，使用“浮动定位布局”
- *
- * @author  i.feelinglucky@gmail.com
- * @since   2008-09-19
- * @link    http://www.gracecode.com/
- * @version $Id: grid.source.css 470 2008-09-26 15:23:38Z i.feelinglucky $
- */
-
-.body {
-    clear:both;
-    width:100%;
-}
-
-.container {
-    float:left;
-    width:100%;
-}
-
-.container:after {
-    content: "."; 
-    display: block;
-    height: 0; 
-    clear: both; 
-    visibility: hidden;
-}
-
-/**
- * 目前制定的是 950px 宽度
- */
-.body-950 {
-    width: 950px;
-    margin: 0px auto;
-}
-
-.prefix {
-	padding-left: 10px;
-}
-
-.suffix {
-	padding-right: 10px;
-}
-
-/**
- * 将页面分成了 24 份，同时指定每个栅格的基本样式
- */
-.column-01, .column-02, .column-03, .column-04, .column-05,
-.column-06, .column-07, .column-08, .column-09, .column-10,
-.column-11, .column-12, .column-13, .column-14, .column-15,
-.column-16, .column-17, .column-18, .column-19, .column-20,
-.column-21, .column-22, .column-23, .column-24 {
-    float: left;
-    width: 100%;
-	display: inline;
-	position: relative;
-}
-
-/**
- * 950 宽度的格栅
- *
- * 公式：(40 x N) - 10 = 950
- */
-.body-950 .column-01 {
-    width: 30px;
-}
-
-.body-950 .column-02 {
-    width: 70px;
-}
-
-.body-950 .column-03 {
-    width: 110px;
-}
-
-.body-950 .column-04 {
-    width: 150px;
-}
-
-.body-950 .column-05 {
-    width: 190px;
-}
-
-.body-950 .column-06 {
-    width: 230px;
-}
-
-.body-950 .column-07 {
-    width: 270px;
-}
-
-.body-950 .column-08 {
-    width: 310px;
-}
-
-.body-950 .column-09 {
-    width: 350px;
-}
-
-.body-950 .column-10 {
-    width: 390px;
-}
-
-.body-950 .column-11 {
-    width: 430px;
-}
-
-.body-950 .column-12 {
-    width: 470px;
-}
-
-.body-950 .column-13 {
-    width: 510px;
-}
-
-.body-950 .column-14 {
-    width: 550px;
-}
-
-.body-950 .column-15 {
-    width: 590px;
-}
-
-.body-950 .column-16 {
-    width: 630px;
-}
-
-.body-950 .column-17 {
-    width: 670px;
-}
-
-.body-950 .column-18 {
-    width: 710px;
-}
-
-.body-950 .column-19 {
-    width: 750px;
-}
-
-.body-950 .column-20 {
-    width: 790px;
-}
-
-.body-950 .column-21 {
-    width: 830px;
-}
-
-.body-950 .column-22 {
-    width: 870px;
-}
-
-.body-950 .column-23 {
-    width: 910px;
-}
-
-.body-950 .column-24 {
-    width: 950px;
-}
-
-/**
- * 对比栅格，设置偏移位置
- */
-.body-950 .column, .body-950 .start-01 {
-    padding-left: 0;
-}
-
-.body-950 .start-02 {
-    padding-left: 40px;
-}
-
-.body-950 .start-03 {
-    padding-left: 80px;
-}
-
-.body-950 .start-04 {
-    padding-left: 120px;
-}
-
-.body-950 .start-05 {
-    padding-left: 160px;
-}
-
-.body-950 .start-06 {
-    padding-left: 200px;
-}
-
-.body-950 .start-07 {
-    padding-left: 240px;
-}
-
-.body-950 .start-08 {
-    padding-left: 280px;
-}
-
-.body-950 .start-09 {
-    padding-left: 320px;
-}
-
-.body-950 .start-10 {
-    padding-left: 360px;
-}
-
-.body-950 .start-11 {
-    padding-left: 400px;
-}
-
-.body-950 .start-12 {
-    padding-left: 440px;
-}
-
-.body-950 .start-13 {
-    padding-left: 480px;
-}
-
-.body-950 .start-14 {
-    padding-left: 520px;
-}
-
-.body-950 .start-15 {
-    padding-left: 560px;
-}
-
-.body-950 .start-16 {
-    padding-left: 600px;
-}
-
-.body-950 .start-17 {
-    padding-left: 640px;
-}
-.body-950 .start-18 {
-    padding-left: 680px;
-}
-.body-950 .start-19 {
-    padding-left: 720px;
-}
-
-.body-950 .start-20 {
-    padding-left: 760px;
-}
-
-.body-950 .start-21 {
-    padding-left: 800px;
-}
-
-.body-950 .start-22 {
-    padding-left: 840px;
-}
-
-.body-950 .start-23 {
-    padding-left: 880px;
-}
-
-.body-950 .start-24 {
-    padding-left: 920px;
-}
+/*
+ * Bento Grid System
+ * Source: https://github.com/fenbox/bento
+ * Version: 1.0
+ * Update: 10.10.2013
+ */
+.col-group [class*="col-"] {
+  float: left;
+  min-height: 1px;
+  padding-right: 10px;
+  padding-left: 10px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.col-group [class*="push-"],
+.col-group [class*="pull-"] {
+  position: relative; }
+
+/*
+ * Mobile and up
+ */
+.col-mb-1 {
+  width: 8.33333%; }
+
+.col-mb-2 {
+  width: 16.66667%; }
+
+.col-mb-3 {
+  width: 25%; }
+
+.col-mb-4 {
+  width: 33.33333%; }
+
+.col-mb-5 {
+  width: 41.66667%; }
+
+.col-mb-6 {
+  width: 50%; }
+
+.col-mb-7 {
+  width: 58.33333%; }
+
+.col-mb-8 {
+  width: 66.66667%; }
+
+.col-mb-9 {
+  width: 75%; }
+
+.col-mb-10 {
+  width: 83.33333%; }
+
+.col-mb-11 {
+  width: 91.66667%; }
+
+.col-mb-12 {
+  width: 100%; }
+
+/*
+ * Tablet and up
+ */
+@media (min-width: 768px) {
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 728px; }
+
+  .col-tb-1 {
+    width: 8.33333%; }
+
+  .col-tb-2 {
+    width: 16.66667%; }
+
+  .col-tb-3 {
+    width: 25%; }
+
+  .col-tb-4 {
+    width: 33.33333%; }
+
+  .col-tb-5 {
+    width: 41.66667%; }
+
+  .col-tb-6 {
+    width: 50%; }
+
+  .col-tb-7 {
+    width: 58.33333%; }
+
+  .col-tb-8 {
+    width: 66.66667%; }
+
+  .col-tb-9 {
+    width: 75%; }
+
+  .col-tb-10 {
+    width: 83.33333%; }
+
+  .col-tb-11 {
+    width: 91.66667%; }
+
+  .col-tb-12 {
+    width: 100%; }
+
+  .col-offset-0 {
+    margin-left: 0%; }
+
+  .col-offset-1 {
+    margin-left: 8.33333%; }
+
+  .col-offset-2 {
+    margin-left: 16.66667%; }
+
+  .col-offset-3 {
+    margin-left: 25%; }
+
+  .col-offset-4 {
+    margin-left: 33.33333%; }
+
+  .col-offset-5 {
+    margin-left: 41.66667%; }
+
+  .col-offset-6 {
+    margin-left: 50%; }
+
+  .col-offset-7 {
+    margin-left: 58.33333%; }
+
+  .col-offset-8 {
+    margin-left: 66.66667%; }
+
+  .col-offset-9 {
+    margin-left: 75%; }
+
+  .col-offset-10 {
+    margin-left: 83.33333%; }
+
+  .col-offset-11 {
+    margin-left: 91.66667%; }
+
+  .col-offset-12 {
+    margin-left: 100%; }
+
+  .col-pull-0 {
+    right: 0%; }
+
+  .col-pull-1 {
+    right: 8.33333%; }
+
+  .col-pull-2 {
+    right: 16.66667%; }
+
+  .col-pull-3 {
+    right: 25%; }
+
+  .col-pull-4 {
+    right: 33.33333%; }
+
+  .col-pull-5 {
+    right: 41.66667%; }
+
+  .col-pull-6 {
+    right: 50%; }
+
+  .col-pull-7 {
+    right: 58.33333%; }
+
+  .col-pull-8 {
+    right: 66.66667%; }
+
+  .col-pull-9 {
+    right: 75%; }
+
+  .col-pull-10 {
+    right: 83.33333%; }
+
+  .col-pull-11 {
+    right: 91.66667%; }
+
+  .col-pull-12 {
+    right: 100%; }
+
+  .col-push-0 {
+    left: 0%; }
+
+  .col-push-1 {
+    left: 8.33333%; }
+
+  .col-push-2 {
+    left: 16.66667%; }
+
+  .col-push-3 {
+    left: 25%; }
+
+  .col-push-4 {
+    left: 33.33333%; }
+
+  .col-push-5 {
+    left: 41.66667%; }
+
+  .col-push-6 {
+    left: 50%; }
+
+  .col-push-7 {
+    left: 58.33333%; }
+
+  .col-push-8 {
+    left: 66.66667%; }
+
+  .col-push-9 {
+    left: 75%; }
+
+  .col-push-10 {
+    left: 83.33333%; }
+
+  .col-push-11 {
+    left: 91.66667%; }
+
+  .col-push-12 {
+    left: 100%; }
+
+  .col-group {
+    margin-right: -10px;
+    margin-left: -10px; } }
+/*
+ * Desktop and up
+ */
+@media (min-width: 992px) {
+  .container {
+    max-width: 952px; }
+
+  .col-1 {
+    width: 8.33333%; }
+
+  .col-2 {
+    width: 16.66667%; }
+
+  .col-3 {
+    width: 25%; }
+
+  .col-4 {
+    width: 33.33333%; }
+
+  .col-5 {
+    width: 41.66667%; }
+
+  .col-6 {
+    width: 50%; }
+
+  .col-7 {
+    width: 58.33333%; }
+
+  .col-8 {
+    width: 66.66667%; }
+
+  .col-9 {
+    width: 75%; }
+
+  .col-10 {
+    width: 83.33333%; }
+
+  .col-11 {
+    width: 91.66667%; }
+
+  .col-12 {
+    width: 100%; }
+
+  .col-offset-0 {
+    margin-left: 0%; }
+
+  .col-offset-1 {
+    margin-left: 8.33333%; }
+
+  .col-offset-2 {
+    margin-left: 16.66667%; }
+
+  .col-offset-3 {
+    margin-left: 25%; }
+
+  .col-offset-4 {
+    margin-left: 33.33333%; }
+
+  .col-offset-5 {
+    margin-left: 41.66667%; }
+
+  .col-offset-6 {
+    margin-left: 50%; }
+
+  .col-offset-7 {
+    margin-left: 58.33333%; }
+
+  .col-offset-8 {
+    margin-left: 66.66667%; }
+
+  .col-offset-9 {
+    margin-left: 75%; }
+
+  .col-offset-10 {
+    margin-left: 83.33333%; }
+
+  .col-offset-11 {
+    margin-left: 91.66667%; }
+
+  .col-offset-12 {
+    margin-left: 100%; }
+
+  .col-pull-0 {
+    right: 0%; }
+
+  .col-pull-1 {
+    right: 8.33333%; }
+
+  .col-pull-2 {
+    right: 16.66667%; }
+
+  .col-pull-3 {
+    right: 25%; }
+
+  .col-pull-4 {
+    right: 33.33333%; }
+
+  .col-pull-5 {
+    right: 41.66667%; }
+
+  .col-pull-6 {
+    right: 50%; }
+
+  .col-pull-7 {
+    right: 58.33333%; }
+
+  .col-pull-8 {
+    right: 66.66667%; }
+
+  .col-pull-9 {
+    right: 75%; }
+
+  .col-pull-10 {
+    right: 83.33333%; }
+
+  .col-pull-11 {
+    right: 91.66667%; }
+
+  .col-pull-12 {
+    right: 100%; }
+
+  .col-push-0 {
+    left: 0%; }
+
+  .col-push-1 {
+    left: 8.33333%; }
+
+  .col-push-2 {
+    left: 16.66667%; }
+
+  .col-push-3 {
+    left: 25%; }
+
+  .col-push-4 {
+    left: 33.33333%; }
+
+  .col-push-5 {
+    left: 41.66667%; }
+
+  .col-push-6 {
+    left: 50%; }
+
+  .col-push-7 {
+    left: 58.33333%; }
+
+  .col-push-8 {
+    left: 66.66667%; }
+
+  .col-push-9 {
+    left: 75%; }
+
+  .col-push-10 {
+    left: 83.33333%; }
+
+  .col-push-11 {
+    left: 91.66667%; }
+
+  .col-push-12 {
+    left: 100%; } }
+.clearfix, .col-group {
+  zoom: 1; }
+  .clearfix:before, .col-group:before, .clearfix:after, .col-group:after {
+    content: " ";
+    display: table; }
+  .clearfix:after, .col-group:after {
+    clear: both; }
diff --git a/admin/css/normalize.css b/admin/css/normalize.css
new file mode 100644
index 00000000..c2de8df9
--- /dev/null
+++ b/admin/css/normalize.css
@@ -0,0 +1,406 @@
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/admin/header.php b/admin/header.php
index 24608b10..5969174c 100644
--- a/admin/header.php
+++ b/admin/header.php
@@ -3,18 +3,18 @@ if (!defined('__TYPECHO_ROOT_DIR__')) {
     exit;
 }
 
-$header = '<link rel="stylesheet" type="text/css" href="' . Typecho_Common::url('css/reset.css?v=' . $suffixVersion, $options->adminUrl) . '" /> 
-<link rel="stylesheet" type="text/css" href="' . Typecho_Common::url('css/grid.css?v=' . $suffixVersion, $options->adminUrl) . '" /> 
-<link rel="stylesheet" type="text/css" href="' . Typecho_Common::url('css/style.css?v=' . $suffixVersion, $options->adminUrl) . '" />';
+$header = '<link rel="stylesheet" href="' . Typecho_Common::url('css/normalize.css?v=' . $suffixVersion, $options->adminUrl) . '" /> 
+<link rel="stylesheet" href="' . Typecho_Common::url('css/grid.css?v=' . $suffixVersion, $options->adminUrl) . '" /> 
+<link rel="stylesheet" href="' . Typecho_Common::url('css/style.css?v=' . $suffixVersion, $options->adminUrl) . '" />';
 
 /** 注册一个初始化插件 */
 $header = Typecho_Plugin::factory('admin/header.php')->header($header);
 
-?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+?><!DOCTYPE HTML>
+<html lang="zh-CN">
     <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=<?php $options->charset(); ?>" />
+        <meta charset="<?php $options->charset(); ?>" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <title><?php _e('%s - %s - Powered by Typecho', $menu->title, $options->title); ?></title>
         <meta name="robots" content="noindex,nofollow" />
         <?php echo $header; ?>
diff --git a/admin/index.php b/admin/index.php
index 337caec1..9ec3f2c6 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -6,9 +6,9 @@ include 'menu.php';
 $stat = Typecho_Widget::widget('Widget_Stat');
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body col-group">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-06 typecho-dashboard-nav suffix">
                 <h3 class="intro"><?php _e('欢迎使用 Typecho, 您可以使用下面的链接开始您的 Blog 之旅:'); ?></h3>
             
@@ -125,7 +125,7 @@ include 'copyright.php';
 include 'common-js.php';
 ?>
 
-<script type="text/javascript">
+<script>
     (function () {
         window.addEvent('domready', function() {
             <?php if (!Typecho_Cookie::get('__typecho_feed')): ?>
diff --git a/admin/login.php b/admin/login.php
index 9858c4cc..7dc7d79a 100644
--- a/admin/login.php
+++ b/admin/login.php
@@ -5,8 +5,8 @@ include 'header.php';
 $rememberName = Typecho_Cookie::get('__typecho_remember_name');
 Typecho_Cookie::delete('__typecho_remember_name');
 ?>
-<div class="body body-950">
-    <div class="container">
+<div class="body container">
+    <div class="col-group">
         <div class="column-07 start-09 typecho-login">
             <h2 class="logo-dark">typecho</h2>
             <form action="<?php $options->loginAction(); ?>" method="post" name="login">
diff --git a/admin/manage-comments.php b/admin/manage-comments.php
index a907cace..d1bb134a 100644
--- a/admin/manage-comments.php
+++ b/admin/manage-comments.php
@@ -7,9 +7,9 @@ $stat = Typecho_Widget::widget('Widget_Stat');
 $comments = Typecho_Widget::widget('Widget_Comments_Admin');
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24 start-01 typecho-list">
                 <ul class="typecho-option-tabs">
                     <li<?php if(!isset($request->status) || 'approved' == $request->get('status')): ?> class="current"<?php endif; ?>><a href="<?php $options->adminUrl('manage-comments.php'
diff --git a/admin/manage-medias.php b/admin/manage-medias.php
index 50811e26..03d31d18 100644
--- a/admin/manage-medias.php
+++ b/admin/manage-medias.php
@@ -8,9 +8,9 @@ $stat = Typecho_Widget::widget('Widget_Stat');
 
 <?php Typecho_Widget::widget('Widget_Contents_Attachment_Admin')->to($attachments); ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24 start-01">
                 
                 <div class="typecho-list-operate">
diff --git a/admin/manage-metas.php b/admin/manage-metas.php
index eb599ab6..e8111695 100644
--- a/admin/manage-metas.php
+++ b/admin/manage-metas.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main manage-metas">
+        <div class="col-group typecho-page-main manage-metas">
                 <div class="column-16 suffix">
                     <ul class="typecho-option-tabs">
                         <li<?php if(!isset($request->type) || 'category' == $request->get('type')): ?> class="current"<?php endif; ?>><a href="<?php $options->adminUrl('manage-metas.php'); ?>"><?php _e('分类'); ?></a></li>
diff --git a/admin/manage-pages.php b/admin/manage-pages.php
index 412e9da1..d5e9498a 100644
--- a/admin/manage-pages.php
+++ b/admin/manage-pages.php
@@ -6,9 +6,9 @@ include 'menu.php';
 $stat = Typecho_Widget::widget('Widget_Stat');
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24 start-01 typecho-list">
                 <div class="typecho-list-operate">
                 <form method="get">
diff --git a/admin/manage-posts.php b/admin/manage-posts.php
index 0e6cd7e3..5a4c87af 100644
--- a/admin/manage-posts.php
+++ b/admin/manage-posts.php
@@ -6,9 +6,9 @@ include 'menu.php';
 $stat = Typecho_Widget::widget('Widget_Stat');
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24 start-01 typecho-list">
                 <div class="typecho-list-operate">
                 <form method="get">
diff --git a/admin/manage-users.php b/admin/manage-users.php
index 6f9ef843..c3deff61 100644
--- a/admin/manage-users.php
+++ b/admin/manage-users.php
@@ -4,9 +4,9 @@ include 'header.php';
 include 'menu.php';
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24 start-01 typecho-list">
                 <div class="typecho-list-operate">
                 <form method="get">
diff --git a/admin/media.php b/admin/media.php
index f1642b1f..1ee57ab6 100644
--- a/admin/media.php
+++ b/admin/media.php
@@ -7,9 +7,9 @@ Typecho_Widget::widget('Widget_Contents_Attachment_Edit')->to($attachment);
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-16 suffix">
                 <div class="typecho-attachment-photo-box">
                     <?php if ($attachment->attachment->isImage): ?>
diff --git a/admin/menu.php b/admin/menu.php
index 5a6164a2..d21e110d 100644
--- a/admin/menu.php
+++ b/admin/menu.php
@@ -1,5 +1,5 @@
 <?php if(!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
-<div class="typecho-head-nav body-950">
+<div class="typecho-head-nav container">
     <div id="typecho-nav-list">
         <?php $menu->output(); ?>
     </div>
diff --git a/admin/options-discussion.php b/admin/options-discussion.php
index 19eeb95e..9e9a9609 100644
--- a/admin/options-discussion.php
+++ b/admin/options-discussion.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <?php Typecho_Widget::widget('Widget_Options_Discussion')->form()->render(); ?>
             </div>
diff --git a/admin/options-general.php b/admin/options-general.php
index e115d1b6..2a2f20a8 100644
--- a/admin/options-general.php
+++ b/admin/options-general.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <?php Typecho_Widget::widget('Widget_Options_General')->form()->render(); ?>
             </div>
diff --git a/admin/options-permalink.php b/admin/options-permalink.php
index f4aaeb7b..454b21e8 100644
--- a/admin/options-permalink.php
+++ b/admin/options-permalink.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <?php Typecho_Widget::widget('Widget_Options_Permalink')->form()->render(); ?>
             </div>
diff --git a/admin/options-plugin.php b/admin/options-plugin.php
index bd7b49ec..81c8fda9 100644
--- a/admin/options-plugin.php
+++ b/admin/options-plugin.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <?php Typecho_Widget::widget('Widget_Plugins_Config')->config()->render(); ?>
             </div>
diff --git a/admin/options-reading.php b/admin/options-reading.php
index 55b4bc99..aa36cf91 100644
--- a/admin/options-reading.php
+++ b/admin/options-reading.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <?php Typecho_Widget::widget('Widget_Options_Reading')->form()->render(); ?>
             </div>
diff --git a/admin/options-theme.php b/admin/options-theme.php
index 9e2cbfaa..cc8373ad 100644
--- a/admin/options-theme.php
+++ b/admin/options-theme.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <ul class="typecho-option-tabs">
                 <li><a href="<?php $options->adminUrl('themes.php'); ?>"><?php _e('可以使用的外观'); ?></a></li>
                 <li><a href="<?php $options->adminUrl('theme-editor.php'); ?>"><?php _e('编辑当前外观'); ?></a></li>
diff --git a/admin/page-title.php b/admin/page-title.php
index 290e3739..06a7a4b0 100644
--- a/admin/page-title.php
+++ b/admin/page-title.php
@@ -1,12 +1,12 @@
 <?php if(!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 <?php if($notice->have() && in_array($notice->noticeType, array('success', 'notice', 'error'))): ?>
-<div class="container message <?php $notice->noticeType(); ?> popup typecho-radius-bottomleft typecho-radius-bottomright">
+<div class="col-group message <?php $notice->noticeType(); ?> popup typecho-radius-bottomleft typecho-radius-bottomright">
 <ul>
     <?php $notice->lists(); ?>
 </ul>
 </div>
 <?php endif; ?>
-<div class="container typecho-page-title">
+<div class="col-group typecho-page-title">
     <div class="column-24">
         <h2><?php echo $menu->title; ?><?php 
         if (!empty($menu->addLink)) {
diff --git a/admin/plugins.php b/admin/plugins.php
index c02ef133..34d66321 100644
--- a/admin/plugins.php
+++ b/admin/plugins.php
@@ -4,9 +4,9 @@ include 'header.php';
 include 'menu.php';
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24 typecho-list">
                 <?php Typecho_Widget::widget('Widget_Plugins_List_Activated')->to($activatedPlugins); ?>
                 <?php if ($activatedPlugins->have()): ?>
diff --git a/admin/profile.php b/admin/profile.php
index df2dfacb..7df811c2 100644
--- a/admin/profile.php
+++ b/admin/profile.php
@@ -7,9 +7,9 @@ $stat = Typecho_Widget::widget('Widget_Stat');
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-16 suffix typecho-content-panel">
                 <h4>
                 <?php echo '<img class="avatar" src="http://www.gravatar.com/avatar/' . md5($user->mail) . '?s=50&r=X' .
diff --git a/admin/register.php b/admin/register.php
index 234d7569..b0032dbf 100644
--- a/admin/register.php
+++ b/admin/register.php
@@ -7,8 +7,8 @@ $rememberMail = Typecho_Cookie::get('__typecho_remember_mail');
 Typecho_Cookie::delete('__typecho_remember_name');
 Typecho_Cookie::delete('__typecho_remember_mail');
 ?>
-<div class="body body-950">
-    <div class="container">
+<div class="body container">
+    <div class="col-group">
         <div class="column-07 start-09 typecho-login">
             <h2 class="logo-dark">typecho</h2>
             <form action="<?php $options->registerAction(); ?>" method="post" name="register">
diff --git a/admin/scss/grid.scss b/admin/scss/grid.scss
new file mode 100644
index 00000000..7a5f8db1
--- /dev/null
+++ b/admin/scss/grid.scss
@@ -0,0 +1,149 @@
+/*
+ * Bento Grid System
+ * Source: https://github.com/fenbox/bento
+ * Version: 1.0
+ * Update: 10.10.2013
+ */
+
+//
+// Config
+//
+$columns: 12;
+$column-width: 100% / $columns;
+$gutter-width: 20px;
+
+
+// Break point
+$screen-tablet:  768px;
+$screen-desktop: 992px; // Not implemented yet
+
+// Column group
+.col-group {
+  @extend .clearfix;
+}
+
+.col-group [class*="col-"] {
+  float: left;
+  min-height: 1px;
+  padding-right: $gutter-width / 2;
+  padding-left: $gutter-width / 2;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.col-group [class*="push-"],
+.col-group [class*="pull-"] {
+  position: relative;
+}
+
+
+/*
+ * Mobile and up
+ */
+
+@for $index from 1 through $columns {
+  .col-mb-#{$index} {
+    width: $column-width * $index;
+  }
+}
+
+
+/*
+ * Tablet and up
+ */
+
+@media (min-width: $screen-tablet) {
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: $screen-tablet - ($gutter-width * 2);
+    @extend .center-block;
+  }
+
+  // Colunms
+  @for $index from 1 through $columns {
+    .col-tb-#{$index} {
+      width: $column-width * $index;
+    }
+  }
+
+  // Offset
+  @for $index from 0 through $columns {
+    .col-offset-#{$index} {
+      margin-left: $column-width * $index;
+    }
+  }
+
+  // Pull
+  @for $index from 0 through $columns {
+    .col-pull-#{$index} {
+      right: $column-width * $index;
+    }
+  }
+
+  // Push
+  @for $index from 0 through $columns {
+    .col-push-#{$index} {
+      left: $column-width * $index;
+    }
+  }
+
+  // Groups
+  .col-group {
+    margin-right: $gutter-width / -2;
+    margin-left: $gutter-width / -2;
+  }
+}
+
+
+/*
+ * Desktop and up
+ */
+
+@media (min-width: $screen-desktop) {
+  .container {
+    max-width: $screen-desktop - ($gutter-width * 2);
+  }
+
+  // Colunms
+  @for $index from 1 through $columns {
+    .col-#{$index} {
+      width: $column-width * $index;
+    }
+  }
+
+  // Offset
+  @for $index from 0 through $columns {
+    .col-offset-#{$index} {
+      margin-left: $column-width * $index;
+    }
+  }
+
+  // Pull
+  @for $index from 0 through $columns {
+    .col-pull-#{$index} {
+      right: $column-width * $index;
+    }
+  }
+
+  // Push
+  @for $index from 0 through $columns {
+    .col-push-#{$index} {
+      left: $column-width * $index;
+    }
+  }
+}
+
+
+// Clearfix
+.clearfix {
+  zoom: 1;
+  &:before, &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
diff --git a/admin/theme-editor.php b/admin/theme-editor.php
index 1107060c..1ea666fa 100644
--- a/admin/theme-editor.php
+++ b/admin/theme-editor.php
@@ -7,9 +7,9 @@ Typecho_Widget::widget('Widget_Themes_Files')->to($files);
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24">
                 <ul class="typecho-option-tabs">
                     <li><a href="<?php $options->adminUrl('themes.php'); ?>"><?php _e('可以使用的外观'); ?></a></li>
diff --git a/admin/themes.php b/admin/themes.php
index 5e8df617..07604911 100644
--- a/admin/themes.php
+++ b/admin/themes.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-24">
                 <ul class="typecho-option-tabs">
                     <li class="current"><a href="<?php $options->adminUrl('themes.php'); ?>"><?php _e('可以使用的外观'); ?></a></li>
diff --git a/admin/upgrade.php b/admin/upgrade.php
index 3a87cf1f..515a7f75 100644
--- a/admin/upgrade.php
+++ b/admin/upgrade.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <div class="message notice typecho-radius-topleft typecho-radius-topright typecho-radius-bottomleft typecho-radius-bottomright">
                     <form action="<?php echo Typecho_Router::url('do', array('action' => 'upgrade', 'widget' => 'Upgrade'), 
diff --git a/admin/user.php b/admin/user.php
index edefb35e..b488d7e6 100644
--- a/admin/user.php
+++ b/admin/user.php
@@ -6,9 +6,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <?php Typecho_Widget::widget('Widget_Users_Edit')->form()->render(); ?>
             </div>
diff --git a/admin/welcome.php b/admin/welcome.php
index f01b07ad..53cb526d 100644
--- a/admin/welcome.php
+++ b/admin/welcome.php
@@ -5,9 +5,9 @@ include 'menu.php';
 ?>
 
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main">
+        <div class="col-group typecho-page-main">
             <div class="column-22 start-02">
                 <div class="message success typecho-radius-topleft typecho-radius-topright typecho-radius-bottomleft typecho-radius-bottomright">
                     <form action="<?php $options->adminUrl(); ?>" method="get">
diff --git a/admin/write-page.php b/admin/write-page.php
index c5637413..68503ade 100644
--- a/admin/write-page.php
+++ b/admin/write-page.php
@@ -5,9 +5,9 @@ include 'menu.php';
 Typecho_Widget::widget('Widget_Contents_Page_Edit')->to($page);
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main typecho-post-option typecho-post-area">
+        <div class="col-group typecho-page-main typecho-post-option typecho-post-area">
             <form action="<?php $options->index('/action/contents-page-edit'); ?>" method="post" name="write_page">
                 <div class="column-18 suffix">
                     <div class="column-18">
diff --git a/admin/write-post.php b/admin/write-post.php
index 5d6dddbb..7c07a2b2 100644
--- a/admin/write-post.php
+++ b/admin/write-post.php
@@ -5,9 +5,9 @@ include 'menu.php';
 Typecho_Widget::widget('Widget_Contents_Post_Edit')->to($post);
 ?>
 <div class="main">
-    <div class="body body-950">
+    <div class="body container">
         <?php include 'page-title.php'; ?>
-        <div class="container typecho-page-main typecho-post-option typecho-post-area">
+        <div class="col-group typecho-page-main typecho-post-option typecho-post-area">
             <form action="<?php $options->index('/action/contents-post-edit'); ?>" method="post" name="write_post">
                 <div class="column-18 suffix" id="test">
                     <div class="column-18">