THW font scheme

ui/src/App.vue

@@ -1,60 +1,154 @@
 <template>
   <v-app>
-    <!-- <v-app-bar app color="primary" dark>
-      <div class="d-flex align-center">
-        <v-img
-          alt="Vuetify Logo"
-          class="shrink mr-2"
-          contain
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
-          transition="scale-transition"
-          width="40"
-        />
-
-        <v-img
-          alt="Vuetify Name"
-          class="shrink mt-1 hidden-sm-and-down"
-          contain
-          min-width="100"
-          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
-          width="100"
-        />
-      </div>
-
-      <v-spacer></v-spacer>
-
-      <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn>
-    </v-app-bar> -->
-
     <v-main>
-      <TitleBar />
+      <TitleBar>
+        <div v-html="title_html" />
+      </TitleBar>
       <HelloWorld />
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Component, Vue } from "vue-property-decorator";
 import HelloWorld from "./components/HelloWorld.vue";
 import TitleBar from "./components/TitleBar.vue";
 
-export default Vue.extend({
-  name: "App",
-
+@Component({
   components: {
     HelloWorld,
     TitleBar,
   },
-
-  data: () => ({
-    //
-  }),
-});
+})
+export default class App extends Vue {
+  private title_html = "<h1>changeme</h1>";
+}
 </script>
+
+<style lang="scss">
+@font-face {
+  font-family: "Lubalin Graph";
+  src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot");
+  src: url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/60eaf3171fce0c04eb9b3e08bba9bf05.svg#Lubalin BQ")
+      format("svg");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Lubalin Graph";
+  src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot");
+  src: url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/ad42b6e73cbf720f172faa6355b69ec8.svg#LubalinGraph-Book")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Praxis";
+  src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot");
+  src: url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/95d43d14f7d8f0f4692f507c86a29e25.svg#PraxisEF")
+      format("svg");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Praxis";
+  src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot");
+  src: url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/3d62d4fffdd20ba4608e1b29e0f6fb42.svg#PraxisEF")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Demos";
+  src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot");
+  src: url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/57c19d4b8c4d1632fc97994508a35f5d.svg#DemosEF")
+      format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Neue Demos";
+  src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot");
+  src: url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.eot?#iefix")
+      format("embedded-opentype"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff2")
+      format("woff2"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.woff")
+      format("woff"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.ttf")
+      format("truetype"),
+    url("//db.onlinewebfonts.com/t/ad75fa70682671bbf5a5cec5f6df1470.svg#DemosEF")
+      format("svg");
+  font-weight: normal;
+  font-style: italic;
+}
+
+// THW Logo font
+.thw-logo-font {
+  font-family: "Lubalin Graph", serif !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>

ui/src/components/TitleBar.vue

@@ -3,18 +3,18 @@
     <v-container class="d-flex pa-0" fluid fill-height>
       <div class="d-flex justify-start slim text-left text-no-wrap">LOGO</div>
 
-      <div class="d-flex justify-center text-center mx-auto thw-font">
-        TITLE
+      <div class="d-flex justify-center text-center mx-auto thw-heading-font">
+        <slot> <h1>TITLE</h1> </slot>
       </div>
 
       <div class="d-flex justify-end slim text-right text-no-wrap">
         <div class="flex-column">
           <Clock
-            class="d-flex justify-end text-h5 font-weight-light"
+            class="d-flex justify-end font-weight-light text-h6 text-md-h5"
             format="DDD"
           />
           <Clock
-            class="d-flex justify-end text-h4 font-weight-bold"
+            class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
             format="T"
           />
         </div>
@@ -23,7 +23,7 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import Clock from "./Clock.vue";
 
@@ -35,12 +35,8 @@ import Clock from "./Clock.vue";
 export default class TitleBar extends Vue {}
 </script>
 
-<style lang="css" scoped>
+<style scoped>
 .slim {
   max-width: 0;
 }
-
-.thw-font {
-  font-family: "Lubalin Graph", "Roboto", sans-serif !important;
-}
 </style>

ui/src/plugins/vuetify.ts

@@ -4,4 +4,22 @@ import Vuetify from 'vuetify/lib/framework';
 Vue.use(Vuetify);
 
 export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        // ultramarine blue
+        primary: "#039",
+        // cyan 30 percent
+        secondary: "#aae0f9",
+        // yellow
+        accent: "#ff0",
+        // cyan
+        info: "#00aeef",
+        // gen: coolors.co
+        error: "#f66",
+        success: "#23ce6b",
+        warning: "#d36135",
+      },
+    },
+  },
 });

ui/src/sass/variables.scss

@@ -0,0 +1,2 @@
+$heading-font-family: "Neue Praxis", "Roboto", sans-serif;
+$body-font-family: "Neue Demos", serif;