Improve search box.

6 files changed, 114 insertions, 23 deletions

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 0faa1b7..033c397 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -27,12 +27,8 @@
       {{- range .Site.Menus.main -}}
       <a href="{{ .URL }}">{{ .Name }}</a>
       {{- end -}}
-    </nav>
-    {{ if .Site.Params.EnableSearch -}}
-    <div class="search">
-    {{ partial "search.html" . }}
-    </div>
-    {{ end -}}
+      {{ partial "search.html" -}}
+      </nav>
   </header>
   <main>
     {{ block "main" . }}{{- end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 9e2a0df..9c1f74f 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -4,7 +4,10 @@
 </div>
 <ul class="article-list">
   {{ range .Paginator.Pages -}}
-  <li>{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }} - <a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+  <li class="article-item">
+    <div class="article-date">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }}</div>
+    <div class="article-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></div>
+  </li>
   {{ end -}}
 </ul>
 {{ template "_internal/pagination.html" . -}}
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index 19302e9..70d261c 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -7,7 +7,10 @@
 </div>
 <ul class="article-list">
   {{ range .Paginator.Pages -}}
-  <li>{{ with .Date }}{{ .Format "2006-01-02 15:04" }} - {{ end }}<a href="{{ .RelPermalink }}">{{ .Title }}</a>{{ with .Description }}: {{ . }}{{ end }}</li>
+  <li class="article-item">
+    <div class="article-date">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }}</div>
+    <div class="article-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></div>
+  </li>
   {{ end -}}
 </ul>
 </main>
diff --git a/layouts/index.html b/layouts/index.html
index 1f8affa..320109a 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,7 +4,10 @@
 </div>
 <ul class="article-list">
   {{ range (.Paginate ( where .Site.RegularPages "Type" "in" site.Params.mainSections )).Pages -}}
-  <li>{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }} - <a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+  <li class="article-item">
+    <div class="article-date">{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02 15:04") }}</div>
+    <div class="article-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></div>
+  </li>
   {{ end -}}
 </ul>
 {{ template "_internal/pagination.html" . -}}
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index 53b7b9a..81ff2b6 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -1,3 +1,24 @@
-<div class="container text-center mt-3">
-    <iframe src="https://duckduckgo.com/search.html?site={{.Site.BaseURL}}&prefill={{.Site.Params.search.placeholder}}" style="overflow:hidden;margin:0;padding:0;max-width:80%;height:40px;" frameborder="0"></iframe>
-</div>
\ No newline at end of file
+{{ if .Site.Params.Search -}}
+{{ if .Site.Params.Search -}}
+<div class="search">
+  <script>
+    function check_search() {
+      var s = document.getElementById('keyword').value;
+      s = s.replace(/(^\s*)|(\s*$)/g, '');
+      if (s == '' || s == undefined || s == null) {
+        document.getElementById('keyword').focus();
+        return false;
+      }
+      document.getElementById('wd').value = s + " site:{{ .Site.BaseURL }}";
+      return true;
+    }
+  </script>
+  <form class="search" action="https://www.baidu.com/s" target="_blank" onsubmit="return check_search()">
+    <input id="keyword" type="text" placeholder="Search.." name="keyword">
+    <input id="wd" type="hidden" name="wd">
+    <button type="submit"><svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="width:20px;height:20px;color:#333">
+        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
+      </svg></button>
+  </form>
+</div>
+{{ end -}}
diff --git a/static/css/main.css b/static/css/main.css
index 1088d5f..76ec813 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,3 +1,12 @@
+body,
+div,
+table,
+p {
+    margin: 0;
+    font-family: Arial, "Microsoft YaHei", Sans-Serif;
+    font-size: 16px;
+}
+
 body {
     margin: 0 auto;
     max-width: 960px;
@@ -20,7 +29,6 @@ header h2 {
     font-size: 120%;
 }
 
-
 footer {
     margin: 0;
     padding: 10px 0;
@@ -47,13 +55,6 @@ article h6 {
     font-size: 100%
 }
 
-p,
-div,
-ul,
-ol {
-    margin: 10px 0
-}
-
 img {
     margin: 10px auto;
     width: 90%;
@@ -205,28 +206,33 @@ nav#TableOfContents {
     padding: 0 10px;
     vertical-align: top;
 }
+
 nav#TableOfContents:before {
     content: 'Content';
     font-weight: bold;
 }
+
 nav#TableOfContents:lang(*-Hans)::before {
     content: '目录';
     font-weight: bold;
 }
+
 nav#TableOfContents ul {
     margin: 0;
     padding-inline-start: 24px;
 }
+
 .content-with-toc {
     width: calc(100% - 220px);
     margin: 0;
 }
 
-@media (max-width:600px) {
+@media (max-width:500px) {
     nav#TableOfContents {
         float: none;
         width: 100%;
     }
+
     .content-with-toc {
         width: 100%;
     }
@@ -276,7 +282,7 @@ nav#TableOfContents ul {
     margin: 10px 0
 }
 
-.search {
+div.search2 {
     position: fixed;
     right: -30px;
     max-width: 300px;
@@ -286,6 +292,65 @@ nav#TableOfContents ul {
     bottom: 100px
 }
 
+div.search {
+    display: inline-block;
+    margin-bottom: -12px;
+}
+
+form.search {
+    width: 125px;
+    margin-left: 15px;
+}
+form.search input[type=text] {
+    padding: 5px 30px 5px 5px;
+    border: 1px solid #999;
+    float: left;
+    width: 80px;
+}
+form.search input[type=text]:focus {
+    border: 1px solid #333;
+    float: left;
+    width: 80px;
+}
+form.search button {
+    float: left;
+    width: 30px;
+    padding: 5px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    margin-left: -30px;
+}
+form.search .fa-search::before {
+    content: "\1F50D";
+    font-style: normal;
+    color: #999;
+}
+form.search button:hover {
+    color: #333;
+}
+
 .article-list li {
-    line-height: 1.5em;
+    margin-bottom: 0.5em;
+}
+
+.article-list li .article-date,
+.article-list li .article-title {
+    display: inline-block;
+}
+
+.article-list li .article-date:after {
+    content: ' - ';
+}
+
+@media (max-width:500px) {
+
+    .article-list li .article-date,
+    .article-date li .article-title {
+        display: block;
+    }
+
+    .article-list li .article-date:after {
+        content: '';
+    }
 }
\ No newline at end of file