upend/ui/src/App.svelte

<script lang="ts">
  import { Router, Route, createHistory } from "svelte-navigator";
  import createHashSource from "./util/history";
  import Header from "./components/layout/Header.svelte";
  import Footer from "./components/layout/Footer.svelte";
  import Home from "./views/Home.svelte";
  import Browse from "./views/Browse.svelte";
  import Search from "./views/Search.svelte";

  const history = createHistory(createHashSource());

  let footerHeight = "0";
  function setBottomMargin(size: CustomEvent<ResizeObserverEntry>) {
    footerHeight = `${size.detail.contentRect.height}px`;
  }
</script>

<Router {history} primary={false} --footer-height={footerHeight}>
  <Header />

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

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

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

  <Footer on:resize={setBottomMargin} />
</Router>

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

  @use "normalize.css/normalize.css";
  @import url("/assets/fonts/inter.css");

  $primary: #2c3e50;
  $primary-lighter: #3a5068;
  $primary-lightest: #3a92f0;
  $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: -4%)};
    --primary-lightest: #{$primary-lightest};
    --error: darkred;
    --warning: orange;
    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};
      --primary-lightest: #{$primary-lightest};
      --error: red;
    }
  }

  html,
  body {
    height: 100%;

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

  #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);
  }

  .spinner {
    font-size: 2em;

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