add search

update version to 0.4.0

assets/css/default.css

@@ -128,7 +128,7 @@ code {
 }
 
 #blog-list .list-group {
-    height: 100%;
+    height: calc(100% - 3.7rem);
     margin-bottom: 0;
 }
 
@@ -154,6 +154,23 @@ code {
     padding: 0.6rem 0.6rem;
 }
 
+#search-input {
+    text-align: center;
+    width: 100%;
+    height: 3.7rem;
+}
+
+.search-form-input {
+    width: 80%;
+    vertical-align: middle;
+}
+
+.search-info {
+    text-align: center;
+    font-size: 1.2rem;
+    margin: 0.7rem;
+}
+
 .blog-excerpt-img {
     margin: 0 0 0.3rem 0;
 }
@@ -316,7 +333,7 @@ code {
 }
 
 /*-----------------------------------------*/
-/*-----------  animate.css  ------------*/
+/*-------------  animate.css  -------------*/
 /*-----------------------------------------*/
 .animated {
     -webkit-animation-duration: 1s;
@@ -439,4 +456,112 @@ code {
 .bounceInDown {
     -webkit-animation-name: bounceInDown;
     animation-name: bounceInDown;
+}
+
+/*-----------------------------------------*/
+/*---------------  makiko  ----------------*/
+/*-----------------------------------------*/
+.container {
+    margin: 0 auto;
+    text-align: center;
+    /* overflow: hidden; */
+}
+
+*, *:after, *:before {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.input {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+}
+
+.input__field {
+    position: relative;
+    display: block;
+    float: right;
+    padding: 1rem 1.5rem;
+    width: 60%;
+    border: none;
+    border-radius: 0;
+    font-weight: bold;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-appearance: none; /* for box shadows to show on iOS */
+}
+
+.input__field:focus {
+    outline: none;
+}
+
+.input__label {
+    display: inline-block;
+    float: right;
+    padding: 0 1em;
+    width: 40%;
+    font-weight: bold;
+    font-size: 1.2rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.input__label-content {
+    position: relative;
+    display: block;
+    padding: 1.1rem 1.5rem;
+    width: 100%;
+}
+
+/* Makiko */
+.input--makiko {
+    overflow: hidden;
+}
+
+.input__field--makiko {
+    width: 100%;
+    font-size: 1.2rem;
+    background: transparent;
+    z-index: 10;
+    font-weight: 500;
+}
+
+.input__label--makiko {
+    position: absolute;
+    width: 100%;
+    text-align: left;
+    pointer-events: none;
+}
+
+#search-img {
+    content: '';
+    position: absolute;
+    width: 1.6rem;
+    height: 1.6rem;
+    top: 37%;
+    left: 1.3rem;
+    background: url(../image/search.svg) no-repeat center center;
+    background-size: 100%;
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
+    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.input__label-content--makiko {
+    display: block;
+    padding: 1.2rem 0 0 2.3rem;
+    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
+    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+.input__field--makiko:focus + #search-img,
+.input--filled #search-img {
+    -webkit-transform: scale3d(38, 38, 1);
+    transform: scale3d(38, 38, 1);
 }

assets/css/grey.css

@@ -1,9 +1,9 @@
 /*Use Prism to highlight code*/
 @import url("/assets/css/prism/prism-okaidia.css");
 
-/*--------------------------------------*/
-/*-------------导航栏（左列）--------------*/
-/*--------------------------------------*/
+/*---------------------------------------------*/
+/*------------- navigation(left) --------------*/
+/*---------------------------------------------*/
 /*主体*/
 #navigation {
     background-color: #222222;
@@ -32,9 +32,9 @@
     box-shadow: inset -15px 0 15px -15px #040404;
 }
 
-/*----------------------------------------*/
-/*-------------文章列表（中列）--------------*/
-/*----------------------------------------*/
+/*--------------------------------------------*/
+/*----------  article list(middle)  ----------*/
+/*--------------------------------------------*/
 /*主体*/
 #blog-list {
     box-shadow: inset -15px 0 15px -15px #090909;
@@ -109,9 +109,27 @@
 #next-page {
     color: #FFCC00;
 }
-/*----------------------------------------*/
-/*-------------文章内容（右列）--------------*/
-/*----------------------------------------*/
+
+/*makiko*/
+.input--makiko {
+    background: #282828;
+}
+
+.search-info {
+    color: #FFCC00;
+}
+
+#search-img path {
+    fill: #FFCC00 !important;
+}
+
+.input__label-content--makiko {
+    color: #FFCC00;
+}
+
+/*-----------------------------------------*/
+/*-----------  content(right)  ------------*/
+/*-----------------------------------------*/
 #blog-view {
     background-color: #333333;
 }
@@ -163,7 +181,7 @@
 }
 
 .blog-view-content pre code {
-    box-shadow: none!important;
+    box-shadow: none !important;
 }
 
 .blog-view-content blockquote {

assets/css/white.css

@@ -101,6 +101,22 @@ pre[class*="language-"] {
 #next-page {
     color: #F9F9F9;
 }
+/*makiko*/
+.input--makiko {
+    background: #2A2C38;
+}
+
+.search-info {
+    color: #F9F9F9;
+}
+
+#search-img path {
+    fill: #F9F9F9 !important;
+}
+
+.input__label-content--makiko {
+    color: #F9F9F9;
+}
 /*----------------------------------------*/
 /*-------------文章内容（右列）--------------*/
 /*----------------------------------------*/