Some minor visual updates for the standalone page (#636)

Trying to make it feel less busy and a bit easier to read.

standalone/index.html

@@ -8,6 +8,9 @@
       type="image/png"
       href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEUAAAAAAAD///+D3c/SAAAAAXRSTlMAQObYZgAAAEpJREFUCB0FwbERgDAMA0BdSkbJQBSuaPABE0WuaKILmpJ/rNVejPKBUXGhqAC5J0gn9ESg2wvdNua8hUoKJQo8b6HyE6a2QHdbP0CPITh2pewWAAAAAElFTkSuQmCC"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width" />
     <link rel="stylesheet" href="third_party/normalize.min.css" />
     <script src="third_party/jquery/jquery-3.3.1.min.js"></script>
@@ -15,10 +18,21 @@
       body {
         font-family: monospace;
         min-width: 400px;
+        margin: 0.5em;
       }
       * {
         box-sizing: border-box;
       }
+      h1 {
+        font-size: 1.5em;
+        font-family: 'Poppins', sans-serif;
+        height: 1.2em;
+        vertical-align: middle;
+      }
+      .logo {
+        height: 1.2em;
+        float: left;
+      }
       #info {
         font-family: monospace;
       }
@@ -97,11 +111,12 @@
         position: absolute;
         left: 220px;
 
+        font-weight: bold;
         background: transparent;
         border: none;
         padding: 2px;
         margin: 0 0.5em;
-        width: calc(100vw - 360px);
+        width: calc(100vw - 260px);
       }
       .nodedescription {
         margin: 0 0 0 1em;
@@ -113,8 +128,9 @@
       /* tree nodes which are subtrees */
 
       .subtree {
-        margin: 0px;
-        border-width: 1px 0 0 1px;
+        margin: 3px 0 0 0;
+        padding: 3px 0 0 3px;
+        border-width: 1px 0 0;
         border-style: solid;
         border-color: #ddd;
       }
@@ -132,29 +148,50 @@
         border-color: #bbf;
       }
       .subtreechildren {
-        margin-left: 6px;
+        margin-left: 9px;
       }
 
       /* tree nodes which are test cases */
 
       .testcase {
-        border-width: 1px 0 0 1px;
+        padding: 3px;
+        border-width: 1px 0 0 0;
         border-style: solid;
         border-color: gray;
         background: #bbb;
       }
+      .testcase:first-child {
+        margin-top: 3px;
+      }
+      .testcase::after {
+        float: right;
+        margin-top: -1.1em;
+      }
       .testcase[data-status='fail'] {
         background: #fdd;
       }
+      .testcase[data-status='fail']::after {
+        content: "⛔"
+      }
       .testcase[data-status='warn'] {
         background: #ffb;
       }
+      .testcase[data-status='warn']::after {
+        content: "⚠"
+      }
       .testcase[data-status='pass'] {
         background: #cfc;
       }
+      .testcase[data-status='pass']::after {
+        content: "✔"
+      }
       .testcase[data-status='skip'] {
         background: #eee;
       }
+      .testcase .nodequery {
+        font-weight: normal;
+        width: calc(100vw - 275px);
+      }
       .testcasetime {
         white-space: nowrap;
         text-align: right;
@@ -209,7 +246,7 @@
     </style>
   </head>
   <body>
-    <h1>WebGPU Conformance Test Suite</h1>
+    <h1><img class="logo" src="webgpu-logo-notext.svg">WebGPU Conformance Test Suite</h1>
     <p>
       <input type=button id=expandall value="Expand All (slow!)">
     </p>

standalone/webgpu-logo-notext.svg

@@ -0,0 +1,34 @@
+<svg id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="768" height="600" viewBox="0 0 768 600">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #005a9c;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #0066b0;
+      }
+
+      .cls-3 {
+        fill: #0076cc;
+      }
+
+      .cls-4 {
+        fill: #0086e8;
+      }
+
+      .cls-5 {
+        fill: #0093ff;
+      }
+    </style>
+  </defs>
+  <path id="Triangle_1" data-name="Triangle 1" class="cls-1" d="M265.5,504L24.745,87h481.51Z"/>
+  <path id="Triangle_2" data-name="Triangle 2" class="cls-2" d="M506.5,87L386,295H627Z"/>
+  <path id="Triangle_3" data-name="Triangle 3" class="cls-3" d="M506.5,503L386,295H627Z"/>
+  <path id="Triangle_4" data-name="Triangle 4" class="cls-4" d="M626.5,296L566,192H687Z"/>
+  <path id="Triangle_5" data-name="Triangle 5" class="cls-5" d="M626.5,88L566,192H687Z"/>
+</svg>