Merge branch 'master' into xmr-page-description

.stylelintrc

@@ -8,7 +8,9 @@
     "block-closing-brace-empty-line-before": null,
     "block-closing-brace-newline-after": null,
     "block-opening-brace-space-before": null,
-    "color-named": null,
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-named": "never",
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "declaration-block-semicolon-newline-before": "never-multi-line",
     "declaration-block-semicolon-space-after": "always-single-line",
@@ -49,6 +51,7 @@
     "selector-max-universal": 1,
     "selector-no-qualifying-type": null,
     "selector-no-vendor-prefix": null,
+    "shorthand-property-no-redundant-values": true,
     "string-quotes": "double",
     "value-keyword-case": "lower",
     "value-list-comma-newline-after": "never-multi-line",

index.js

@@ -118,6 +118,22 @@ const REFERRER_HEADER = 'no-referrer, strict-origin-when-cross-origin';
       }
     });
 
+    server.route({
+      method: 'GET',
+      path: '/favicon.ico',
+      handler: (request, h) => {
+        return h.redirect('/favicons/favicon.ico').permanent();
+      }
+    });
+
+    server.route({
+      method: 'GET',
+      path: '/apple-touch-icon.png',
+      handler: (request, h) => {
+        return h.redirect('/favicons/apple-touch-icon.png').permanent();
+      }
+    });
+
     await server.start();
     console.log(`Server running at: ${server.info.uri}`);
   } catch (error) {

public/badge/badge.css

@@ -8,7 +8,7 @@
 }
 
 .sri-test::before {
-  background-color: yellow;
+  background-color: #ff0;
   content: "[Testing SRI support...]";
 }
 

public/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="/favicons/mstile-150x150.png"/>
+      <TileColor>#333333</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

public/favicons/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "SRI Hash Generator",
+  "short_name": "SRI Hash",
+  "icons": [
+    {
+      "src": "/favicons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#333333",
+  "background_color": "#333333",
+  "display": "standalone"
+}

public/style.css

@@ -4,7 +4,7 @@
 
 body {
   color: #333;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 16px;
   font-weight: 300;
   line-height: 1.5;
@@ -54,26 +54,29 @@ code {
   word-break: break-all;
   display: inline-block;
   padding: 1rem;
-  border-left: 3px solid gray;
+  border-left: 3px solid #808080;
   background-color: #3a3a3a;
   color: #ccc;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 1rem;
   line-height: 1;
   margin-top: 1rem;
 }
 
 nav {
   background-color: #333;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 nav a {
-  color: white;
+  color: #fff;
   float: right;
-  padding: 0.5rem 1rem 0.5rem 0;
+  padding: 0.5rem 1rem;
 }
 
 nav a:hover {
-  color: white;
+  color: #fff;
 }
 
 footer {
@@ -84,9 +87,8 @@ footer {
 .container {
   width: auto;
   max-width: 960px;
-  margin: auto;
+  margin: auto auto 2rem;
   padding: 1rem;
-  margin-bottom: 2rem;
 }
 
 .clear {
@@ -97,7 +99,7 @@ footer {
  * App container
  */
 #app {
-  color: black;
+  color: #000;
   background-color: #adbdc6;
   padding: 4rem 0;
   max-width: 100%;
@@ -110,14 +112,14 @@ footer {
   font-size: 1.5rem;
 }
 
-#sriApp input:not([type="checkbox"]) {
+#sriApp input {
   font-size: 0.9rem;
   height: 2.25rem;
   display: inline-block;
 }
 
 #sriApp input[type="url"] {
-  background-color: white;
+  background-color: #fff;
   color: #888;
   border: 1px solid #ccc;
   width: 70%;
@@ -126,7 +128,7 @@ footer {
 
 #sriApp input[type="submit"] {
   cursor: pointer;
-  color: white;
+  color: #fff;
   background-color: #008cba;
   border: 1px solid #0079a1;
   width: 25%;
@@ -142,9 +144,9 @@ footer {
   height: 5rem;
   padding: 1rem;
   border: none;
-  border-left: 3px solid gray;
+  border-left: 3px solid #808080;
   background-color: #3a3a3a;
-  margin: 1rem 0 0 0;
+  margin: 1rem 0 0;
 }
 
 #sriSnippet {
@@ -158,7 +160,7 @@ footer {
  * Mobile styling
  */
 
-@media all and (max-width: 960px) {
+@media (max-width: 960px) {
   nav {
     padding: 0.75rem 0;
     text-align: center;
@@ -178,7 +180,7 @@ footer {
   }
 
   #app {
-    padding: 1rem 0 0.25rem 0;
+    padding: 1rem 0 0.25rem;
     text-align: center;
   }
 

templates/index.html

@@ -13,7 +13,18 @@
     <link rel="stylesheet" href="/badge/badge.css" integrity="{{sri './public/badge/badge.css'}}">
     <link rel="stylesheet" href="/badge/will-pass.css">
     <link rel="stylesheet" href="/badge/must-fail.css" integrity="sha384-INVALIDHASH">
-    <link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+    <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" sizes="180x180">
+    <link rel="icon" href="/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+    <link rel="icon" href="/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+    <link rel="manifest" href="/favicons/manifest.json">
+    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#333333">
+    <link rel="shortcut icon" href="/favicons/favicon.ico">
+    <meta name="apple-mobile-web-app-title" content="SRI Hash Generator">
+    <meta name="application-name" content="SRI Hash Generator">
+    <meta name="msapplication-TileColor" content="#333333">
+    <meta name="msapplication-config" content="/favicons/browserconfig.xml">
+    <meta name="theme-color" content="#333333">
   </head>
   <body>
     <!-- Nav -->