diff --git a/demo.php b/demo.php
index 7ddb2c6..710f470 100644
--- a/demo.php
+++ b/demo.php
@@ -4,9 +4,9 @@ include "includes/before.php";
 ?>
 
 <div id="content" class="pure-u-1">
-  <div class="padding-1-lr pure-g-r">
-    <div class="pure-u-2-3 pure-g-r">
-      <div class="pure-u-1 padding-1-lr">
+  <div class="container pure-g-r">
+	<div class="pure-u-5-8">
+	  <div id="mirrorlist-container">
         <h2> 镜像列表 </h2>
         <table id="mirrorlist" border="0" cellspacing="0" cellpadding="0" > 
           <thead>
@@ -50,24 +50,14 @@ include "includes/before.php";
           </tr>
           </tbody>
         </table>
-
-      </div>
-    </div>
-    <div class="pure-u-1-3">
-      <div class="aside">
-        <div class="padding-1-lr">
-          <h2>简介</h2>
-          <div class="tuna-logo">
-            <p>Powered by <a href="http://tuna.tsinghua.edu.cn/">
-              <img src="files/logo-01.png" alt="TUNA" /></a>
-            </p>
-          </div>
-          <p> 欢迎来到清华大学开源镜像网站，它由清华大学开源镜像站管理团队维护管理。</p>
-        </div>
-      </div>
-
-
-      <div class="pure-u-1">
+		<div style="height: 600px;">
+		  <h3 style="margin-top: 300px;">我是刷存在感的占位层。</h3>
+		</div> 
+	  </div>
+	</div>
+    <div class="pure-u-3-8">
+      <div>
+		<p> 欢迎来到清华大学开源镜像网站，它由清华大学开源镜像站管理团队维护管理。</p>
         <p>本站可以在校内外通过 IPv4/IPv6 使用。
         <br />本站域名有：</p>
         <ul>
@@ -79,7 +69,7 @@ include "includes/before.php";
         <p><strong>镜像使用所需配置参见 <a href="http://wiki.tuna.tsinghua.edu.cn/MirrorUseHowto">Wiki</a></strong>。</p>
       </div>
 
-      <div class="pure-u-1">
+      <div>
 
         <p>如果您有任何问题或建议，请在我们的 <a href="http://issues.tuna.tsinghua.edu.cn">issue tracker</a>
         上提交 bug，或者访问我们的<a
@@ -91,11 +81,6 @@ include "includes/before.php";
     </div>
   </div>
 </div> <!-- end of content div -->
-<div id="footer" class="pure-u-1">
-  <div class="ack">
-    <p>本站的网络和硬件由清华大学网络工程研究中心提供支持。</p>
-  </div>
-</div> <!-- end of footer div -->
 <?php include("includes/after.php")?>
 
 
diff --git a/includes/after.php b/includes/after.php
index 29ef114..abf7571 100644
--- a/includes/after.php
+++ b/includes/after.php
@@ -1,6 +1,19 @@
 <div id="google_translate_element" style="display:none;"></div>
+
+<div id="footer" class="pure-u-1 pure-g-r">
+  <div class="container">
+  <div class="ack pure-u-3-4">
+    <p>清华大学开源镜像站的网络和硬件由清华大学网络工程研究中心提供支持。</p>
+  </div>
+  <div class="aside pure-u-1-4">
+      <div class="tuna-logo">
+        <p><a href="http://tuna.tsinghua.edu.cn/"><img id="foot-logo" src="files/logo.png" alt="TUNA" /></a></p>
+      </div>
+  </div>
+    </div>
+</div> <!-- end of footer div -->
+
 </div> <!-- end of div wrapper -->
