index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="favicon.ico" />
    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Sourdough Calculator" />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="theme-color" content="#ffffff" />
    <title>Dough</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <main>
      <header>
        <h1>Dough</h1>
        <img src="logo.svg" alt="" />
        <h2>Sourdough Calculator</h2>
      </header>
      <div>
        <details>
          <summary>Help?</summary>
          <ul>
            <li>
              All figures are required and editable, changes will adjust other
              figures accordingly.
            </li>
            <li>
              Weights are rounded for simplicity, so things might be out a
              couple of g.
            </li>
            <li>
              If you put wacky numbers in you'll get wacky numbers out, and a
              probably not a very nice dough either!
            </li>
            <li>
              The calculator assumes you are using your starter like a levain or
              preferment.
            </li>
            <li>Water is total hydration minus water in starter.</li>
          </ul>
          <h2>Instructions</h2>
          <ol>
            <li>Specify doughball quantity &amp; weight.</li>
            <li>Specify flour baker's percentages.</li>
            <li>
              Specify non-flour baker's percentages such as hydration (% of
              total flour weight).
            </li>
            <li>
              Make your doughballs, the recipe is up you you, this can only give
              you your formula.
            </li>
          </ol>
        </details>
        <div id="root"></div>
      </div>
      <footer>
        © <a href="http://margni.com">Margni Ltd.</a> 2020 –
        <a href="https://github.com/margni/dough">Source</a>
      </footer>
    </main>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>