Docs/demo

README.md

@@ -1,4 +1,8 @@
-# Obs.js
+<img src=./demo/assets/logo.png alt="Obs.js" width=330 height=107>
+
+# Obs.js – context‑aware web performance for everyone
+
+_Meet your users where they are_
 
 Obs.js uses the Navigator and Battery APIs to get contextual information about
 your users’ connection strength and battery status.

demo/index.html

@@ -12,7 +12,7 @@
     //# sourceURL=obs.inline.js
   </script>
 
-  <title>Obs.js demo</title>
+  <title>Obs.js – context-aware web performance for everyone</title>
 
   <style>
 
@@ -25,6 +25,18 @@
       --bad: #a00;
     }
 
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    h1, h2,
+    p,
+    pre {
+      margin-bottom: 1.5rem;
+    }
+
     html {
       color: var(--fg);
       background-color: var(--bg);
@@ -33,16 +45,31 @@
     }
 
     body {
-      margin: 2rem auto;
       max-width: 70ch;
-      padding: 0 1rem;
+      margin-right: auto;
+      margin-left:  auto;
+      padding: 1.5rem;
     }
 
     h1, h2 {
       text-wrap: balance;
       color: var(--brand);
     }
 
+    h1 {
+      font-size: 2.25rem;
+      line-height: 1.333333333;
+    }
+
+    hgroup h1 {
+      margin-bottom: 0;
+    }
+
+    h2 {
+      font-size: 1.5rem;
+      line-height: 1;
+    }
+
     code, kbd, samp, output, pre {
       font-family: "Operator Mono", SFMono-Regular, Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
     }
@@ -104,32 +131,73 @@
     gtag('config', 'G-DNCL1RY4GT');
   </script>
 
+  <link rel=icon href=./assets/icon.png>
+
+
 
 
 
 
-  <h1>Obs.js demo</h1>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 164.36" role="img" aria-labelledby="logo-title">
+    <title id="logo-title">Obs.js Logo</title>
+    <defs>
+      <style>
+        .color-dot {
+          fill: #f43059;
+        }
 
