全文搜索

themes/hexo-theme-xups/source/css/_base/global.styl

@@ -3,7 +3,7 @@
  */
 .container
   max-width 1180px
-  _width 1180px
+  min-width 1070px
   background-color c-fff
   margin 0 auto 10px
   text-left()

themes/hexo-theme-xups/source/css/_partial/header.styl

@@ -9,10 +9,55 @@
   .header-main
     position relative
     height 68px
-    margin-bottom 0
-.header .logo
-  float left
-  width 260px
+    display flex
+  .logo
+    width 160px
+  .menu
+    margin 0
+    padding 10px
+    list-style-type none
+  #search-box
+    padding 10px
+    font-size 16px
+    flex-grow 1
+    line-height 48px
+    display flex
+    position relative
+    .input-box
+      box-sizing border-box
+      padding 0 3px
+      flex-grow 1
+      > #search-input
+        border none
+        border-bottom 1px solid #9e9e9e
+        background inherit
+        width 50%
+        transition width 0.3s ease-in
+        outline:none
+        &:focus
+          width 80%
+    > #search-result-box
+      position absolute
+      z-index 100
+      line-height 1.2
+      top 48px
+      width 300px
+      max-height 600px
+      overflow-y auto
+      background #eee
+      border 1px solid #333
+      border-radius 5px
+      word-break break-all
+      padding 7px
+      ul
+        list-style none
+        padding-left 0
+        margin-top 0
+      a.search-result-title
+        color #3272b5
+        font-size 20px
+      strong.search-keyword
+        color #ff776d
 .logo
   a
     position relative
@@ -32,24 +77,18 @@
       width 100%
       transition top .5s
       .name
-        display block
         height 100%
         font-size 28px
         font-family "HomizioNova", "Microsoft Yahei"
         font-style italic
       .description
-        display block
+        line-height (@height/2)
         height 100%
         color c-fff
         background-color #51cc87
         opacity .85
     &:hover .cover
       top -100%
-.header .menu
-  margin 0
-  padding 10px
-  float left
-  list-style-type none
 .menu
   .item
     float left
@@ -63,11 +102,6 @@
         color #ff5e52
   .current a
     color #ff5e52
-.header .profile
-  position absolute
-  right 0
-  top 0
-  height 68px
 .profile
   .avatar
     width 50px

themes/hexo-theme-xups/source/css/_partial/responsive.styl

@@ -1,9 +1,10 @@
 /*!
  * 响应式媒体查询
  */
-@media screen and (min-width: 1440px)
+/*
+@media screen and (max-width: 1440px)
   .container
-    max-width 1340px
+    max-width 1140px
   .content
     min-height 500px
 @media screen and (max-width: 1000px) and (min-width: 960px)
@@ -11,10 +12,12 @@
     max-width 952px
   .content
     min-height 500px
+*/
 @media screen and (max-width: 959px)
   .container
     margin-bottom 10px
     padding 0 10px
+    min-width auto
   .content
       min-height 500px
   .sidebar
@@ -25,12 +28,13 @@
   .header
     .header-main
       height auto
-      padding-bottom 10px
     .logo
       float none
-      width auto
+      width 100%
     .profile
       display none
+    #search-box
+      display none
     .menu
       float none
       padding 8px 10px
@@ -38,6 +42,9 @@
       background-color #fff
       border-top 0
       overflow hidden
+      position absolute
+      right 10px
+      top 69px
       .item
         width 50%
         height auto