* change header style for small screens.

docs/css/doc.css

@@ -2220,13 +2220,6 @@ body.page-show {
   overflow: hidden;
   background-color: #f1f1f1;
 }
-body.page-show #headContainer {
-  position: fixed;
-  top: 80px;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-}
 body.page-show #pageContainer {
   display: block;
   -webkit-transition: top .3s cubic-bezier(.175, .885, .32, 1);
@@ -2344,10 +2337,6 @@ body.page-show.page-show-full .path-max-btn:hover > .path-1:after {
   width: 10px;
   height: 10px;
 }
-body.page-show.page-show-full #searchForm {
-  filter: alpha(opacity=0);
-  opacity: 0;
-}
 body.page-show[data-page-accent="blue"] .path-zui-36:before,
 body.page-show[data-page-accent="blue"] .path-zui-36:after {
   border-color: #03b8cf;
@@ -2650,6 +2639,9 @@ body.page-show[data-page-accent="purple"] #pageTogger:hover:after {
   background-color: #8666b8;
 }
 @media (max-width: 767px) {
+  #search {
+    padding: 30px 10px 40px;
+  }
   #pageTogger {
     bottom: -72px;
     left: 8px;
@@ -2680,53 +2672,69 @@ body.page-show[data-page-accent="purple"] #pageTogger:hover:after {
   #pageContent > section > header > h3:after {
     left: -18px;
   }
-  body.page-show #search {
-    width: 40%;
-    padding-left: 0;
+  body.compact-mode #header {
+    height: 413px;
   }
-  body.page-show #searchInput:-moz-placeholder {
+  body.compact-mode #grid {
+    margin-top: 433px;
+  }
+  body.compact-mode #navbar .navbar-brand .zui-version,
+  body.compact-mode #navbar .navbar-brand .brand-title {
+    display: none;
+  }
+  body.compact-mode #navbar .navbar-brand #compactTogger {
+    left: -12px;
+    margin-left: 0;
+  }
+  body.compact-mode #search {
+    right: 60px;
+    left: 70px;
+  }
+  body.compact-mode #searchInput:-moz-placeholder {
     color: transparent;
   }
-  body.page-show #searchInput::-moz-placeholder {
+  body.compact-mode #searchInput::-moz-placeholder {
     color: transparent;
   }
-  body.page-show #searchInput:-ms-input-placeholder {
+  body.compact-mode #searchInput:-ms-input-placeholder {
     color: transparent;
   }
-  body.page-show #searchInput::-webkit-input-placeholder {
+  body.compact-mode #searchInput::-webkit-input-placeholder {
     color: transparent;
   }
-  body.page-show.input-query-focus #search {
-    width: auto;
-    max-width: none;
-    margin-right: 50px;
-    margin-left: 0;
+  body.page-show #navbar .navbar-toggle {
+    margin-right: 0;
+  }
+  body.input-query-focus #search {
+    right: 10px;
+    left: 10px;
   }
-  body.page-show.input-query-focus #searchInput:-moz-placeholder {
+  body.input-query-focus #searchInput:-moz-placeholder {
     color: #e5e5e5;
   }
-  body.page-show.input-query-focus #searchInput::-moz-placeholder {
+  body.input-query-focus #searchInput::-moz-placeholder {
     color: #e5e5e5;
   }
-  body.page-show.input-query-focus #searchInput:-ms-input-placeholder {
+  body.input-query-focus #searchInput:-ms-input-placeholder {
     color: #e5e5e5;
   }
-  body.page-show.input-query-focus #searchInput::-webkit-input-placeholder {
+  body.input-query-focus #searchInput::-webkit-input-placeholder {
     color: #e5e5e5;
   }
-  body.page-show.input-query-focus #searchInput:-moz-placeholder {
+  body.input-query-focus #searchInput:-moz-placeholder {
     color: rgba(255, 255, 255, .5);
   }
-  body.page-show.input-query-focus #searchInput::-moz-placeholder {
+  body.input-query-focus #searchInput::-moz-placeholder {
     color: rgba(255, 255, 255, .5);
   }
-  body.page-show.input-query-focus #searchInput:-ms-input-placeholder {
+  body.input-query-focus #searchInput:-ms-input-placeholder {
     color: rgba(255, 255, 255, .5);
   }
-  body.page-show.input-query-focus #searchInput::-webkit-input-placeholder {
+  body.input-query-focus #searchInput::-webkit-input-placeholder {
     color: rgba(255, 255, 255, .5);
   }
-  body.page-show.input-query-focus #navbar .navbar-brand {
+  body.input-query-focus #navbar .navbar-brand,
+  body.input-query-focus #navbar .navbar-toggle {
     display: none;
   }
 }

index.html

@@ -26,7 +26,7 @@
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
-            <a href="/" class="navbar-brand"><span class="path-zui-36"><i class="path-1"></i><i class="path-2"></i></span> ZUI &nbsp;<small class="zui-version"></small> <i data-toggle="tooltip" title="展开顶部" id="compactTogger" class="icon icon-long-arrow-up"></i></a>
+            <a href="/" class="navbar-brand"><span class="path-zui-36"><i class="path-1"></i><i class="path-2"></i></span> <span class="brand-title">ZUI</span> &nbsp;<small class="zui-version"></small> <i data-toggle="tooltip" title="展开顶部" id="compactTogger" data-placement="bottom" class="icon icon-long-arrow-up"></i></a>
           </div>
           <nav class="collapse navbar-collapse zui-navbar-collapse">
             <ul class="nav navbar-nav navbar-right">

src/less/doc.less

@@ -1788,14 +1788,6 @@ body.page-show {
   background-color: #f1f1f1;
   overflow: hidden;
 
-  #headContainer {
-    position: fixed;
-    left: 0;
-    top: 80px;
-    right: 0;
-    z-index: 1030;
-  }
-
   #pageContainer {
     display: block;
     .transition-fast(top);
@@ -1945,8 +1937,6 @@ body.page-show {
         }
       }
     }
-
-    #searchForm {.opacity(0)}
   }
 
   &[data-page-accent="blue"] {
@@ -1973,6 +1963,9 @@ body.page-show {
 }
 
 @media (max-width: 767px) {
+  #search {
+    padding: 30px 10px 40px;
+  }
   #pageTogger {
     bottom: -72px;
     left: 8px;
@@ -2009,31 +2002,47 @@ body.page-show {
     }
   }
 
-  body.page-show {
-     #search {
-      width: 40%;
-      padding-left: 0;
-     }
+  body.compact-mode {
+    #header {
+      height: 413px;
+    }
+    #grid {
+      margin-top: 433px;
+    }
+
+    #navbar .navbar-brand {
+      .zui-version, .brand-title {display: none}
+
+      #compactTogger {margin-left: 0; left: -12px;}
+    }
+
+    #search {
+      left: 70px;
+      right: 60px;
+    }
 
     #searchInput{
       .placeholder(transparent);
     }
+
+  }
+
+  body.page-show {
+    #navbar .navbar-toggle {margin-right: 0;}
   }
 
-  body.page-show.input-query-focus {
+  body.input-query-focus {
     #search {
-      width: auto;
-      margin-left: 0;
-      margin-right: 50px;
-      max-width: none;
+      left: 10px;
+      right: 10px;
     }
-
+    
     #searchInput{
       .placeholder(#e5e5e5);
       .placeholder(rgba(255, 255, 255, .5));
     }
 
-    #navbar .navbar-brand {display: none}
+    #navbar .navbar-brand, #navbar .navbar-toggle {display: none}
   }
 }