Add bookmarklet to documentation

docs/index.html

@@ -191,6 +191,19 @@ <h2 id="responsive">Is it responsive?</h2>
     </p>
     <p>In fact, try resizing this page. Everything flows super nicely as you'll see.</p>
 
+    <h2 id="bookmarklet">Bookmarklet</h2>
+    <p>
+      A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar. 
+    </p>
+    <p>
+      The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar:
+    </p>
+    <strong>
+      <a href="javascript:void%20function(){const%20a=a=%3Edocument.querySelectorAll(a),b=(a,b)=%3EObject.assign(document.createElement(a),b);a(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),a(%22*%22).forEach(a=%3Ea.style=%22%22),document.head.append(b(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/npm/water.css%402/dist/water.css%22}),!a(%22meta[name=\%22viewport\%22]%22).length%26%26b(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))}();">
+        Waterize
+      </a>
+    </strong>
+
     <h2 id="demo">Element demos</h2>
     <p>This is supposed to be a demo page so we need more elements!</p>