index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Bastion</title>
    <meta
      name="description"
      content="A human-curated information repository"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <link rel="icon" type="image/x-icon" href="src/favicon.ico" />
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
      }

      .app {
        flex-grow: 1;
        padding: 16px;
        background: linear-gradient(to bottom, #7496b7 60%, #9b98a8);
        background-attachment: fixed;
        font-family: "Trebuchet MS", "Verdana", sans-serif;
        font-size: 15px;
      }

      .page {
        background: #fffefd;
        margin: 0 auto;
        max-width: 900px;
        border-radius: 8px;
        border: 4px solid #fff;
        box-shadow: 0 1px 8px #0008;
      }

      .header {
        background: url("/src/assets/landscape.jpg"),
          linear-gradient(100deg, #7496b7, #9b98a8);
        background-size: cover;
        background-position: center;
        height: 100px;
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 30px 20px;
        color: #fff;
        text-shadow: 0 0 3px #000, 0 0 10px #0008;
      }
    </style>
  </head>
  <body>
    <code><pre id="test-results"></pre></code>
    <div class="app">
      <div class="page">
        <div class="header">
          <h1>Bastion</h1>
        </div>
        <div id="preact-root"></div>
        <script
          defer
          src="https://cdn.jsdelivr.net/npm/wwwebring@0.2.1"
        ></script>
        <div
          style="margin-inline: auto; margin-block: 2em"
          data-wwwebring="https://waywardweb.org/ring.json"
          data-wwwebring-you-are-here="https://bastionhome.github.io"
          data-wwwebring-theme="default"
        ></div>
      </div>
    </div>
    <script type="module" src="src/index.tsx"></script>
  </body>
</html>