ovdashboard/ui/src/App.vue

<template>
  <v-app>
    <v-main>
      <TitleBar
        :logo_above="logo_above"
        :logo_below="logo_below"
        :title="title_html"
      />
      <Dashboard :message="message_html" />
    </v-main>
    <TickerBar
      v-if="ticker_html !== ''"
      :content="ticker_html"
      color="primary"
    />
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Dashboard from "./components/Dashboard.vue";
import TitleBar from "./components/TitleBar.vue";
import TickerBar from "./components/TickerBar.vue";

@Component({
  components: {
    Dashboard,
    TitleBar,
    TickerBar,
  },
})
export default class App extends Vue {
  private logo_above = "Technisches Hilfswerk";
  private logo_below = "OV Musterstadt";
  private title_html = "<h1>changeme</h1>";
  private ticker_html = "<p>changeme</p>";
  private message_html = "<p>changeme</p>";
}
</script>

<style lang="scss">
@import "@/assets/fonts.css";

// THW Logo font
.thw-logo-font {
  font-family: "Lubalin Graph", serif !important;
  font-weight: bold !important;
}

// THW Heading font
.thw-heading-font {
  font-family: "Neue Praxis", "Roboto", sans-serif !important;
}

// THW Text font
.thw-text-font {
  font-family: "Neue Demos", serif !important;
}

// THW Citation font
.thw-citation-font {
  font-family: "Neue Demos", serif !important;
  font-style: italic !important;
}
</style>