apiary/web/frontend/src/App.vue

<template>
  <div id="app">
    <div id="apiary-navbar">
      <b-navbar toggleable="md" type="dark" variant="dark">
        <b-navbar-brand href="#">
          <img
            alt="logo"
            src="logo192.png"
            width="29"
            height="29"
            class="d-inline-block align-top"
          />
          apiary.t-juice.club
        </b-navbar-brand>
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="mr-auto">
            <b-nav-item :to="'/'">Home</b-nav-item>
            <b-nav-item :to="'/stats'">Stats</b-nav-item>
            <b-nav-item :to="'/attempts'">Attempts</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>
    <b-container id="main-content-container" fluid="md">
      <router-view></router-view>
    </b-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import AttemptList from '@/components/AttemptList.vue';
import Stats from '@/components/Stats.vue';

@Component({
  components: {
    AttemptList,
    Stats,
  },
})
export default class App extends Vue {}
</script>

<style lang="scss">
$font-stack-header: 'Secular One', sans-serif;
$font-stack-content: 'Rubik', sans-serif;
#app {
  font-family: $font-stack-content;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
}
.navbar-brand {
  font-family: $font-stack-header;
}
.navbar-nav a {
  font-family: $font-stack-content;
}

h1 h2 h3 {
  font-family: $font-stack-header;
}

#main-content-container {
  margin: 50px;
  text-align: center;
}
</style>