-  <p><a href=https://github.com/csswizardry/Obs.js>Obs.js</a> uses the Navigator
-  and Battery APIs to get contextual information about your users’ connection
-  strength and battery status.</p>
+        .color-text {
+          fill: #009aa2;
+        }
+      </style>
+    </defs>
+    <g id="Obs.js_Logo" data-name="Obs.js Logo">
+      <g>
+        <circle class="color-dot" cx="361.31" cy="85.22" r="15.47"/>
+        <path class="color-text" d="M472.27,136.2c-6.99,0-14.14-1.2-21.44-3.59-7.3-2.39-17.86-9.33-17.86-9.33-1.67-1.09-2.14-3.36-1.05-5.03l8.01-12.33c1.09-1.67,3.35-2.16,5.03-1.09,0,0,7.71,4.93,13.05,6.88,5.34,1.96,10.34,2.95,15,2.95,4.05,0,7.02-.67,8.93-2.02,1.9-1.35,2.01-1.81,2.01-1.81.46-1.94.84-3.61.84-3.71s-.25-1.43-.55-2.95l-1.11-1.1c-1.1-1.1-2.61-2.05-4.51-2.85-1.9-.8-4.08-1.56-6.53-2.3-2.46-.74-5.03-1.53-7.73-2.39-3.44-.98-6.9-2.18-10.4-3.59-3.49-1.41-6.66-3.25-9.48-5.52-2.82-2.27-5.12-5.06-6.9-8.38-1.78-3.31-2.31-8.54-2.31-8.54-.2-1.98-.36-3.69-.36-3.79s.16-1.81.36-3.79c0,0,.59-5.87,2.49-9.74s4.48-7.15,7.73-9.85c3.25-2.7,7.05-4.72,11.41-6.07,4.35-1.35,9.05-2.02,14.08-2.02,6.26,0,12.61,1.01,19.05,3.04,6.44,2.02,14.6,6.6,14.6,6.6,1.74.98,2.37,3.2,1.41,4.94l-7.17,12.98c-.96,1.74-3.2,2.42-4.96,1.5,0,0-6.48-3.38-11.14-5.04-4.67-1.66-8.77-2.48-12.33-2.48s-6.01.64-7.73,1.93c-1.72,1.29-1.74,1.35-1.74,1.35-.46,1.94-.84,3.61-.84,3.71s.25,1.33.55,2.73l1.1,1.04c1.1,1.04,2.58,2.02,4.42,2.95,1.84.92,3.96,1.81,6.35,2.67,2.39.86,4.94,1.72,7.64,2.58,3.43,1.1,6.93,2.42,10.49,3.96,3.56,1.54,6.75,3.41,9.57,5.61,2.82,2.21,5.15,4.91,6.99,8.1,1.84,3.19,2.37,7.99,2.37,7.99.22,1.98.39,3.68.39,3.78s-.15,1.81-.33,3.79c0,0-.62,6.67-2.52,10.66-1.9,3.99-4.57,7.27-8.01,9.85-3.44,2.58-7.45,4.51-12.06,5.8-4.6,1.29-9.54,1.93-14.82,1.93Z"/>
+        <path class="color-text" d="M206.87,136.2c-7.49,0-13.66-1.47-18.5-4.42-4.85-2.95-9.67-7.75-9.67-7.75-1.41-1.41-2.57-.93-2.57,1.07v5.64c0,1.99-1.63,3.62-3.62,3.62h-20.73c-1.99,0-3.62-1.63-3.62-3.62V3.62c0-1.99,1.63-3.62,3.62-3.62h20.73c1.99,0,3.62,1.63,3.62,3.62v42.63c0,1.99,1.09,2.41,2.41.92,0,0,5.16-5.79,10.01-8.8,4.84-3.01,10.95-4.51,18.31-4.51,5.76,0,11.35,1.11,16.75,3.31,5.4,2.21,10.19,5.49,14.36,9.85,4.17,4.36,7.51,9.69,10.03,16.01,2.51,6.32,3.48,18.2,3.48,18.2.16,1.99.29,3.69.29,3.79s-.13,1.81-.29,3.79c0,0-.96,11.88-3.48,18.2-2.52,6.32-5.83,11.66-9.94,16.01-4.11,4.36-8.87,7.64-14.26,9.85-5.4,2.21-11.04,3.31-16.93,3.31ZM199.7,112.46c3.31,0,6.41-.64,9.3-1.93,2.88-1.29,5.43-3.13,7.63-5.52,2.21-2.39,3.96-5.24,5.25-8.56,1.29-3.31,1.64-7.62,1.64-7.62.16-1.99.29-3.69.29-3.79s-.13-1.81-.3-3.79c0,0-.34-4.15-1.63-7.53-1.29-3.37-3.04-6.26-5.25-8.65-2.21-2.39-4.75-4.23-7.63-5.52-2.89-1.29-5.99-1.93-9.3-1.93s-6.41.64-9.3,1.93c-2.88,1.29-5.4,3.13-7.55,5.52-2.15,2.39-3.86,5.28-5.15,8.65-1.29,3.38-1.63,7.53-1.63,7.53-.17,1.99-.3,3.69-.3,3.79s.14,1.81.3,3.79c0,0,.35,4.15,1.63,7.53,1.29,3.38,3,6.26,5.15,8.65,2.15,2.39,4.66,4.23,7.55,5.52,2.88,1.29,5.98,1.93,9.3,1.93Z"/>
+        <path class="color-text" d="M418.71,38.11c0-1.99-1.63-3.62-3.62-3.62h-20.73c-1.99,0-3.62,1.63-3.62,3.62v88.75c0,1.99-.21,5.24-.46,7.22,0,0-.46,3.52-2.3,5.24-1.84,1.72-4.23,2.58-7.18,2.58-1.72,0-2.3-.08-2.3-.08-1.98-.26-3.59,1.15-3.59,3.15v14.66c0,1.99,1.61,3.89,3.57,4.22,0,0,.26.04,2.04.23,1.78.18,3.96.27,6.53.27,10.43,0,18.31-2.55,23.65-7.64,5.34-5.09,7.5-20.43,7.5-20.43.28-1.97.51-5.22.51-7.21V38.11Z"/>
+        <path class="color-text" d="M297.79,136.2c-6.99,0-14.14-1.2-21.44-3.59-7.3-2.39-17.86-9.33-17.86-9.33-1.67-1.09-2.14-3.36-1.05-5.03l8.01-12.33c1.09-1.67,3.35-2.16,5.03-1.09,0,0,7.71,4.93,13.05,6.88,5.34,1.96,10.34,2.95,15,2.95,4.05,0,7.02-.67,8.93-2.02,1.9-1.35,2.01-1.81,2.01-1.81.46-1.94.84-3.61.84-3.71s-.25-1.43-.55-2.95l-1.11-1.1c-1.1-1.1-2.61-2.05-4.51-2.85-1.9-.8-4.08-1.56-6.53-2.3-2.46-.74-5.03-1.53-7.73-2.39-3.44-.98-6.9-2.18-10.4-3.59-3.49-1.41-6.66-3.25-9.48-5.52-2.82-2.27-5.12-5.06-6.9-8.38-1.78-3.31-2.31-8.54-2.31-8.54-.2-1.98-.36-3.69-.36-3.79s.16-1.81.36-3.79c0,0,.59-5.87,2.49-9.74,1.9-3.86,4.48-7.15,7.73-9.85,3.25-2.7,7.05-4.72,11.41-6.07,4.35-1.35,9.05-2.02,14.08-2.02,6.26,0,12.61,1.01,19.05,3.04,6.44,2.02,14.6,6.6,14.6,6.6,1.74.98,2.37,3.2,1.41,4.94l-7.17,12.98c-.96,1.74-3.2,2.42-4.96,1.5,0,0-6.48-3.38-11.14-5.04-4.67-1.66-8.77-2.48-12.33-2.48s-6.01.64-7.73,1.93c-1.72,1.29-1.74,1.35-1.74,1.35-.46,1.94-.84,3.61-.84,3.71s.25,1.33.55,2.73l1.1,1.04c1.1,1.04,2.58,2.02,4.42,2.95,1.84.92,3.96,1.81,6.35,2.67,2.39.86,4.94,1.72,7.64,2.58,3.43,1.1,6.93,2.42,10.49,3.96,3.56,1.54,6.75,3.41,9.57,5.61,2.82,2.21,5.15,4.91,6.99,8.1,1.84,3.19,2.37,7.99,2.37,7.99.22,1.98.39,3.68.39,3.78s-.15,1.81-.33,3.79c0,0-.62,6.67-2.52,10.66-1.9,3.99-4.57,7.27-8.01,9.85-3.44,2.58-7.45,4.51-12.06,5.8-4.6,1.29-9.54,1.93-14.82,1.93Z"/>
+        <path class="color-text" d="M131.87,43.71c-3.38-8.04-8.1-15.03-14.17-20.98-6.07-5.95-13.28-10.68-21.63-14.17-8.35-3.5-17.48-5.25-27.42-5.25s-19.11,1.75-27.51,5.25c-8.41,3.5-15.64,8.28-21.72,14.36s-10.83,13.13-14.26,21.17C1.72,52.12,0,60.74,0,69.94v.37c0,9.2,1.69,17.83,5.06,25.86,3.37,8.04,8.1,15.03,14.17,20.98,6.07,5.95,13.28,10.67,21.63,14.17,8.34,3.5,17.49,5.24,27.42,5.24s19.11-1.75,27.52-5.24c8.4-3.5,15.64-8.28,21.72-14.36,6.07-6.07,10.83-13.13,14.26-21.16,3.43-8.04,5.15-16.66,5.15-25.86v-.37c0-9.2-1.69-17.82-5.06-25.86ZM109.3,70.31c0,5.75-1.01,11.22-2.99,16.28-1.98,5.05-4.77,9.56-8.3,13.41-3.56,3.88-7.9,6.95-12.92,9.13-5.01,2.19-10.54,3.29-16.44,3.29s-11.6-1.14-16.56-3.4c-4.93-2.24-9.29-5.33-12.95-9.18-3.66-3.86-6.53-8.42-8.51-13.54-1.98-5.11-2.99-10.61-2.99-16.37v-.37c0-5.75,1.01-11.23,2.99-16.28,1.98-5.05,4.78-9.57,8.3-13.41,3.54-3.86,7.85-6.93,12.81-9.13,4.96-2.19,10.52-3.3,16.54-3.3s11.43,1.14,16.46,3.39c5,2.25,9.4,5.34,13.06,9.19,3.66,3.85,6.52,8.41,8.51,13.54,1.98,5.12,2.99,10.63,2.99,16.37v.37Z"/>
+        <path class="color-text" d="M105.22,69.94c0-3-.32-5.93-.92-8.77h-17.73c-3.24,0-6.17,1.96-7.4,4.96l-.07.17-8.83-24.28c-1.09-3-3.87-5.07-7.06-5.25-3.21-.21-6.18,1.55-7.61,4.41l-10.01,20h-13c-.56,2.72-.86,5.54-.86,8.44v.33c0,2.47.21,4.88.62,7.23h18.18c3.03,0,5.8-1.71,7.15-4.42l3.9-7.8,9.54,26.23c1.13,3.1,4.05,5.2,7.35,5.26.05,0,.11,0,.17,0,3.24,0,6.16-1.96,7.4-4.96l5.88-14.32h12.73c.37-2.24.57-4.54.57-6.9v-.33Z"/>
+      </g>
+    </g>
+  </svg>
+
+  <hgroup>
+    <h1>Obs.js – context‑aware web performance for everyone</h1>
+    <p><em>Meet your users where they are</em></p>
+  </hgroup>
+
+  <p><a href=https://github.com/csswizardry/Obs.js>Obs.js</a> reads a handful of
+  browser signals (Navigator and Battery APIs) to infer connection strength,
+  battery status, and device capability. It exposes those signals as CSS
+  classes on the <code>&lt;html&gt;</code> element, and as properties on
+  <code>window.obs</code>, so you can adapt delivery accordingly: serve
+  lower-resolution media, forgo web fonts, disable auto-playing video… you name
+  it.</p>
 
   <p>It is built and maintained by <a href=https://csswizardry.com>Harry
     Roberts</a> under the MIT license.</p>
 
-  <p>This page shows the <code>.has-*</code> classes on
-  <code>&lt;html&gt;</code> and the current <code>window.obs</code> object.
-  Toggle Data Saver, plug/unplug power, or change networks to see updates (where
-  supported).</p>
+  <p>This page shows the <code>.has-*</code> classes that Obs.js adds to the
+  <code>&lt;html&gt;</code> element, and the current <code>window.obs</code>
+  object where it stores  device and network information.</p>
+
+  <p>Try toggling Data Saver, plugging/unplugging power, or changing networks to
+  see updates (where supported).</p>
 
   <h2><code>html.classList</code></h2>
 
-  <div id=classes aria-live=polite></div>
+  <p id=classes aria-live=polite></p>
 
   <h2><code>window.obs</code></h2>
 
   <pre id=obs aria-live=polite></pre>
 
+  <p><small><strong>Note:</strong> API support varies by browser; Chromium has
+  the broadest coverage.</small></p>
+
   <script>
     // Render helpers
     const byId = id => document.getElementById(id);