Emoji improvements and other changes

The emoji font has been changed to Mozilla's twemoji-colr font. This fixes the 0-9, *, and # keycaps, as well as the eye in a speech bubble. Further, this brings emoji color to Chromium-based browsers. Some stylistic text changes were made in the menu, and Unicode overlay warning.
atoponce · Apr 21, 2020 · 134a4ce · 134a4ce
1 parent 5aaca5b
commit 134a4ce
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 18 deletions.
diff --git a/COPYING.md b/COPYING.md
@@ -0,0 +1,9 @@
+**Copyrights of other files used in this project**:
+
+`/assets/twemoji.woff2` is a WOFF2 implementation of the [Mozilla twemoji-colr
+TrueType font][1]. twemoji-colr is licensed under the Apache License, Version
+2.0. See the project's [LICENSE.md][2] for more information.
+
+[1]: https://github.com/mozilla/twemoji-colr
+[2]: https://github.com/mozilla/twemoji-colr/blob/master/LICENSE.md
+
diff --git a/assets/style.52ffcf89.css → assets/style.50a56049.css b/assets/style.52ffcf89.css → assets/style.50a56049.css
@@ -1,5 +1,5 @@
 @font-face {
-    font-family: "Emoji";
+    font-family: "Twemoji Mozilla";
     src: url("./twemoji.woff2") format("woff2");
 }
 /* body tags */

diff --git a/assets/twemoji.woff2 b/assets/twemoji.woff2
diff --git a/bookmarklets.html b/bookmarklets.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="assets/style.52ffcf89.css">
+    <link rel="stylesheet" href="assets/style.50a56049.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Passphrase and Password Generator</title>
@@ -23,9 +23,9 @@
       <div id="header">
         <h1>Passphrase and Password Generator</h1>
         <ul id="navigation">
-          <li><a href="index.html">Home</a></li>
+          <li><a href="index.html">Generate</a></li>
           <li><a href="bookmarklets.html">Bookmarklets</a></li>
-          <li><a href="what.html">What is entropy?</a></li>
+          <li><a href="what.html">Entropy?</a></li>
           <li><a href="test.html">Testing Meter</a></li>
         </ul>
       </div>

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="assets/style.52ffcf89.css">
+    <link rel="stylesheet" href="assets/style.50a56049.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Passphrase and Password Generator</title>
@@ -12,9 +12,9 @@
       <div id="header">
       <h1>Passphrase and Password Generator</h1>
         <ul id="navigation">
-          <li><a href="index.html">Home</a></li>
+          <li><a href="index.html">Generate</a></li>
           <li><a href="bookmarklets.html">Bookmarklets</a></li>
-          <li><a href="what.html">What is entropy?</a></li>
+          <li><a href="what.html">Entropy?</a></li>
           <li><a href="test.html">Testing Meter</a></li>
           <li><a href="#" onclick="swap_stylesheet(); generate_colors()" id="theme_switcher">Dark Theme</a></li>
         </ul>
@@ -204,8 +204,9 @@ <h1>Passphrase and Password Generator</h1>
         <div id="overlay_text">
             <p>🔥🔥🔥🔥🔥</p>
             <p>Here be dragons!</p>
-            <p>Using non-ASCII Unicode characters could <a href="https://apple.stackexchange.com/questions/202143/i-included-emoji-in-my-password-and-now-i-cant-log-in-to-my-account-on-yosemite">lock you out of your account</a>!</p>
-            <p>Use with caution. Firefox has color emoji.</p>
+            <p>Using non-ASCII Unicode characters could <a style="color: #F3BC00" href="https://apple.stackexchange.com/questions/202143/i-included-emoji-in-my-password-and-now-i-cant-log-in-to-my-account-on-yosemite">lock you out of your account</a>!</p>
+            <p>Further, emoji codepoints specifically are <a style="color: #F3BC00" href="https://twitter.com/FakeUnicode/status/1192245294429130752">ambiguous, ignored, unpredictable, and unstable</a>.</p>
+            <p>You should exercise extreme caution using Unicode passwords.</p>
             <p>Click anywhere to continue.</p>
             <p>🐉🐉🐉🐉🐉</p>
         </div>
@@ -288,7 +289,7 @@ <h1>Passphrase and Password Generator</h1>
     <script src="lists/eff_starwars.8559c220.js"></script>
 
     <!-- emoji - on its own -->
-    <script src="lists/random_emoji.3a092fa7.js"></script>
+    <script src="lists/random_emoji.96d739fc.js"></script>
 
     <script>
       function load_passes() {

diff --git a/lists/random_emoji.3a092fa7.js → lists/random_emoji.96d739fc.js b/lists/random_emoji.3a092fa7.js → lists/random_emoji.96d739fc.js
diff --git a/test.html b/test.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="assets/style.52ffcf89.css">
+    <link rel="stylesheet" href="assets/style.50a56049.css">
     <link integrity="sha256-1bPOkM9ipqunzeoeyFtEkB1N8z8UWsDsI3DYtIHIn/4=" crossorigin="anonymous" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -66,9 +66,9 @@
       <div id="header">
         <h1>Passphrase and Password Generator</h1>
         <ul id="navigation">
-          <li><a href="index.html">Home</a></li>
+          <li><a href="index.html">Generate</a></li>
           <li><a href="bookmarklets.html">Bookmarklets</a></li>
-          <li><a href="what.html">What is entropy?</a></li>
+          <li><a href="what.html">Entropy?</a></li>
           <li><a href="test.html">Testing Meter</a></li>
         </ul>
       </div>

diff --git a/what.html b/what.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <link rel="shortcut icon" href="favicon.ico">
-    <link rel="stylesheet" href="assets/style.52ffcf89.css">
+    <link rel="stylesheet" href="assets/style.50a56049.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Passphrase and Password Generator</title>
@@ -12,9 +12,9 @@
       <div id="header">
         <h1>Passphrase and Password Generator</h1>
         <ul id="navigation">
-          <li><a href="index.html">Home</a></li>
+          <li><a href="index.html">Generate</a></li>
           <li><a href="bookmarklets.html">Bookmarklets</a></li>
-          <li><a href="what.html">What is entropy?</a></li>
+          <li><a href="what.html">Entropy?</a></li>
           <li><a href="test.html">Testing Meter</a></li>
         </ul>
       </div>