Added front end search

1 files changed, 124 insertions, 21 deletions

diff --git a/template/style.css b/template/style.css
index af0d7bc..ebb2b26 100755
--- a/template/style.css
+++ b/template/style.css
@@ -29,7 +29,7 @@ body {
   background: white;
   /*font-family: 'Times New Roman', Times, serif;*/
   /*font-family: 'IBM Plex Sans', sans-serif;*/
-  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   color: var(--base-color);
   font-size: var(--base-font-size);
   line-height: var(--base-line-heigh);
@@ -54,6 +54,10 @@ hr {
   color: #000;
 }
 
+.cursor {
+  cursor: pointer;
+}
+
 /* width of the page */
 
 .wrapper {
@@ -74,12 +78,35 @@ a:hover {
 
 /* headings */
 
-h1 { font-size: 220%; line-height: 1.2em; }
-h2 { font-size: 180%; line-height: 1.2em; }
-h3 { font-size: 160%; line-height: 1.2em; }
-h4 { font-size: 140%; line-height: 1.2em; }
-h5 { font-size: 120%; line-height: 1.2em; }
-h6 { font-size: 100%; line-height: 1.2em; }
+h1 {
+  font-size: 220%;
+  line-height: 1.2em;
+}
+
+h2 {
+  font-size: 180%;
+  line-height: 1.2em;
+}
+
+h3 {
+  font-size: 160%;
+  line-height: 1.2em;
+}
+
+h4 {
+  font-size: 140%;
+  line-height: 1.2em;
+}
+
+h5 {
+  font-size: 120%;
+  line-height: 1.2em;
+}
+
+h6 {
+  font-size: 100%;
+  line-height: 1.2em;
+}
 
 h1[itemtype="headline"] {
   padding-bottom: 0;
@@ -95,12 +122,15 @@ table {
   width: 100%;
 }
 
-table, th, td {
+table,
+th,
+td {
   border: 1px solid black;
   text-align: left;
 }
 
-th, td {
+th,
+td {
   padding: 5px 10px;
 }
 
@@ -268,7 +298,7 @@ code {
   font-weight: 500;
 }
 
-pre > code {
+pre>code {
   background: unset;
   padding: unset;
 
@@ -285,7 +315,8 @@ pre {
   margin-block-end: 40px;
 }
 
-img, video {
+img,
+video {
   max-width: 100%;
   margin: 30px auto;
   display: block;
@@ -357,14 +388,14 @@ audio {
 
 /* comments */
 
-.comments input{
+.comments input {
   width: 100%;
   font: var(--comment-form-font);
   border: 1px solid #bbb;
   padding: 5px;
 }
 
-.comments textarea{
+.comments textarea {
   width: 100%;
   height: 100px;
   resize: vertical;
@@ -384,13 +415,69 @@ audio {
   border-top: initial !important;
 }
 
+/* search form */
+
+.search-form {
+  position: fixed;
+  top: 120px;
+  left: 50%;
+  margin-left: -250px;
+  width: 500px;
+  padding: 30px;
+  background: #eee;
+  border-radius: 5px;
+}
+
+.blur {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: blur(15px);
+}
+
+.hidden {
+  display: none;
+}
+
+.search-form input {
+  width: 100%;
+  margin-bottom: 20px;
+  border: 1px solid #ffffff;
+  padding: 5px 10px;
+  border-radius: 3px;
+  outline: none;
+}
+
+.search-form ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search-form ul li {
+  margin-bottom: 5px;
+}
+
 /* responsive */
 
 @media only screen and (max-width: 960px) {
-  main { padding: 0 20px; }
-  footer { padding: 0 20px; }
-  h1[itemtype="headline"] { font-size: 220%; }
-  .navigation header { padding: 0 20px; }
+  main {
+    padding: 0 20px;
+  }
+
+  footer {
+    padding: 0 20px;
+  }
+
+  h1[itemtype="headline"] {
+    font-size: 220%;
+  }
+
+  .navigation header {
+    padding: 0 20px;
+  }
 
   article img {
     max-width: 100%;
@@ -400,10 +487,26 @@ audio {
 }
 
 @media only screen and (max-width: 600px) {
-  .navigation header { display: block; }
-  .navigation header h3 { text-align: center; margin-bottom: 10px; }
-  .navigation header nav { text-align: center; }
-  .post-list li a h2 { font-weight: 500; }
+  .navigation header {
+    display: block;
+  }
+
+  .navigation header h3 {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+
+  .navigation header nav {
+    text-align: center;
+  }
+
+  .post-list li a h2 {
+    font-weight: 500;
+  }
+
+  .search-trigger {
+    display: none;
+  }
 }
 
 /* light/dark mode */