<template>
  <div id="app" :class="{ 'sl-theme-dark': prefersDark }">
    <header>
      <Header />
    </header>
    <main>
      <router-view />
    </main>
    <footer>
      <Jobs />
    </footer>
  </div>
</template>

<script lang="ts">
import Header from "@/components/Header.vue";
import Jobs from "@/components/Jobs.vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: { Header, Jobs },
  data() {
    return {
      prefersDark: false,
    };
  },
  mounted() {
    this.prefersDark =
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches;
  },
});
</script>

<style lang="scss">
@import "../node_modules/normalize.css/normalize.css";
@import "../node_modules/@shoelace-style/shoelace/dist/themes/base.css";
@import "../node_modules/@shoelace-style/shoelace/dist/themes/dark.css";
@import url("/assets/fonts/inter.css");

html {
  --default-font: "Inter", sans-serif;
  --foreground: #2c3e50;
  --background: white;
}

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

@media (prefers-color-scheme: dark) {
  html {
    --foreground: white;
    --background: #2c3e50;
  }
}

html,
body,
#app {
  height: calc(100% - 1rem);

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

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

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

  margin: 1rem 0;

  --monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata",
    monospace;
}

main {
  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);
}
</style>
