ui/src/App.vue

@@ -1,154 +1,60 @@
 <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 { Component, Vue } from "vue-property-decorator";
+import Vue from "vue";
 import HelloWorld from "./components/HelloWorld.vue";
 import TitleBar from "./components/TitleBar.vue";
 
-@Component({
+export default Vue.extend({
+  name: "App",
+
   components: {
     HelloWorld,
     TitleBar,
   },
-})
+
-export default class App extends Vue {
+  data: () => ({
-  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-heading-font">
+      <div class="d-flex justify-center text-center mx-auto thw-font">
-        <slot> <h1>TITLE</h1> </slot>
+        TITLE
       </div>
 
       <div class="d-flex justify-end slim text-right text-no-wrap">
         <div class="flex-column">
           <Clock
-            class="d-flex justify-end font-weight-light text-h6 text-md-h5"
+            class="d-flex justify-end text-h5 font-weight-light"
             format="DDD"
           />
           <Clock
-            class="d-flex justify-end font-weight-bold text-h5 text-md-h4"
+            class="d-flex justify-end text-h4 font-weight-bold"
             format="T"
           />
         </div>
@@ -23,7 +23,7 @@
   </v-toolbar>
 </template>
 
-<script lang="ts">
+<script>
 import { Component, Vue } from "vue-property-decorator";
 import Clock from "./Clock.vue";
 
@@ -35,8 +35,12 @@ import Clock from "./Clock.vue";
 export default class TitleBar extends Vue {}
 </script>
 
-<style scoped>
+<style lang="css" scoped>
 .slim {
   max-width: 0;
 }
+
+.thw-font {
+  font-family: "Lubalin Graph", "Roboto", sans-serif !important;
+}
 </style>

ui/src/plugins/vuetify.ts

@@ -4,22 +4,4 @@ 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

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