muan · ji-yin · Jul 26, 2021 · Jul 31, 2021
diff --git a/index.html b/index.html
@@ -1,28 +1,32 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link href='/fav.png' rel='shortcut icon'>
-    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
-    <meta content="Emoji searcher" property="og:title">
-    <meta content="Emoji searcher" property="title">
-    <meta content="Find the emoji that echoes your heart using keywords! No need to remember all the names of emoji." property="description">
-    <meta content="Find the emoji that echoes your heart using keywords! No need to remember all the names of emoji." property="og:description">
-    <meta content="https://emoji.muan.co/appicon.png" property="og:image">
-    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Emoji searcher" />
-    <title>Emoji searcher</title>
-    <link rel="apple-touch-icon-precomposed" sizes="64x64" href="/appicon.png">
-    <link href="stylesheets/style.css" rel="stylesheet">
-    <script>
-      if(location.hostname === "muan.co") {
-        location.href = "https://emoji.muan.co/" + location.hash
-      }
-    </script>
-  </head>
 
-  <body>
-    <header class="site-header">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link href='/fav.png' rel='shortcut icon'>
+  <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
+  <meta content="Emoji searcher" property="og:title">
+  <meta content="Emoji searcher" property="title">
+  <meta content="Find the emoji that echoes your heart using keywords! No need to remember all the names of emoji."
+    property="description">
+  <meta content="Find the emoji that echoes your heart using keywords! No need to remember all the names of emoji."
+    property="og:description">
+  <meta content="https://emoji.muan.co/appicon.png" property="og:image">
+  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Emoji searcher" />
+  <title>Emoji searcher</title>
+  <link rel="apple-touch-icon-precomposed" sizes="64x64" href="/appicon.png">
+  <link href="stylesheets/style.css" rel="stylesheet">
+  <script>
+    if (location.hostname === "muan.co") {
+      location.href = "https://emoji.muan.co/" + location.hash
+    }
+  </script>
+</head>
+
+<body>
+  <header class="site-header">
+    <div class="fixed-header">
       <button type="button" class="button pull-right js-twemoji">Twemoji</button>
       <button type="button" class="button pull-right js-remove-twemoji">Remove Twemoji</button>
       <input type="search" class="input-search speedy-filter" placeholder="Search" autofocus aria-label="Search emoji">
@@ -42,37 +46,42 @@
       <a href="#photo" class="mojigroup button">
         🌁
       </a>
-    </header>
+      <a></a>
+    </div>
+  </header>
+
+  <main class="list">
+    <ul class="emojis-container">
+    </ul>
 
-    <main class="list">
-      <ul class="emojis-container">
-      </ul>
+    <div class="loading">
+      Loading
+      <noscript>but not really, becasue this needs JavaScript.</noscript>
+    </div>
 
-      <div class="loading">
-        Loading
-        <noscript>but not really, becasue this needs JavaScript.</noscript>
-      </div>
+    <div class="no-results">
+      <span class="text-big">😭</span>
+      <br>
+      <div class="no-results-text">No results</div>
+      <p>
+        Help your future self by adding
+        <strong class="keyword"></strong>
+        to the library.
+      </p>
+      <p>
+        <a class="button js-contribute contribute-button"
+          href="https://github.com/muan/emojilib/edit/master/emojis.json" target="_blank">Contribute to emojilib</a>
+      </p>
+    </div>
+  </main>
 
-      <div class="no-results">
-        <span class="text-big">😭</span>
-        <br><div class="no-results-text">No results</div>
-        <p>
-          Help your future self by adding
-          <strong class="keyword"></strong>
-          to the library.
-        </p>
-        <p>
-          <a class="button js-contribute contribute-button" href="https://github.com/muan/emojilib/edit/master/emojis.json" target="_blank">Contribute to emojilib</a>
-        </p>
-      </div>
-    </main>
+  <footer class="site-footer">
+    <a href="https://twitter.com/muanchiou" target="_blank">@muanchiou</a> |
+    <a href="https://github.com/muan/emoji/" target="_blank">Site source</a> |
+    <a href="https://github.com/muan/emojilib" target="_blank">Data source</a>
+  </footer>
+  <script type="text/javascript" src="javascripts/stuff.js"></script>
+  <script type="text/javascript" src="javascripts/search.js"></script>
+</body>
 
-    <footer class="site-footer">
-      <a href="https://twitter.com/muanchiou" target="_blank">@muanchiou</a> |
-      <a href="https://github.com/muan/emoji/" target="_blank">Site source</a> |
-      <a href="https://github.com/muan/emojilib" target="_blank">Data source</a>
-    </footer>
-    <script type="text/javascript" src="javascripts/stuff.js"></script>
-    <script type="text/javascript" src="javascripts/search.js"></script>
-  </body>
-</html>
+</html>
diff --git a/javascripts/search.js b/javascripts/search.js
@@ -10,7 +10,7 @@ function searchHash() {
 }
 document.addEventListener('emoji:ready', searchHash)
 
