fork: initial commit, derived from water.css (d950cbc)

19 files changed, 570 insertions, 0 deletions

diff --git a/docs/icons/android-chrome-192x192.png b/docs/icons/android-chrome-192x192.png
new file mode 100755
index 0000000..5167499
--- /dev/null
+++ b/docs/icons/android-chrome-192x192.png
diff --git a/docs/icons/android-chrome-512x512.png b/docs/icons/android-chrome-512x512.png
new file mode 100755
index 0000000..d231e0b
--- /dev/null
+++ b/docs/icons/android-chrome-512x512.png
diff --git a/docs/icons/apple-touch-icon.png b/docs/icons/apple-touch-icon.png
new file mode 100755
index 0000000..4aacc52
--- /dev/null
+++ b/docs/icons/apple-touch-icon.png
diff --git a/docs/icons/browserconfig.xml b/docs/icons/browserconfig.xml
new file mode 100755
index 0000000..d649dd8
--- /dev/null
+++ b/docs/icons/browserconfig.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="./mstile-70x70.png"/>
+            <square150x150logo src="./mstile-150x150.png"/>
+            <square310x310logo src="./mstile-310x310.png"/>
+            <wide310x150logo src="./mstile-310x150.png"/>
+            <TileColor>#00aba9</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/docs/icons/favicon-16x16.png b/docs/icons/favicon-16x16.png
new file mode 100755
index 0000000..2ab553a
--- /dev/null
+++ b/docs/icons/favicon-16x16.png
diff --git a/docs/icons/favicon-32x32.png b/docs/icons/favicon-32x32.png
new file mode 100755
index 0000000..547ba5a
--- /dev/null
+++ b/docs/icons/favicon-32x32.png
diff --git a/docs/icons/favicon.ico b/docs/icons/favicon.ico
new file mode 100755
index 0000000..4810c23
--- /dev/null
+++ b/docs/icons/favicon.ico
diff --git a/docs/icons/light-favicon-16x16.png b/docs/icons/light-favicon-16x16.png
new file mode 100755
index 0000000..c77529f
--- /dev/null
+++ b/docs/icons/light-favicon-16x16.png
diff --git a/docs/icons/light-favicon-32x32.png b/docs/icons/light-favicon-32x32.png
new file mode 100755
index 0000000..5d0fed3
--- /dev/null
+++ b/docs/icons/light-favicon-32x32.png
diff --git a/docs/icons/light-favicon.ico b/docs/icons/light-favicon.ico
new file mode 100755
index 0000000..3f6ca95
--- /dev/null
+++ b/docs/icons/light-favicon.ico
diff --git a/docs/icons/mstile-150x150.png b/docs/icons/mstile-150x150.png
new file mode 100755
index 0000000..b37065c
--- /dev/null
+++ b/docs/icons/mstile-150x150.png
diff --git a/docs/icons/mstile-310x150.png b/docs/icons/mstile-310x150.png
new file mode 100755
index 0000000..379ebd7
--- /dev/null
+++ b/docs/icons/mstile-310x150.png
diff --git a/docs/icons/mstile-310x310.png b/docs/icons/mstile-310x310.png
new file mode 100755
index 0000000..e1230b3
--- /dev/null
+++ b/docs/icons/mstile-310x310.png
diff --git a/docs/icons/mstile-70x70.png b/docs/icons/mstile-70x70.png
new file mode 100755
index 0000000..6282b8b
--- /dev/null
+++ b/docs/icons/mstile-70x70.png
diff --git a/docs/icons/safari-pinned-tab.svg b/docs/icons/safari-pinned-tab.svg
new file mode 100755
index 0000000..2f1cf28
--- /dev/null
+++ b/docs/icons/safari-pinned-tab.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2378 5115 c-2 -1 -30 -5 -63 -9 -33 -3 -71 -8 -85 -10 -14 -3 -61
+-10 -105 -16 -239 -35 -599 -163 -835 -297 -479 -273 -886 -735 -1095 -1243
+-52 -128 -115 -324 -129 -400 -2 -14 -7 -36 -10 -50 -44 -190 -65 -557 -44
+-780 39 -410 195 -841 429 -1185 303 -446 735 -784 1239 -968 111 -41 310 -97
+395 -111 226 -38 248 -40 480 -41 275 0 380 12 635 76 233 59 453 147 643 258
+43 25 85 51 95 56 46 27 151 103 239 174 523 418 866 1043 940 1716 13 116 9
+511 -6 600 -49 295 -96 465 -194 693 -194 456 -557 879 -982 1146 -152 96
+-423 226 -520 250 -5 2 -18 6 -27 9 -37 14 -54 20 -83 27 -16 5 -73 20 -125
+33 -174 47 -356 69 -582 72 -113 2 -208 2 -210 0z"/>
+</g>
+</svg>
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..d9ec359
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head prefix="og: http://ogp.me/ns#">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Water.css</title>
+    <link rel="canonical" href="https://watercss.kognise.dev/" />
+    <meta
+      name="description"
+      content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
+    />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
+    <link rel="icon" id="icon-16" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
+    <link rel="icon" id="icon-32" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
+    <link rel="manifest" href="./site.webmanifest" />
+    <link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" id="icon-ico" href="./icons/favicon.ico" />
+    <meta name="apple-mobile-web-app-title" content="Water.css" />
+    <meta name="application-name" content="Water.css" />
+    <meta name="msapplication-TileColor" content="#00aba9" />
+    <meta name="msapplication-config" content="./icons/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
+    <link rel="preload" as="style" href="./water.css/dark.min.css" />
+    <link rel="preload" as="style" href="./water.css/light.min.css" />
+    <link rel="stylesheet" id="js-startup-stylesheet" href="./water.css/water.min.css" />
+
+    <!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
+    <link rel="stylesheet" id="js-stylesheet" />
+
+    <!-- Custom styles for the documentation / version picker -->
+    <link rel="stylesheet" href="style.css" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://watercss.kognise.dev/" />
+    <meta property="og:title" content="Water.css" />
+    <meta
+      property="og:description"
+      content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
+    />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/kognise/water.css/master/assets/logo.png"
+    />
+    <meta property="og:image:width" content="1154" />
+    <meta property="og:image:height" content="444" />
+    <script type="application/ld+json">
+      {
+        "@context": "http://www.schema.org",
+        "@type": "WebSite",
+        "name": "Water.css",
+        "alternateName": "Water.css",
+        "url": "https://watercss.kognise.dev/"
+      }
+    </script>
+
+    <script>
+      // eslint-disable-next-line no-useless-escape
+      window.navigator.clipboard || document.write('<script src="https://unpkg.com/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.promise.js"><\/script>')
+    </script>
+
+    <!-- Use bright favicons when the browser is in dark mode. -->
+    <script type="module">
+      import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
+      faviconSwitcher([
+        { element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
+        { element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
+        { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
+      ])
+    </script>
+  </head>
+
+  <body>
+    <h1>Water.css</h1>
+
+    <p>
+      Water.css is a drop-in collection of CSS styles to make simple websites like this just a
+      little bit nicer.
+    </p>
+    <p>
+      Now you can write your simple static site with nice semantic html, and Water.css will manage
+      the styling for you.
+    </p>
+
+    <div class="row">
+      <div>
+        <a href="#installation"><b>Get it already!</b></a>
+        <br />
+        <a href="https://github.com/kognise/water.css"><b>GitHub</b></a>
+      </div>
+
+      <a
+        href="https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css"
+        target="_blank"
+        rel="noopener"
+      >
+        <img
+          id="product-hunt"
+          src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily"
+          alt="Water.css - Make your tiny website just a little nicer | Product Hunt Embed"
+          style="width: 250px; height: 54px;"
+          width="250px"
+          height="54px"
+        />
+      </a>
+    </div>
+
+    <h2>Installation</h2>
+    <div id="installation">
+      <header class="row">
+        <h3 id="link-snippet-headline">
+          Paste this into the <code>&lt;head&gt;</code> of your HTML:
+        </h3>
+        <button type="button" id="copy-button">
+          <span id="copy-button-feedback"></span>
+          Copy to clipboard
+        </button>
+      </header>
+
+      <div id="link-snippet-container">
+        <pre id="link-snippet-auto"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"></code></pre>
+        <pre hidden id="link-snippet-dark"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"></code></pre>
+        <pre hidden id="link-snippet-light"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"></code></pre>
+      </div>
+
+      <h3>Options</h3>
+      <form id="theme-form">
+        <input type="radio" value="auto" checked name="theme" id="theme-auto" />
+        <label for="theme-auto">Automatic 🌙 / ☀</label>
+
+        <input type="radio" value="dark" name="theme" id="theme-dark" />
+        <label for="theme-dark">Dark theme 🌙</label>
+
+        <input type="radio" value="light" name="theme" id="theme-light" />
+        <label for="theme-light">Light theme ☀</label>
+      </form>
+
+      <table id="version-info">
+        <caption>
+          <h3>Version info</h3>
+        </caption>
+
+        <tbody>
+          <tr>
+            <th scope="row">File</th>
+            <td id="table-file-name"></td>
+          </tr>
+
+          <tr>
+            <th scope="row">Size (min + gzip)</th>
+            <td id="table-file-size"></td>
+          </tr>
+
+          <tr>
+            <th scope="row">Theme</th>
+            <td id="table-theme"></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h2 id="goals">Goals</h2>
+    <ul>
+      <li>Responsive</li>
+      <li>Good code quality</li>
+      <li>Good browser support</li>
+      <li>Small size (&lt; 2kb)</li>
+      <li>Beautiful</li>
+      <li>No classes</li>
+    </ul>
+
+    <h2 id="responsive">Is it responsive?</h2>
+    <p>
+      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
+      responsive. Just add the famous
+      <a href="https://www.w3schools.com/css/css_rwd_viewport.asp">responsive viewport tag</a> and
+      you'll be good to go!
+    </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:(function()%7B%2F%2F%20Water.css%20Bookmarklet%0A%2F%2F%20---------------------%0A%0Aconst%20%24%24%20%3D%20(selector)%20%3D%3E%20document.querySelectorAll(selector)%0Aconst%20createElement%20%3D%20(tagName%2C%20properties)%20%3D%3E%20Object.assign(document.createElement(tagName)%2C%20properties)%0A%0A%2F%2F%20Remove%20all%20CSS%20stylesheets%2C%20external%20and%20internal%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%2F%2F%20Remove%20all%20inline%20styles%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Aconst%20linkElm%20%3D%20createElement('link'%2C%20%7B%0A%20%20rel%3A%20'stylesheet'%2C%0A%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.css'%0A%7D)%0A%0A%2F%2F%20Add%20water.css%20and%20responsive%20viewport%20(if%20necessary)%0Adocument.head.append(%0A%20%20linkElm%2C%0A%20%20!%24%24('meta%5Bname%3D%22viewport%22%5D').length%20%26%26%20createElement('meta'%2C%20%7B%0A%20%20%20%20name%3A%20'viewport'%2C%0A%20%20%20%20content%3A%20'width%3Ddevice-width%2Cinitial-scale%3D1.0'%0A%20%20%7D)%0A)%0A%0A%2F%2F%20Theme%20switching%20icons%0Aconst%20moonSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-moon%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'%0Aconst%20sunSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-sun%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22%3E%3C%2Fline%3E%3C%2Fsvg%3E'%0A%0A%2F%2F%20Theme%20toggling%20logic%0Aconst%20toggleBtn%20%3D%20createElement('button'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20ariaLabel%3A%20'Switch%20theme'%2C%0A%20%20style%3A%20%60%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%2050px%3B%0A%20%20%20%20right%3A%2050px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20line-height%3A%201%3B%0A%20%20%60%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0Aconst%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'light')%20%7B%0A%20%20%20%20theme%20%3D%20'dark'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20moonSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fdark.css'%0A%20%20%7D%20else%20%7B%0A%20%20%20%20theme%20%3D%20'light'%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Flight.css'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.addEventListener('click'%2C%20toggleTheme)%0Adocument.body.append(toggleBtn)%7D)()%3B">
+        Waterize
+      </a>
+    </strong>
+
+    <h2 id="demo">Element demos</h2>
+    <p>This is supposed to be a demo page so we need more elements!</p>
+
+    <h3 id="form-elements">Form elements</h3>
+    <form>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />
+
+      <label for="id">User id (read only)</label>
+      <input readonly name="id" id="id" value="04D6H89Z" />
+
+      <label for="disabled">Random disabled input</label>
+      <input disabled name="disabled" id="disabled" placeholder="Because why not?" />
+
+      <label for="about">About me</label>
+      <textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
+
+      <label>Choose a Doe:</label>
+      <div>
+        <input type="radio" id="john" name="drone" value="john" checked />
+        <label for="john">John Doe</label>
+      </div>
+      <div>
+        <input type="radio" id="jane" name="drone" value="jane" checked />
+        <label for="jane">Jane Doe</label>
+      </div>
+      <div>
+        <input type="radio" id="johnny" name="drone" value="johnny" checked />
+        <label for="johnny">Johnny Doe</label>
+      </div>
+
+      <br />
+
+      <input type="checkbox" name="remember" id="remember" checked />
+      <label for="remember">Remember me</label>
+
+      <input type="submit" value="Submit" />
+      <input type="reset" value="Reset" />
+    </form>
+
+    <h3 id="code">Code</h3>
+    <p>
+      Below is some code, you can copy it with <kbd>Ctrl-C</kbd>. Did you know,
+      <code>alert(1)</code> can show an alert in JavaScript!
+    </p>
+    <pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
+
+    <h3 id="other">Other</h3>
+    <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
+    <img src="https://placekitten.com/408/287" alt="Example kitten" />
+    <hr />
+
+    <p>And here's a nicely marked up table!</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Quantity</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Godzilla</td>
+          <td>2</td>
+          <td>$299.99</td>
+        </tr>
+        <tr>
+          <td>Mozilla</td>
+          <td>10</td>
+          <td>$100,000.00</td>
+        </tr>
+        <tr>
+          <td>Quesadilla</td>
+          <td>1</td>
+          <td>$2.22</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <details>
+      <summary>Some summary/details can't hurt!</summary>
+      <p>Lorem ipsum dolor sit blah blah.</p>
+    </details>
+
+    <p>The dialog (form, and menu) tag</p>
+
+    <div>
+      <button type="button" id="dialog-trigger">
+        Show me the dialog!
+      </button>
+      <span id="dialog-result"></span>
+    </div>
+
+    <dialog id="dialog">
+      <header>This is a sample dialog</header>
+      <form method="dialog">
+        <p>What is your favorite pet animal?</p>
+        <menu>
+          <button value="feline">Cats</button>
+          <button value="canine">Dogs</button>
+          <button value="other">Others</button>
+        </menu>
+      </form>
+    </dialog>
+
+    <h3 id="typography">Typography</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
+      ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis
+      ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu
+      felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui
+      aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora
+      torquent per conubia nostra, per inceptos himenaeos.
+      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b>
+      <em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
+    </p>
+
+    <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+      "The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed
+      text is an extended quotation. Usually, this is rendered visually by indentation (see
+      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes"
+        >Notes</a
+      >
+      for how to change it). A URL for the source of the quotation may be given using the
+      <code>cite</code> attribute, while a text representation of the source can be given using the
+      <code>&lt;cite&gt;</code> cite element."
+
+      <footer>
+        <cite>MDN, "The Block Quotation element"</cite>
+      </footer>
+    </blockquote>
+
+    <ul>
+      <li>Unordered list item 1</li>
+      <li>Unordered list item 2</li>
+      <li>Unordered list item 3</li>
+    </ul>
+    <ol>
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3</li>
+    </ol>
+
+    <p>Addresses are also styled to be <strong>awesome</strong>!</p>
+    <address>
+      <a href="mailto:john.doe@example.com">john.doe@example.com</a><br />
+      <a href="tel:778-330-2389">778-330-2389</a><br />
+      <a href="sms:666-666-6666">666-666-6666</a><br />
+    </address>
+
+    <br />
+
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <footer>
+      <a href="#">Back to top ⬆</a>
+    </footer>
+    <script src="script.js" defer></script>
+  </body>
+</html>
diff --git a/docs/script.js b/docs/script.js
new file mode 100644
index 0000000..fb821c0
--- /dev/null
+++ b/docs/script.js
@@ -0,0 +1,88 @@
+'use strict'
+
+const localBase = './water.css/'
+
+const fileSizes = {
+  dark: 2.57,
+  light: 2.55,
+  auto: 3.27
+}
+
+const themeForm = document.getElementById('theme-form')
+const stylesheet = document.getElementById('js-stylesheet')
+const startupStylesheet = document.getElementById('js-startup-stylesheet')
+const productHunt = document.getElementById('product-hunt')
+const copyButton = document.getElementById('copy-button')
+const copyButtonFeedback = document.getElementById('copy-button-feedback')
+const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
+
+const table = {
+  fileName: document.getElementById('table-file-name'),
+  fileSize: document.getElementById('table-file-size'),
+  theme: document.getElementById('table-theme')
+}
+
+const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
+
+const updateProductHunt = (theme) => {
+  theme = theme || (prefersColorScheme.matches ? 'light' : 'dark')
+  productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily`
+}
+
+const updateTheme = () => {
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+
+  const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
+  const localUrl = `${localBase}${fileName}`
+
+  stylesheet.href = localUrl
+
+  for (const snippet of linkSnippets) {
+    snippet.hidden = snippet.id.indexOf(theme) === -1
+  }
+
+  table.fileName.innerText = fileName
+  table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb`
+
+  if (theme === 'auto') {
+    updateProductHunt()
+    table.theme.innerHTML = `
+    Respects user-defined theme settings using <a style="--links: var(--code)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noopener"><code>prefers-color-scheme</code></a>.<br>
+    Light in browsers where the theme settings can't be detected.
+    `
+  } else {
+    updateProductHunt(theme)
+    table.theme.innerText = `Theme is forced to ${theme}.`
+  }
+}
+
+themeForm.addEventListener('change', updateTheme)
+
+updateProductHunt()
+prefersColorScheme.addListener(() => {
+  if (themeForm.theme.value !== 'auto') return
+  updateProductHunt()
+})
+
+updateTheme()
+startupStylesheet.parentElement.removeChild(startupStylesheet)
+
+copyButton.addEventListener('click', () => {
+  const clipboard = navigator.clipboard || window.clipboard
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+  const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent
+
+  clipboard.writeText(snippetText)
+    .then(() => { copyButtonFeedback.textContent = '✔' })
+    .catch(() => { copyButtonFeedback.textContent = '❌' })
+    .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
+})
+
+document.getElementById('dialog-trigger').addEventListener('click', () => {
+  document.getElementById('dialog-result').innerText = ''
+  document.getElementById('dialog').showModal()
+})
+
+document.getElementById('dialog').addEventListener('close', (event) => {
+  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
+})
diff --git a/docs/site.webmanifest b/docs/site.webmanifest
new file mode 100755
index 0000000..e59d2da
--- /dev/null
+++ b/docs/site.webmanifest
@@ -0,0 +1,20 @@
+{
+  "name": "Water.css",
+  "short_name": "Water.css",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "./icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/docs/style.css b/docs/style.css
new file mode 100755
index 0000000..a0c3fc9
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,65 @@
+html {
+  scroll-behavior: smooth;
+}
+
+#product-hunt {
+  margin-top: 1rem;
+}
+
+#link-snippet-headline {
+  margin: 1rem 2.5rem 1rem 0;
+}
+
+/* Make the feedback Emoji appear next to the button */
+#copy-button {
+  position: relative;
+  margin-right: 2px;
+  overflow: visible;
+}
+
+#copy-button-feedback {
+  position: absolute;
+  left: -2rem;
+  display: inline-block;
+  transform: scale(1.3);
+}
+
+#link-snippet-container {
+  overflow: hidden;
+  display: grid;
+  display: -ms-grid;
+  -ms-grid-columns: 1fr;
+}
+
+#link-snippet-container > pre {
+  overflow: auto;
+  grid-column: 1;
+  grid-row: 1;
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms;
+}
+
+#link-snippet-container > pre[hidden] {
+  display: block;
+  visibility: hidden;
+  transform: scale(0);
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1), visibility 0ms 220ms;
+}
+
+#theme-form > label:not(:last-of-type) {
+  margin-right: 1rem;
+}
+
+#version-info th {
+  width: 35%;
+}
+
+body > footer {
+  text-align: right;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}