upend/ui/src/App.svelte

<script lang="ts">
  import { Router, Route, createHistory } from "svelte-navigator";
  import createHashSource from "./util/history";
  import Header from "./layout/Header.svelte";
  import Home from "./views/Home.svelte";
  import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js";
  import "@shoelace-style/shoelace/dist/components/input/input.js";
  import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
  import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
  import "@shoelace-style/shoelace/dist/components/card/card.js";
  import Browse from "./views/Browse.svelte";
  import Search from "./views/Search.svelte";

  setBasePath("/vendor/shoelace");

  $: document.body.classList.toggle(
    "sl-theme-dark",
    window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
  );

  const history = createHistory(createHashSource());
</script>

<Router {history} primary={false}>
  <Header />

  <Route path="/">
    <Home />
  </Route>

  <Route path="/browse/*addresses" let:params>
    <Browse />
  </Route>

  <Route path="/search/:query" let:params>
    <Search query={params.query} />
  </Route>
</Router>

<style global lang="scss">
  @use "sass:color";

  @use "normalize.css/normalize.css";
  @use "@shoelace-style/shoelace/dist/themes/light.css";
  @use "@shoelace-style/shoelace/dist/themes/dark.css";
  @import url("/assets/fonts/inter.css");

  $primary: #2c3e50;
  $primary-lighter: #394f66;
  $background: white;

  html {
    --default-font: "Inter", sans-serif;
    --monospace-font: "Fira Code", "Consolas", "Inconsolata", "Hack", monospace;
    --foreground: #{$primary};
    --foreground-lighter: #{$primary-lighter};
    --background: #{$background};
    --background-emph: #{color.scale($background, $lightness: -3%)};
    font-size: 15px;

    b {
      color: red;
    }
  }

  @supports (font-variation-settings: normal) {
    html {
      --default-font: "Inter var", sans-serif;
      font-feature-settings: "ss02" on, "case" on;
    }
  }

  @media (prefers-color-scheme: dark) {
    html {
      --foreground: #{$background};
      --foreground-lighter: #{color.scale($background, $lightness: -50%)};
      --background: #{$primary};
      --background-emph: #{$primary-lighter};
    }
  }

  html,
  body,
  #app,
  #root {
    height: 100%;

    font-family: var(--default-font);
    color: var(--foreground);
    background: var(--background);
  }

  #root {
    color: var(--foreground);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin: 1rem 0;
  }

  #main {
    display: flex;
    flex-grow: 1;
  }

  #main,
  #header {
    margin: 0 2rem;
  }

  #footer {
    position: fixed;
    bottom: 0;

    width: 100%;

    display: flex;
    flex-direction: column;

    background: var(--background);
  }

  #footer > * {
    margin: 1rem;
  }

  a {
    color: var(--foreground);
  }

  a:visited {
    color: var(--foreground);
  }

  sl-spinner {
    font-size: 2em;
    --track-width: 6px;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
</style>