-function search (keyword) {
+function search(keyword) {
   keyword = typeof keyword === 'undefined' ? '' : keyword
   document.querySelector('.keyword').textContent = keyword
   keyword = keyword.trim()
@@ -24,7 +24,7 @@ function search (keyword) {
   setRelatedDOMVisibility(keyword)
 }
 
-function setRelatedDOMVisibility (keyword) {
+function setRelatedDOMVisibility(keyword) {
   var foundSomething = !!document.querySelector('.result:not([hidden])')
   document.querySelector('.no-results').hidden = foundSomething
 }

diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -1,9 +1,27 @@
-form { margin: 0; }
-.pull-right { float: right; position: relative; }
-input:invalid { visibility: hidden; }
-[data-clipboard-text] { cursor: pointer; }
-.text-big { font-size: 20px; }
-[hidden] { display: none !important; }
+form {
+  margin: 0;
+}
+
+.pull-right {
+  float: right;
+  position: relative;
+}
+
+input:invalid {
+  visibility: hidden;
+}
+
+[data-clipboard-text] {
+  cursor: pointer;
+}
+
+.text-big {
+  font-size: 20px;
+}
+
+[hidden] {
+  display: none !important;
+}
 
 body,
 input,
@@ -14,7 +32,7 @@ button {
 
 body {
   line-height: 1.6em;
-  padding: 10px;
+  padding: 0px;
   margin: 0;
   color: #333;
   background-color: #fff;
@@ -39,15 +57,22 @@ footer {
 .site-header {
   white-space: nowrap;
   position: relative;
+  z-index: 5;
+}
+
+.fixed-header {
+  position: fixed;
+  background-color: #fff;
   line-height: 1;
   margin-bottom: 10px;
-  padding-bottom:  10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   border-bottom: 1px solid #ddd;
 }
 
 .site-footer {
   margin-top: 10px;
-  padding-top:  10px;
+  padding-top: 10px;
   border-top: 1px solid #ddd;
   text-align: center;
 }
@@ -66,7 +91,9 @@ footer {
   font-weight: bold;
 }
 
-.loading + .no-results { display: none; }
+.loading + .no-results {
+  display: none;
+}
 
 .mojigroup {
   margin: 0 0 10px 5px;
@@ -91,15 +118,17 @@ ul {
 }
 
 .plain {
-  appearance: none;
+  -moz-appearance: none;
+       appearance: none;
   -webkit-appearance: none;
   border: 0;
   box-shadow: none;
   background-color: transparent;
 }
 
 .plain:focus {
-  box-shadow: none; outline: none;
+  box-shadow: none;
+  outline: none;
 }
 
 .emoji-group {
@@ -113,6 +142,7 @@ ul {
 .emojis-container {
   font-size: 0;
   line-height: 0;
+  padding-top: 70px;
 }
 
 .emoji-code {
@@ -137,6 +167,10 @@ ul {
   font-size: 0;
 }
 
+::-moz-selection {
+  background-color: transparent;
+}
+
 ::selection {
   background-color: transparent;
 }
@@ -177,6 +211,7 @@ ul, li {
 .button.clear-search {
   color: #ee9d9d;
 }
+
 .button.clear-search:hover {
   border-color: #ee9d9d;
 }
@@ -190,7 +225,9 @@ ul, li {
   margin: 0;
   width: 150px;
   border-radius: 15px;
-  appearance: textfield;
+  -webkit-appearance: textfield;
+     -moz-appearance: textfield;
+          appearance: textfield;
 }
 
 .input-search::-webkit-search-cancel-button,
@@ -200,7 +237,7 @@ ul, li {
 
 .input-search:focus {
   border-color: #51a7e8;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
 }
 
 .alert {
@@ -212,7 +249,7 @@ ul, li {
   left: 50%;
   transform: translateX(-50%);
   bottom: 10px;
-  background: rgba(0, 0, 0, .8);
+  background: rgba(0, 0, 0, 0.8);
   color: #fff;
   font-weight: bold;
   padding: 7px 20px;
@@ -267,7 +304,8 @@ code {
   background-color: #f8f8f8;
   border: 1px solid #aaa;
   padding: 0 2px;
-  border-radius: 3px; color: #666;
+  border-radius: 3px;
+  color: #666;
   font-family: Monaco, monospace;
   font-size: 11px;
 }
@@ -282,13 +320,19 @@ code {
   }
 
   .clear-search,
-  .mojigroup {
+.mojigroup {
     display: none;
   }
 
-  input { font-size: 14px; }
+  input {
+    font-size: 14px;
+  }
 
-  ul { padding: 0; }
+  ul {
+    padding: 0;
+  }
 
-  .emoji-wrapper { padding: 0; }
-}
+  .emoji-wrapper {
+    padding: 0;
+  }
+}/*# sourceMappingURL=style.css.map */