-<div class="placeholder" ></div>
 
 <script type="text/javascript">
 function googleTranslateElementInit() {
diff --git a/includes/before.php b/includes/before.php
index c80bd69..0d52eac 100644
--- a/includes/before.php
+++ b/includes/before.php
@@ -14,13 +14,28 @@ include "includes/bydistro.php";
 
 <style type="text/css">
 <?php
-$tunablue = "#2c7edf";
-$lightblue = "#7daadf";
-$thupurple = "#71337F";
-$grey = "#444";
-$light_grey = "#DDD";
-$light_purple = "#ddb7e1";
-$very_light_purple = "#fef5ff";
+include "includes/colors.php";
+
+$bg_color = $white;
+$theme_color = $thupurple;
+
+$text_color = $grey;
+$link_color = $tunablue;
+$link_hover_color = $lightblue;
+$border_color = $light_grey;
+
+$header_bg_color = $theme_color;
+$header_fg_color = $white;
+$header_fg_color_light = $light_purple;
+
+$menu_active_fg_color = $theme_color;
+$menu_active_bg_color = $white;
+$menu_inactive_fg_color = $white;
+$menu_inactive_bg_color = $theme_color;
+
+$strip_color = $very_light_purple;
+$footer_bg_color = $very_light_grey;
+
 include "includes/tuna.css.php";?>
 </style>
 <!-- <link href="files/tuna.css" rel="stylesheet" type="text/css" /> -->
@@ -34,10 +49,9 @@ include "includes/tuna.css.php";?>
 </head>
 
 <body>
-<div class="placeholder" ></div>
 <div id="wrapper" class="pure-g-r">
   <div id="header" class="pure-u-1">
-    <div class="padding-2-lr pull-left">
+    <div class="container padding-2-lr">
     <h1>清华大学开源镜像站</h1>
     <div class="tagline pure-hidden-phone">
       Portal of Tsinghua University Open Source Software Mirror Sites
@@ -51,9 +65,11 @@ include "includes/tuna.css.php";?>
       </ul>
     </div>
     </div>
+    <!--
     <div class="pull-right pure-hidden-phone">
               <img src="files/logo-w.png" alt="TUNA" /></a>
     </div>
+     -->
   </div> <!-- end of header div -->
   <?php
   if (file_exists('notice.html') && filesize('notice.html') != 0) {
diff --git a/includes/colors.php b/includes/colors.php
new file mode 100644
index 0000000..a1aded4
--- /dev/null
+++ b/includes/colors.php
@@ -0,0 +1,11 @@
+<?php 
+$white = "#FFF";
+$tunablue = "#2c7edf";
+$lightblue = "#7daadf";
+$thupurple = "#71337F";
+$grey = "#444";
+$light_grey = "#DDD";
+$very_light_grey = "#EEE";
+$light_purple = "#ddb7e1";
+$very_light_purple = "#fef5ff";
+?>
diff --git a/includes/tuna.css.php b/includes/tuna.css.php
index 3b850c3..82bfa1f 100644
--- a/includes/tuna.css.php
+++ b/includes/tuna.css.php
@@ -21,28 +21,27 @@
 }
 body {
   font-size: 16px;
-  color: #444;
+  color: <?= $text_color ?>;
 }
 a, a:visited {
-  color: <?= $tunablue ?>;
+  color: <?= $link_color ?>;
   text-decoration: none;
 }
 a:hover {
-  color: <?= $light_blue ?>;
+  color: <?= $link_hover_color ?>;
 }
 h1, h2, h3, h4 {
-  color: <?= $thupurple ?>;
+  color: <?= $theme_color ?>;
 }
-
-.aside {
-  border: 1px solid #777777;
-  background-color: #e6e6e6;
+ul {
+  padding:  0 0 0 20px;
 }
 .placeholder {
   height: 1em;
   width: 100%;
   display: none;
 }
+
 .pull-right {
   float: right;
 }
@@ -57,11 +56,18 @@ h1, h2, h3, h4 {
 }
 
 #wrapper {
-  background-color: #FFFFFF;
+  background-color: <?= $bg_color ?>;
+  width: 100%;
 }
 
 
 @media screen and (min-width: 1130px) {
+
+  .container {
+    margin: 0 5% 0 5%;
+    width: auto;
+  }
+
   .placeholder {
     display: block;
   }
@@ -76,15 +82,26 @@ h1, h2, h3, h4 {
     padding-right: 2em;
   }
   
-  #wrapper {
-    margin: 0 5% 0 5%;
+  #mirrorlist-container {
+    margin: 0 1em;
     width: auto;
   }
 
+  
 }
 
 
 @media screen and (max-width: 1129px) {
+  .container {
+    margin: 0;
+    width: 100%;
+  }
+  
+  #mirrorlist-container {
+    margin: 0 2%;
+    width: auto;
+  }
+
   .padding-1-lr {
     padding-left: 1%;
     padding-right: 1%;
@@ -94,24 +111,21 @@ h1, h2, h3, h4 {
     padding-left: 2%;
     padding-right: 2%;
   }
-  #wrapper {
-    width: 100%;
-  }
 }
 
 #header {
   margin-bottom: 1em;
-  background-color: <?= $thupurple ?>;
+  background-color: <?= $header_bg_color ?>;
 }
 
 #header h1 {
-  color: white;
+  color: <?= $header_fg_color ?>;
   font-weight: normal;
 }
 
 #header .tagline {
   margin-bottom: 1.2em;
-  color: <?= $light_purple ?>;
+  color: <?= $header_fg_color_light ?>;
 }
 
 #header .pure-menu {
@@ -119,33 +133,32 @@ h1, h2, h3, h4 {
 }
 
 #header .pure-menu li {
-  background-color: <?= $thupurple ?>;
+  background-color: <?= $menu_inactive_bg_color ?>;
   height: 100%;
 }
 
 #header .pure-menu li.pure-menu-selected, #header .pure-menu li.pure-menu-selected:hover {
-  background-color: white;
+  background-color: <?= $menu_active_bg_color ?>;
 }
 
 #header .pure-menu li.pure-menu-selected a, #header .pure-menu li.pure-menu-selected a:hover, #header .pure-menu li.pure-menu-selected:hover a, #header .pure-menu li.pure-menu-selected:hover a:hover {
   font-weight: bold;
-  color: <?= $thupurple ?>;
+  color: <?= $menu_active_fg_color ?>;
 }
 
 #header .pure-menu li a {
-  color: white;
+  color: <?= $menu_inactive_fg_color ?>;
 }
 
 #header .pure-menu li a:hover {
   background-color: transparent !important;
-  color: <?= $thupurple ?>;
+  color: <?= $menu_active_fg_color ?>;
 }
 
 #header .pure-menu li:hover {
-  background-color: white;
+  background-color: <?= $menu_active_bg_color ?>;
 }
 
-
 #mirrorlist {
   width: 100%;
   border-spacing: 0;
@@ -166,11 +179,11 @@ h1, h2, h3, h4 {
 }
 
 #mirrorlist thead > tr {
-  border-bottom: 1px solid #DDD;
+  border-bottom: 1px solid <?= $border_color ?>;
 }
 
 #mirrorlist tbody > tr:nth-child(even) {
-  background-color: <?= $very_light_purple ?>;
+  background-color: <?= $strip_color ?>;
 }
 
 #mirrorlist .distribution {
@@ -200,3 +213,13 @@ h1, h2, h3, h4 {
     width: 20%;
   }
 }
+
+
+#footer {
+  border-top: 1px solid <?= $border_color ?>;
+  background-color: <?= $footer_bg_color?>;
+}
+
+#foot-logo {
+  height: 96px;
+}
